Фавикон вордпресс: Как изменить фавикон WordPress?

Favicon by RealFaviconGenerator — Плагин для WordPress

• Детали
• Отзывы
• Установка
• Разработка

Поддержка

Generate and setup a favicon for desktop browsers, iPhone/iPad, Android devices, Windows 8 tablets and more. In a matter of seconds, design an icon that looks great on all major platforms.

Favicon is not just a single favicon.ico file dropped in the middle of your site. Nowadays, with so many different platforms and devices, you need a bunch of pictures to get the job done. With RealFaviconGenerator, generate all the icons you need for desktop browsers, iPhone/iPad, Android devices, Windows 8 devices, and more.

iOS devices use a high resolution Apple touch icon to illustrate bookmarks and home screen shortcuts. A first generation iPhone needs a 57×57 picture, whereas a brand new iPad with Retina screen looks for a 152×152 picture. Android Chrome also use these pictures if it finds them. Windows 8 takes another route with a dedicated set of icons and HTML declarations.

Favicon is not only a matter of pictures with different resolutions. The various platforms coms with different UI guidelines. For example, the classic desktop favicons often use transparency. But iOS requires opaque icons. And Windows 8 has its own recommendations.

Save hours of research and image edition with RealFaviconGenerator and its companion plugin. In a matter of seconds, you setup a favicon compatible with:

• Windows (IE, Chrome, Firefox, Opera, Safari)
• Mac (Safari, Chrome, Firefox, Opera, Camino)
• iOS (Safari, Chrome, Coast)
• Android (Chrome, Firefox)
• Surface (IE)
• And more

We take compatibility very seriously. See http://realfavicongenerator.net/favicon_compatibility for the full list.

This plugin relies on RealFaviconGenerator when you create your favicon. Browse its terms of service and privacy policy for additional information.

Localization

• English (en_EN) by Philippe Bernard
• French (fr_FR) by Philippe Bernard
• Swedish (sv_SE) by Linus Wileryd
• Brazilian Portuguese (pt_BR) by Marcelo Volgarini, Criação de Sites
• Dutch (nl_NL) by Axel Vanderhaeghen
• Danish (da_DK) by Alexander Leo-Hansen
• Czech (cs_CZ) by an anonymous translator
• Polish (pl_PL) by Maciej Gryniuk
• Russian (ru_RU) by Natasha Diatko, UStarCash
• Indonesian (id_ID) by Jordan Silaen

• Initial favicon setup screen. You are invited to setup your favicon.
• Select a master picture from the Media Library (optional)
• Once you hit the Generate Favicon button, you are redirected to RealFaviconGenerator, where you can design your favicon: adding a background to your iOS picture, using a saturated version of your master picture for Windows 8. ..
• When you are done with the favicon editor, you are redirected to the WordPress Dashboard. The favicon is installed automatically. This screen presents you a preview of the favicon you various platforms, so you know how your blog looks like on various platforms.
• You can also trigger RealFaviconGenerator’s favicon checker, to make sure your favicon is correctly setup.

Using The WordPress Dashboard

1. Navigate to the ‘Add New’ in the plugins dashboard
2. Search for ‘Favicon by RealFaviconGenerator’
3. Click ‘Install Now’
4. Activate the plugin on the Plugin dashboard
5. Navigate to the ‘Favicon’ entry in the Appearance menu
6. Select a master picture from the Media Library (optional)
7. Click the ‘Generate Favicon’ button and follow the instructions.

Using FTP

1. Download favicon-by-realfavicongenerator.zip
2. Extract the favicon-by-realfavicongenerator directory to your computer
3. Upload the favicon-by-realfavicongenerator directory to the /wp-content/plugins/ directory
4. Activate the plugin on the Plugin dashboard
5. Navigate to the ‘Favicon’ entry in the Appearance menu
6. Select a master picture from the Media Library (optional)
7. Click the ‘Generate Favicon’ button and follow the instructions.

It was a lot of fun to create, and I was so absorbed in it that I lost track of time.

easy way to favicon

exactly what I’m looking for.

Great plugin! It has improved and has been made more easy to use over the years.Thank you Philippe.

Funciona a la primera. Estupendo.

Awesome!

Посмотреть все 734 отзыва

«Favicon by RealFaviconGenerator» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

• phbernard

«Favicon by RealFaviconGenerator» переведён на 15 языков. Благодарим переводчиков за их работу.

Перевести «Favicon by RealFaviconGenerator» на ваш язык.

Заинтересованы в разработке?

Посмотрите код, проверьте SVN репозиторий, или подпишитесь на журнал разработки по RSS.

1.3.27

• Plugin was tested up to WordPress 6.1.1 — Previous tag was wrongly set

1.3.26

• Plugin was tested up to WordPress 6.1.1

1.3.25

• Escape favicon HTML
• URL sanitization

1.3.24

• Security audit
• Plugin was tested up to WordPress 5.9.3

1.3.23

• Fix reflected cross-site scripting issue
• Plugin was tested up to WordPress 5.9.2

1.3.22

• Fix inconsistency in previous deploy

1.3.21

• Plugin was tested up to WordPress 5.8
• Fix XSS security issue, reported by WPSpan.com. See https://wpscan.com/vulnerability/ed9d26be-cc96-4274-a05b-0b7ad9d8cfd9?fbclid=IwAR2aRMXRjbGm9ppoI9tM-OHm26Q0ax4yt0MkcP5sp0-pz9D4eVIEHQwvG1Y

1.3.20

• Fix: media selection works again
• Plugin was tested up to WordPress 5.6

1.3.19

• Plugin was tested up to WordPress 5.5.3

1.

3.18

• Remove reference to deprecated function screen_icon
• Plugin was tested up to WordPress 5.4

1.3.17

• Changes to clear security warnings from CodeRisk

1.3.16

• Plugin was tested up to WordPress 5.3.2

1.3.15

• Plugin was tested up to WordPress 5.1

1.3.14

• Plugin was tested up to WordPress 5.0-beta5

1.3.13

• Plugin was tested up to WordPress 4.9.7

1.3.12

Never published, no change

1.3.11

• id/ID translation added, thanks to Jordan Silaen
• Plugin was tested up to WordPress 4.8.1

1.3.10

• Always access RealFaviconGenerator via HTTPS
• Clarification in local path separators for Windows
• Plugin was tested up to WordPress 4.7.1
• Notice to ask administrator to not deactivate the plugin

1.3.9

• Plugin was tested up to WordPress 4.7

1.

3.8

• Plugin was tested up to WordPress 4.6

1.3.7

• Fix: Plugin keywords rephrased (some were not taken into account).

1.3.6

• Fix: the icons path was sometimes wrong when the upload directory was the root directory

1.3.5

• pl/PL translation added, thanks to Maciej Gryniuk
• ru/RU translation added, thanks to Natasha Diatko

1.3.4

• Plugin was tested up to WordPress 4.5

1.3.3

• Deactivate debug logs

1.3.2

• Typos in French translations
• Warning fix for PHP7
• Tested up to WordPress 4.4.1
• cs/CZ translation added, thanks to an anonymous translator

1.3.1

• Hotfix in previous version.

1.3.0

• The plugin takes advantage of RealFaviconGenerator’s non-interactive API to upgrade the favicon automatically whenever a new version is available.

1.2.15

• Donation link added.
• Plugin now works when access to file system is via FTP (not direct). See https://wordpress.org/support/topic/no-images-created

1.2.14

• Security improvement.
• Warning fix regarding NONCE_ACTION_NAME.
• Useless PHP closing tags removed.
• Error checking added to favicon package unzipping.

1.2.13

• XSS vulnerability fixed, reported by Kacper Szurek

1.2.12

• Performance improvements: favicon update checking is now done in the Admin section (not the Public section), locales are not loaded in the Public section anymore.
• Take advantage of the Rewrite API (when available) to make the files appear to be in the root directory. So http://example.com/favicon.ico works (eg. when requested by Yandex).
• nl/NL translation added, thanks to Axel Vanderhaeghen.

1.2.11

• When the admin’s browser cannot get the picture selected from the Media Library, the UI fails gracefully.
• Favicon package unzipping is more robust.
• Notice to ask users to rank the plugin on WordPress.org.

1.2.10

• Warning fix when used with BuddyPress (bp_setup_current_user). See https://wordpress.org/support/topic/wp_debug-notice-for-bp_setup_current_user.

1.2.9

• When selected from the Media Library, the master picture is now retrieved by WP administrator’s browser to prevent several issues (locally hosted blogs, blogs protected in a way or another, etc.).

1.2.8

• Plugin successfully tested against WordPress 4.1.

1.2.7

• Fix for WordPress sites hosted on Windows.

1.2.6

• The plugin is now compatible with multisite.

1.2.5

• Fix for login page: favicon code was not injected in this particular page.

1.2.4

• Remove debug messages to avoid false positives in error log.

1.2.3

• Update notifications can be dismissed once for all.
• New Settings page to enable/disable update notifications.

1.2.2

• Fix for the 403 issue with HostGator hosting service (https://wordpress.org/support/topic/403-error-when-generating-favicon).

1.2.1

• Fix in plugin removal and update checking.

1.2.0

• The plugin now warns the user when RealFaviconGenerator was updated and the favicon should be generated again.

1.1.1

• Rewrite API usage disabled. Favicon files do not appear to be in the root directory of the blog anymore.

1.1.0

• Run RealFaviconGenerator’s favicon checker from the admin interface.

1.0.7

• Deactivate default Genesis favicon when one is configured in FbRFG.

1.0.6

• Error management improved during favicon install.

1.0.5

• Do not try to rewrite the favicon files URL when .htaccess is not writable.

1.0.4

• Option to not rewrite the favicon files URL, even when this is possible.

1.0.3

• Plugin code syntax changed to fit older versions of PHP.

1.0.2

• Callback URL was too long for some servers. It has been shorten.

1.0.1

• Favicon admin settings are now in the Appearance menu.
• Fix in favicon package download.
• Fix in error management during favicon installation.

1.0

Initial version.

Оценки

Посмотреть все

• 5 звёзд 721
• 4 звезды 5
• 3 звезды 2
• 2 звезды 3
• 1 звезда 4

Войдите, чтобы оставить отзыв.

Участники

• phbernard

Поддержка

Решено проблем за последние 2 месяца:

0 из 2

Перейти в форум поддержки

Пожертвование

Would you like to support the advancement of this plugin?

Пожертвовать на развитие плагина

Как установить фавикон (favicon) на сайте wordpress

Фавикон, или значок сайта, является важным элементом брендинга, который должен быть у каждого сайта WordPress. Это крошечные изображения, которые вы видите на вкладке браузера, когда открываете веб-сайт.

В качестве иллюстрации, вот как выглядит favicon в браузере.

Скорее всего, вы видели их миллион раз в интернете. Но зачем они нужны? Стоит ли вам беспокоиться о том, чтобы иметь их на вашем блоге WordPress или сайте?

Правда в том, что они гораздо важнее, чем вы можете себе представить. Если вы не устанавливаете пользовательский фавикон на своем веб-сайте, по умолчанию будет использоваться общий значок. И это не будет хорошо для вашего дизайна сайта и идентичности.

В такой ситуации ваш сайт, скорее всего, потеряется в глазах веб-пользователя.

Есть много других важных ролей, которые играют фавиконы. Давайте узнаем, как создать и загрузить свой фавикон на свой сайт.

Как создавать фавиконы

Учитывая все сказанное, самое время создать запоминающийся фавикон для вашего сайта WordPress. Есть три способа это сделать:

• Изменение существующего логотипа сайта
• Услуги дизайнера
• Сделать самостоятельно

Изменение существующего логотипа сайта

Это, безусловно, самый простой, быстрый и эффективный способ. На самом деле, фавикон — это не более чем обрезанный логотип.

Если вы будете использовать логотип вашего сайта, вам придется сделать некоторые изменения. Используя программное обеспечение для редактирования фотографий, такое как Photoshop, отрегулируйте размер изображения до 512 на 512 пикселей. Это стандартный размер для WordPress.

Читайте также: Как правильно оптимизировать изображения в WordPress

Нанять дизайнера

Хотя это может быть затратным способом, услуги профессионального дизайнера имеют некоторые преимущества. Во-первых, вы уверены, что получите изображение хорошего качества.

Кроме того, профессиональный дизайнер создаст уникальный для вашего бизнеса фавикон.

Однако, поскольку обрезанный логотип часто выполняет эту работу, вам нужно взвесить все » за » и «против», а затем решить, хотите ли вы потратить дополнительные деньги.

Сделай сам

Если у вас есть навыки и время, вам будет достаточно просто сделать фавикон самостоятельно. Вы можете использовать программу для редактирования изображений, такую как Gimp, Photoshop или Illustrator.

В качестве альтернативы вы можете использовать онлайн-инструмент, такой как Faviconer. У вас есть возможность нарисовать собственный значок или загрузить изображение. Затем Фавиконер сделает фавикон из загруженного изображения.

У вас также есть возможность онлайн-генераторов, которые выделяют фавиконы одним нажатием кнопки. Примеры таковы Favicon.cc и https://www.favicon-generator.org.

Формат Favicon

В первые дни существования WordPress вы могли загрузить только ICO-файл для favicon. Формат файла ICO позволил браузерам регулировать размер фавикона в зависимости от устройства просмотра.

Но те дни прошли. Теперь WordPress принимает графические файлы в форматах ICO, jpg, png или gif.

И последнее, что стоит упомянуть, — это размер иконки. Чтобы изображение не было обрезано, убедитесь, что его длина и ширина одинаковы. Он должен быть не менее 512px на 512px-идеально квадратной формы.

Читайте также: Как установить плагины для WordPress.

Загрузка фавикона на WordPress

С вашим фавиконом все готово, самое время загрузить его на свой сайт WordPress. Есть несколько способов, которыми вы можете это сделать.

У вас есть возможность вручную загрузить значок сайта или использовать плагин.

Загрузка на ваш сайт вручную по FTP

Для более старых версий WordPress (4.2 и ниже) у вас была только возможность загружать фавиконы через FTP. Вряд ли вам понадобится использовать этот метод. Серьезно, если ваша версия WordPress 4.2 или ниже, пожалуйста, обновите ее.

Читайте также: Как обновить сайт WordPress.

Тем не менее, вот как можно загрузить favicon в более старых версиях WP.

Во-первых, в этом случае ваши изображения favicon должны быть размером 16px на 16px и называться favicon.ico.

Установите соединение с вашим сайтом с помощью FTP-программы. После установления соединения следующим шагом является загрузка изображения в корневой каталог вашего сайта.

Корневой каталог (также корневая папка) — это основная папка, содержащая ваши WP-файлы (часто это public_html).

Читайте также: Как использовать FTP для загрузки файлов на WordPress

Как загрузить изображение на свой сайт через FTP

Найдите изображение, которое вы хотите загрузить на свой компьютер, и выберите его.

Как только вы выберете изображение, щелкните на нем правой кнопкой мыши и нажмите кнопку Upload (Загрузить).

Когда изображение загружено на ваш сайт, вы должны поместить следующий код в свой header.php, перед тегом </head>.

<link rel="icon" type="image/x-icon" href="http://www.mywebsite.com/favicon.ico">

Конечно, вы должны заменить mywebsite.com вашим доменным именем.

Вы найдете header.php по навигации wp-content >> themes >> your theme >> header.php

Щелкните по нему правой кнопкой мыши, выберите Просмотр/редактирование, затем вставьте код, сохраните и загрузите.

Однако, если вам неудобно вносить изменения в ваши основные файлы, есть обходной путь. Просто установите и активируйте плагин Insert Headers and Footers.

После установки и активации перейдите в раздел Настройки > > вставить верхние и нижние колонтитулы. Затем вставьте код.

Загрузка через WordPress Customizer

Существует встроенная функция, которая позволяет загружать favicon на ваш сайт WordPress, независимо от имени или типа файла. Этот более простой метод доступен, если у вас есть последняя версия WordPress.

Чтобы использовать его, войдите в свою панель управления WordPress.

Затем перейдите к внешний вид> > настроить

Затем перейдите к свойства сайта > > иконка сайта

После нажатия кнопки вы попадете в медиатеку вашего сайта. Если изображение уже было загружено, просто выберите его.

В противном случае загрузите его, перейдя на вкладку Загрузить файлы и выбрав его на своем локальном компьютере. Когда закончите, нажмите Опубликовать.

Загрузка через плагин

Существует довольно много плагинов для WordPress, которые вы можете использовать для установки фавикона на свой сайт. Использование плагинов гарантирует, что функции иконок вашего сайта никогда не будут потеряны, независимо от устройства, на котором они просматриваются.

Однако, учитывая, что для этого есть встроенный метод, используйте плагин только в том случае, если вы серьезно обеспокоены тем, как ваш favicon отображается на разных устройствах.

Одним из самых популярных плагинов для этого является Favicon by RealFaviconGenerator. После установки перейдите в раздел Внешний вид > > Favicon.

Затем выберите изображение. Убедитесь, что изображение соответствует указанным размерам. Затем нажмите кнопку Generate favicon (Создать фавикон).

После нажатия кнопки вы попадете в онлайн-инструмент оптимизатора. Здесь ваше загруженное изображение будет оптимизировано для устройств Android, iOS и Windows.

Прокрутите страницу вниз и нажмите кнопку Generate Favicon and HTML Code (Создать фавикон и HTML-код).

Вот и все!

Как добавить и изменить значок WordPress | WP Buffs

Люди используют WordPress для создания веб-сайтов для частных лиц и предприятий. Один из способов помочь постоянным посетителям узнать, что сайт принадлежит вам, — это создать собственный значок WordPress.

Что такое фавикон?

Фавикон — это значок, который отображается на вкладке или в окне браузера, а также в списке закладок или избранного, специально связанных с определенным сайтом. Если браузер не находит пользовательский значок, вместо него отображается значок по умолчанию.

Фавикон WordPress часто представляет собой крошечную версию логотипа сайта. Возможно, вы сможете уменьшить логотип до размера фавикона, но обычно необходимо создать логотип, связанный с исходным логотипом.

Создается брендинг и логотип

Зачем мне использовать Favicon?

Компании должны иметь фавикон, чтобы повысить узнаваемость и поощрить доверие потенциальных клиентов. Брендинг позволяет посетителям мгновенно узнавать сайт. Это добавляет преемственности и легитимности.

Физические лица также могут использовать фавикон по тем же причинам, хотя в большинстве случаев целью являются повторные посещения, а не покупки.

Характеристики фавикона

Размер фавикона в WordPress составляет 16×16 пикселей. Однако некоторые другие браузеры и приложения используют больший размер, от 16 до 195 квадратных пикселей.

Если вы придерживаетесь размера 16×16, приложения, использующие большие размеры, обычно увеличивают его, что часто приводит к пикселизации. Из-за этого для идентификации сайта WordPress вместо этого требуется 512 × 512.

Некоторые распространенные альтернативные размеры:

• 24 пикселя — значок закрепленного сайта в Internet Explorer 9
• 72 пикселя — значок на главном экране iPad
• 128 пикселей — значок, используемый в Интернет-магазине Chrome
• 195 пикселей — значок, отображаемый в Opera Speed ​​Dial

Форматы фавикона

Фавикон отображается неправильно если он сохранен в неправильном формате. Наиболее распространенным форматом является Windows ICO, что было первоначальным требованием. Он может поддерживать различные размеры и разрешения для использования на нескольких платформах. Это единственный формат, используемый Internet Explorer.

PNG является наиболее удобным для пользователя вариантом, поскольку почти любая графическая программа будет сохранять в этом формате, он обеспечивает небольшой размер файла и позволяет при желании сделать значок значка прозрачным.

Opera поддерживает использование SVG для фавиконов, хотя это единственный браузер, который это делает.

GIF, JPG и APNG являются вариантами, но они менее полезны, поскольку их разрешение хуже и они могут отвлекать внимание. Отвлечение особенно вероятно с анимированными файлами GIF и файлами APNG, которые также анимированы.

Создание фавикона

Создание фавикона WordPress для повышения узнаваемости вашего сайта — отличная идея. Вы можете создать его в графической программе на своем компьютере или использовать бесплатный веб-сайт в Интернете, например, favicon-generator. org или favicon.cc.

Примеры фавикона в браузере Chrome

Учтите следующие факторы, чтобы повысить ценность вашего фавикона.

Идентификация

Самая важная причина иметь фавикон — быть узнаваемым. Создайте дизайн, который представляет продукт или услугу, которую вы предлагаете, или дизайн, который соответствует логотипу вашего бренда. Изображение, которое имеет непосредственное отношение к вашему бренду, например, уменьшенная версия логотипа или основная буква или буквы названия компании, идеально подходит.

Простота

Из-за своего небольшого размера проще всего. Основные формы или буквы — хороший выбор для наглядности. Когда посетители узнают его с первого взгляда, это наиболее эффективно. Чем больше деталей вы пытаетесь включить, тем труднее посетителю понять, что это за значок. Важны точность, смелость и ясность.

Цвета

Высокая контрастность улучшает читаемость и повышает узнаваемость. Рассмотрим фавиконы таких сайтов, как NBC и Netflix. Их сайты сразу очевидны. Сайты, которые имеют четкую цветовую идентичность, должны включать этот цвет в свой значок WordPress. Опять же, будьте проще. Слишком много цветов может привести к нечеткому изображению.

Как добавить значок сайта в WordPress

Добавьте значок сайта WordPress одним из следующих способов:

1) Используйте встроенную опцию «Значок сайта» в WordPress.

Наведите указатель мыши на «Внешний вид» и выберите «Настроить», затем перейдите на вкладку «Идентификация сайта». Значок сайта находится в нижней части левой панели и позволяет выбрать любое квадратное изображение размером 512 пикселей или больше, размер которого затем изменяется по мере необходимости.

Если выбранный вами файл не является квадратным, WordPress предоставляет интерфейс для обрезки изображения до квадрата.

Редактор WP Buffs для добавления нового фавикона WordPress

2) Отредактируйте файл header.php

Отредактируйте файл header.php в вашей текущей теме и добавьте этот код:

  yourdomain.com/favicon.ico” type="image/x-icon" >
  

Замените «yourdomain» доменным именем вашего сайта и сделайте обязательно загрузите фавикон в веб-пространство.

Если вы хотите, чтобы WordPress не отменял изменения в обновлении, создайте дочернюю тему перед редактированием и отредактируйте файл дочерней темы вместо основного файла темы.

3) Используйте плагин WordPress.

Используйте один из плагинов, перечисленных ниже.

Как изменить фавикон в WordPress

Изменение фавикона WordPress аналогично его добавлению. Те же методы работают для загрузки нового фавикона. Также можно загрузить новый и перезаписать старый, что изменит его, когда посетители очистят свой кеш или сделают жесткое обновление.

Позвольте WP Buffs обрабатывать ваши обновления и изменения, если вы сочтете процесс запутанным. Команда доступна 24/7 для предоставления услуг и помощи.

Упрощение с помощью плагина WordPress Favicon

Упростите процесс добавления или изменения фавикона WordPress, установив плагин.

• Вы можете использовать плагин Insert Headers and Footers, чтобы легко добавить приведенный выше код. Вставьте код в раздел заголовка и сохраните его.
• Плагин All in One Favicon добавляет функциональность, упрощающую процесс добавления фавикона.
• RealFaviconGenerator — это плагин, который генерирует значки на основе требований браузера.
• Другим популярным плагином является Heroic Favicon Generator, который генерирует фавиконку из загруженного изображения или уже имеющегося в вашей медиатеке. Он использует перетаскивание для загрузки файлов изображений.

Почему мой фавикон WordPress не отображается?

Существует несколько возможных причин ошибок favicon, от ошибок пользователя до особенностей браузера.

Кэш

Когда ваш веб-сайт находится в кэше, изменения таких элементов, как фавикон, требуют времени для отображения. Вы можете ускорить процесс, выполнив аппаратное обновление (Ctrl + F5) или очистив кеш браузера. Если это не решит проблему, проверьте тип файла значка. Если это не файл .ico, возможно, он несовместим с браузером.

Опечатки

Если у вас есть типографская ошибка в коде, фавикон, скорее всего, выдаст ошибку, а не отобразит. Простые ошибки, такие как отсутствующая кавычка, косая черта или квадратная скобка, вызывают ошибки, которые искажают изображение и, возможно, всю веб-страницу. Внимательно проверьте код.

Местоположение фавиконки WordPress

Ссылка на файл также очень специфична. Если ссылка (часть в кавычках href) указывает на несуществующее изображение, фавикон не будет отображаться. Будьте осторожны, чтобы загрузить файл favicon и скопировать точную ссылку. Лучший способ сделать это — использовать медиатеку внутри WordPress.

Локальный вид

Если вы проверяете отображение на локальном компьютере, а не загружаете интернет-страницу, значок WordPress не будет отображаться, поскольку большинство браузеров не ищут значок локально. Проверьте страницу в Интернете, чтобы убедиться, что она отображается посетителям.

Неверный тип изображения

Тип файла по умолчанию для изображения фавикона — .ico («image/ico»). Когда используется другой тип файла, например PNG или SVG, это необходимо настроить в коде при использовании метода редактирования темы. Тип файла должен соответствовать типу файла изображения. Например, в файле PNG должно быть указано «image/png» вместо «image/ico».

Для получения дополнительной информации обо всех темах, связанных с WordPress, подпишитесь на информационный бюллетень WPBuffs.

Люди также спрашивают

Как добавить значок сайта в WordPress?

Самый простой способ добавить фавикон WordPress — использовать раздел «Идентификация сайта» в разделе «Настроить». Второй самый простой — использовать плагин. Вы также можете добавить значок вручную, отредактировав тему.

Где находится фавикон в WordPress?

Сам значок отображается в заголовке вкладки или окна. Он также отображается в списках закладок. Этот параметр находится в разделе «Внешний вид» в разделе «Настройка». Оттуда нажмите «Идентификация сайта», и значок сайта в нижней части левой панели — это то место, куда вы загружаете свой значок.

Какого размера значок WordPress?

16 × 16 пикселей — это размер по умолчанию, но если вы используете метод Site Identity, вместо этого изображение должно иметь размер 512 × 512 пикселей. Программное обеспечение уменьшит изображение до нужного размера для каждого браузера или устройства.

Как изменить значок в WordPress?

Вы меняете фавикон так же, как добавляете его. Либо перейдите в «Внешний вид» → «Настроить» → «Идентификация сайта», измените его в своем плагине или загрузите новый файл favicon.ico, перезаписав предыдущий.

Если вам понравилась эта статья, значит, вам действительно понравится круглосуточное управление веб-сайтом WordPress и услуги поддержки, которые может предложить WP Buffs! Станьте партнером команды, которая предлагает все аспекты премиальных услуг поддержки WordPress.

От услуг по оптимизации скорости до неограниченного редактирования веб-сайтов, безопасности, круглосуточной поддержки и даже управления сайтами по схеме White Label для агентств и фрилансеров — наши опытные инженеры окажут вам поддержку. Пригласите нас в свою команду, чтобы сделать ваш сайт Bufftastic! Ознакомьтесь с нашими планами

3 самых популярных способа добавления фавикона на ваш сайт WordPress

Какой бы ни была ваша степень компетентности, есть определенные аспекты дизайна вашего сайта, которые вы, скорее всего, упускаете из виду. Добавление фавикона на ваш веб-сайт WordPress — это один из тех небольших штрихов, которые могут существенно повлиять на отношение к вашему веб-сайту. Ты хоть представляешь, что такое фавикон? Вы максимально используете свои возможности?

Долгое время фавиконкам WordPress уделялось недостаточно внимания. На сегодняшний день фавиконы становятся все более популярными в связи с тенденцией к тому, что все больше и больше компаний переходят в онлайн, а также цифровизацией практически всех сфер нашей жизни. Это неудивительно, учитывая его важность для узнаваемости бренда.

В этой статье мы проведем вас через различные этапы добавления фавикона WordPress на ваш сайт.

Что такое фавикон?

Фавикон — это небольшой рисунок, который появляется слева от заголовка веб-страницы на вкладке браузера. Расположение фавиконки показано на изображении ниже. Термин «фавикон» по сути является сокращением фразы «любимый значок». Фраза относится к файлу, который содержит небольшой значок, относящийся к веб-сайту в целом или к конкретной веб-странице, для которой требуется визуальная поддержка такого типа.

Фавиконы чаще всего находятся в четырех местах:

1. Вкладка в браузере 

У многих людей открыто много вкладок одновременно. В зависимости от их текущих потребностей фавикон сообщает им, какие веб-сайты у них открыты и какие из них им нужно просмотреть.

2. Использование закладок

Закладки Google — это ярлыки для ваших любимых веб-сайтов, которые вы сохранили. Вы можете добраться до них за считанные секунды, где бы вы ни находились. Вы можете сделать их видимыми в верхней панели окна браузера, прямо под адресной строкой или перейти к ним из меню.

3. История просмотра

Это полезная функция, если вы хотите вернуться на недавно посещенный веб-сайт. Если у вас долгая история серфинга или вам нужно найти веб-сайт, созданный несколько дней назад, мгновенно узнаваемый фавикон может быть очень полезен для поиска того, что вы ищете.

4. На мобильных устройствах в результатах поиска Google

Дизайн мобильного поиска Google был недавно изменен, и они начали отображать фавикон веб-сайта в результатах поиска.

Почему вы должны добавить фавикон WordPress на свой сайт?

Возможно, вы спрашиваете себя, зачем нам нужно делать иконки для нашего сайта. И вот почему:

Статья продолжается ниже

• Большинство людей, регулярно пользующихся Интернетом, знакомы с фавиконками. Изображения гораздо легче и быстрее обрабатываются мозгом, чем слова. Пользователи могут быстро найти нужный сайт, взглянув на соответствующий значок при прокрутке списка избранного. Если на сайте нет фавикона, рядом с названием сайта появится пустая страница.

Когда у пользователя много закладок без фавикона, становится значительно сложнее выбрать правильный сайт, потому что все пустые страницы будут выглядеть одинаково.

• Одним из подходов к созданию доверия является использование пользовательского значка значка. Посетители заметят и оценят то, что он представляет, даже если это покажется скромным жестом. Посетители замечают, что новички в WordPress также используют фавикон по умолчанию, поставляемый с их темой. В то время как все предпочтительнее ничего, пользовательский предпочтительнее, чем по умолчанию. Уникальный символ сообщает посетителям, что вы готовы сделать все возможное, чтобы удовлетворить их потребности. Такое профессиональное поведение помогает завоевать доверие клиентов.
• Все мы знаем о важности логотипов. Это визуальная связь, которая связывает нас с фирмой. Фавикон выступает в роли небольшого логотипа, будь то логотип вашей компании или совершенно уникальное графическое изображение. Это помогает вспомнить ваш бренд пользователями Интернета.

В чем разница между фавиконкой и иконкой сайта WordPress?

Иконка сайта упоминается в панели управления WordPress, а другие сервисы упоминают фавиконку вашего сайта. Оба имени используются для описания одного и того же. Значок вашего сайта WordPress, также известный как фавикон, представляет собой небольшой рисунок, который появляется на вкладках и закладках браузера. Его можно настроить с помощью настройщика платформы, плагина или комбинации файлов изображений и пользовательского HTML.

Поскольку фраза «значок сайта» говорит сама за себя, команда WordPress, несомненно, решила использовать ее в панели управления платформы. Но будьте уверены, что ваш инструмент, будь то значок сайта или фавикон, относится к одному и тому же.

Как добавить значок WordPress на ваш сайт вручную

Требуется ли иметь собственный значок? Нет. Однако я считаю, что мы продемонстрировали, что они вносят значительный вклад в общее качество обслуживания посетителей.

Ваш фавикон является важным аспектом вашего бренда в целом. Он должен соответствовать вашему бренду и дополнять вашу маркетинговую стратегию. Ваш логотип служит основой для фавикона. В целом, это модифицированная версия, удовлетворяющая всем требованиям видимости и идентификации.

Если вы начинаете новый бизнес и у вас еще нет логотипа, начните с его разработки, но помните, что вам также понадобится фавикон.

Существует несколько типичных способов создания фавиконки, будь то новый логотип или уже существующий.

Если вы готовы создать фавикон, обновить стандартную версию WordPress или улучшить старый дизайн, выполните следующие действия:

Выберите правильный размер фавиконки для своего веб-сайта учитывать. Вы были бы правы, если бы предположили, что эти файлы будут небольшими.

Хотя размеры небольшие, понимание многочисленных измерений может быть трудным. Это связано с тем, что разные системы предъявляют разные требования к размеру фавикона.

Большинство браузеров принимают файл .ico размером 32 на 32 пикселя, который уже несколько десятилетий является отраслевым стандартом. Однако на практике вы захотите использовать файл .png с разрешением 512 × 512 пикселей. Причина этого в том, что он охватывает практически все, от размера значка сайта Chrome по умолчанию до самого минимума.

Статья продолжается ниже

Между прочим, это также явный совет по серверной части WordPress (подробнее об этом позже). После того, как вы определились с размерами, пришло время подумать о дизайне.

Следуйте рекомендациям, когда дело доходит до дизайна вашего фавикона

Вместо того, чтобы довольствоваться простым вариантом, вы должны приложить усилия для создания уникального фавикона.

При создании фавикона вы можете включить следующее:

• Сократите свой товарный знак до одного или двух цветов, чтобы обеспечить согласованность и видимость.
• Размер фавикона по умолчанию — квадратный. Прозрачный фон требуется, если вы хотите что-то еще. Фавикон должен быть связан с идентичностью вашего бренда, но обычно он слишком мал, чтобы включать в себя целый логотип. Рассмотрите возможность использования узнаваемого компонента вашего логотипа, который можно перенести на фавиконку.
• Небольшой размер фавиконов требует точности в дизайне. Следует избегать чрезмерной детализации, такой как тонкие линии, текстура или затенение. Таким образом, вам нужно сократить свой логотип до его самых основных компонентов и использовать его в качестве фокуса вашего фавикона.
• Используйте контраст, чтобы привлечь внимание к наиболее важным функциям вашего фавикона.

Выберите лучший инструмент для создания значка сайта

Существует специальное онлайн и оффлайн программное обеспечение для создания фавиконов, которое позволяет вам настраивать фавиконы по своему вкусу.

Создайте файл JPG, PNG или GIF, содержащий символ, который вы хотите использовать в качестве значка, с помощью любого приложения для редактирования изображений, такого как Photoshop, Gimp или SnagIt.

Canva, с другой стороны, является более простым выбором для людей с небольшими творческими способностями. Вы можете быстро изменить изображение и сделать его готовым к фавиконам с помощью этого бесплатного веб-сайта с инструментами графического дизайна. Чтобы создать фавиконку, подходящую для вашего сайта, измените размер логотипа или настройте цвет или прозрачность.

Однако выбор правильного инструмента для создания фавикона полностью зависит от вас.

Если вас устраивает изображение, которое вы хотите использовать в качестве фавиконки, сохраните его в формате png. Теперь ваш значок готов к загрузке на ваш сайт WordPress.

Как добавить значок WordPress на свой сайт с помощью настройщика WordPress

Для начала перейдите в WordPress и войдите в систему

Вам нужно перейти на панель настроек темы с панели управления. Выберите «Внешний вид» > «Настроить» в меню. Это вызовет живой настройщик WordPress с предварительным просмотром домашней страницы вашего сайта. Затем выберите Идентификация сайта.

Статья продолжается ниже

Выберите значок Favicon

Нажмите и загрузите, как обычно, при загрузке мультимедиа WordPress из поля значка «Выбрать сайт». Чтобы повысить доступность, не забудьте использовать соответствующий «альтернативный текст» для символа вашего сайта.

В интерфейсе дважды проверьте свой значок

Наконец, проверьте интерфейс вашего сайта, чтобы определить, правильно ли загружен значок вашего сайта.

Как добавить фавикон WordPress на свой сайт с помощью плагина

С помощью плагина вы можете легко добавить фавикон на свой сайт.

RealFavicon Generator

Фавикон RealFavicon Generator — это бесплатный плагин, который позволяет загружать и создавать фавикон для любого браузера и размера экрана. Плагин предоставляет стилистические рекомендации, а также возможность назначать разные версии фавиконки для разных браузеров и устройств. Эта функция позволяет настроить стиль и качество фавикона, а также брендинг вашего сайта.

Плюсы

• Принимает неквадратные фотографии и предоставляет возможность использовать полупрозрачный фон для их исправления.
• Создавайте фавиконы на основе выбранной вами платформы.
• Убедитесь, что ваш значок работает на всех платформах.

Минусы

• Инструмент для сборки недоступен.

Цена

• Бесплатно

Как добавить фавикон в WordPress с помощью RealFavicon Generator

1. Чтобы создать свой набор фавиконов, перейдите во внешний вид фавикон после активации плагина. Все, что вам нужно сделать, это выбрать или загрузить изображение размером не менее 70×70 пикселей.

2. Выберите свое изображение и нажмите «Создать фавикон». Когда вы нажмете эту кнопку, плагин перенесет вас на веб-сайт RealFaviconGenerator, который отделен от вашего сайта WordPress.
3. Прокрутите вниз, чтобы создать свои значки и HTML-код внизу страницы (см. предыдущий раздел). Real Favicon Generator вернет вас на панель инструментов WordPress, пока он работает.

Ваш значок будет создан и готов к использованию. В интерфейсе плагина вы можете увидеть, как он будет выглядеть на разных устройствах.

Get RealFavicon Generator

Favicon.cc

Favicon.cc позволяет вам проявить творческий подход к своему значку. Вы можете создать фавикон с нуля или использовать существующий логотип в качестве отправной точки. Кроме того, Favicon.cc позволяет вам перемещать свой значок!

Профессионалы

• Создайте свою собственную иконку с изображениями различных форматов — JPG, JPEG, GIF, PNG, BMP, ICO и CUR форматы изображений 
• Создайте свой собственный значок с нуля.

Минусы

• Вы должны опубликовать значок под открытой лицензией, чтобы получить код HTML.

Цена

• Бесплатно

Get Favicon.cc

Logaster

Все, что вам нужно сделать, это ввести название вашей компании и выбрать из множества готовых, но настраиваемых тем.

Хотя вы можете делать скромные логотипы бесплатно, вам необходимо перейти на премиум-план, чтобы получить доступ к другим форматам изображений и инструментам редактирования.

Pros

• Используйте готовые шаблоны для быстрого создания фавикона.
• В зависимости от вашего платного плана вы можете использовать свой веб-сайт и печатать логотипы на баннерах в социальных сетях, дизайне канцелярских принадлежностей и брендбуках.
• Создайте бесплатную учетную запись, чтобы сохранить свой логотип и обновлять его на ходу.

Минусы

• Чтобы использовать все их функции, вам необходимо перейти на премиум-подписку.
• Вы можете загружать только изображения PNG небольшого размера с бесплатным планом.

Цена

• Премиум-планы Logaster стоят от 5,99 до 18,99 долларов в месяц.

Получить Logaster

Что произойдет, если я отключу плагин RealFaviconGenerator или полностью его удалю?

Ваш значок WordPress будет удален, если вы деактивируете плагин RealFaviconGenerator. Однако, если вы не удалили плагин, просто его повторная активация вернет ваш значок в прежнее состояние.

Символ вашего сайта будет навсегда удален с вашего сайта, если вы удалите плагин. Это означает, что если вы хотите сделать еще один, вам придется повторно оптимизировать исходное изображение для множества форматов.

Это одно из преимуществ использования плагина для создания фавикона WordPress. Вручную добавляя соответствующий HTML-код и файлы на свой веб-сайт после их создания на сайте RFG, вы исключаете свою зависимость от любых сторонних сервисов.

Как добавить фавикон через FTP 

Если на вашем хосте есть cPanel, вы можете добавить фавикон на свой сайт WordPress с помощью протокола передачи файлов (FTP) или диспетчера файлов, если хотите делать что-то вручную.

1. Используйте программу FTP или файловый менеджер в cPanel вашего хостинга для доступа к файлам вашего сайта.
2. Найдите и загрузите изображение в корневой каталог вашего веб-сайта.

Корневой каталог (иногда называемый корневой папкой) — это основная папка, в которой хранятся ваши файлы WordPress (обычно это public_html). Возьмите код, который RealFaviconGenerator дал вам ранее, и выполните одно из следующих действий:

• Чтобы добавить его в заголовок вашей темы, используйте плагин, например Insert Headers and Footers.
• Изменив файл header.php вашей темы, вставьте его прямо в раздел head> вашей темы.

3. Вставить верхние и нижние колонтитулы должны быть установлены и активированы. Затем перейдите к «Вставить верхние и нижние колонтитулы в настройках» и введите следующий код в «Сценарии» в разделе «Заголовок».
4. Затем сохраните изменения. Вот вы и закончили!

Завершаем!

Если вы новичок в Интернете, возможно, вы впервые задумываетесь о своем фавиконе. Фавиконы — это одна из тех второстепенных особенностей дизайна, которые оказывают огромное влияние на восприятие веб-сайта.