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

post thumbnail

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

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

Независимо от того, у вас старая (редактор темы) или новая тема (редактор сайта), вы добавляете фавикон через админку или вручную в код, в любом случае в результате внутри тега head будет следующее:

<link rel="icon" href="http://yoursite.test/wp-content/uploads/2023/01/cropped-logo-agency-32x32.png" sizes="32x32">

<link rel="icon" href="http://yoursite.test/wp-content/uploads/2023/01/cropped-logo-agency-192x192.png" sizes="192x192">

<link rel="apple-touch-icon" href="http://yoursite.test/wp-content/uploads/2023/01/cropped-logo-agency-180x180.png">

<meta name="msapplication-TileImage" content="http://yoursite.test/wp-content/uploads/2023/01/cropped-logo-agency-270x270.png">

Если вы добавляете фавикон вручную или же если сайт не на WP, тогда сохраните картинку в размерах 32×32, 180×180, 192×192, 270×270 пикселей, загрузите и укажите правильный путь к изображению. 

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

А теперь покажем, как добавить фавикон через админку WP.

Как добавить favicon через админ-панель WordPress-сайта

WordPress позволяет решить вопрос с фавиконом с помощью одного изображения размером 512×512 px.

Добавляется фавикон на этой странице в разделе «Site Identity» — http://yoursite.test/wp-admin/customize.php, где yoursite.test — ваш домен.

В правом боковом меню выберите «Site Identity».

Фавикон на WordPress | Wiki HostPro

В разделе «Site Icon» вы можете выбрать и добавить ваше изображение, будущий фавикон.

Как добавить фавикон на WordPress | Wiki HostPro

Как добавить фавикон на WordPress | Wiki HostPro

В режиме предпросмотра вы можете увидеть, как будет выглядеть ваш фавикон во вкладке. Если все хорошо, сохраняем изменения и публикуем – жмем кнопку «Publish».

Как добавить фавикон на WordPress | Wiki HostPro

То, как вы на страницу customize.php попадете, зависит от вашей темы. 

Если используется редактор темы, то вам нужно перейти в раздел «Appearance»«Customize».

Фавиконка на WordPress | Wiki HostPro

В правом боковом меню выберите «Site Identity».

Фавиконка на WordPress | Wiki HostPro

Если у вас тема с редактором сайта (более новые темы), то вам нужно перейти в «Appearance»«Editor».

Фавиконка на WordPress | Wiki HostPro

Кликаем на любой элемент, далее жмем на «Edit template».

Как добавить фавикон на WordPress сайт | Wiki HostPro

Кликаем на лого и на вкладке «Media»«Add media». Загружаем наше лого.

Как добавить фавикон на WordPress сайт | Wiki HostPro

Далее у нас появляются вот такие настройки. Чтобы добавить фавикон, нам нужно перейти по ссылке «Site Icon settings».

Как добавить фавиконку на WordPress сайт | Wiki HostPro

Так мы попадем на нашу страницу, где сможем добавить файл фавикона размером 512×512 пикселей. А WP уже потом сам из этого размера нарежет нужные размеры картинок и одновременно их законектит. 

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

И может потребоваться некоторое время, чтобы он появился во всех браузерах.

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

WordPress Хостинг

LiteSpeed вебсервер | Неограниченная пропускная способность | Защита от DDoS

Комментарии

Возможно, вас заинтересует

Как получить бэкап сайта и восстановить данные?

Как получить бэкап сайта и восстановить данные?

О том, что может привести к потере данных сайта, о нюансах бэкапов и их...

Diana Honcharenko | Обновлено: 15.03.2024

Что такое PIN-код поддержки в HostPro?

Что такое PIN-код поддержки в HostPro?

Когда вы обращаетесь в службу поддержки HostPro, нам может потребоваться подтвердить вашу учетную запись,...

Diana Honcharenko | Обновлено: 14.03.2024

Как установить WP-CLI. Шпаргалка с основными командами

Как установить WP-CLI. Шпаргалка с основными командами

WP-CLI (WP Command Line Interface) – утилита для работы с сайтами на WordPress, которая...

Diana Honcharenko | Обновлено: 23.01.2024

Использование IPv6 для подключения к серверу

Использование IPv6 для подключения к серверу

IPv6 (Internet Protocol version 6) стал важным шагом в развитии сетевых технологий, поскольку обеспечил...

Hostpro Company | Обновлено: 07.12.2023