Как просто добавить фавикон на сайт WordPress. 3 способа

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

Создание favicon

Для начала нужно создать картинку, которая будет установлена в качестве favicon. Официальная документация WordPress рекомендует делать картинку размером не менее 512×512 пикселей.

Что касается расширения файла, то в зависимости от метода добавления favicon, понадобятся разные форматы файлов. Например, WordPress по умолчанию не разрешает загружать файлы расширения .svg или .ico. Поэтому для добавления иконки через админку понадобится .png файл иконки.

Я рекомендую создать иконку в формате .svg, а потом воспользоваться генератором, который создаст иконки различных форматов. В качестве генератора favicon будем использовать сервис favycon.vercel.app.

Зайдите на сервис favycon.vercel.app и загрузите картинку.

Поставьте галочку PWA compatible, чтобы сгенерировать картинку большого размера (512×512). Нажмите Generate Favicon.

Когда процесс генерации будет закончен, скачайте архив с иконками.

Теперь у нас есть необходимые файлы favicon. Можно приступать к установке фавикон на сайт WordPress.

Способ 1.

Установить фавикон через админку

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

1. Зайдите в админку сайта и откройте раздел Внешний вид > Настроить. Откроется Customizer WordPress.

2. Откройте раздел Свойства сайта. Нас интересует настройка Иконка сайта.

3. Нажмите на Выберите значок сайта и во всплывающем окне загрузите изображение favicon размером не менее 512×512 пикселей.

4. Отметьте загруженную картинку и нажмите Выбрать.

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

5. Когда изображение будет обрезано и выбрано, в настройке Иконка сайта появится предпросмотр favicon.

6. Favicon установлен, теперь нужно сохранить изменения. Нажмите кнопку Опубликовать.

• Готово! Можете зайти на сайт и проверить favicon.

Этот вариант установки favicon автоматически создает 4 размера иконки для различных устройств и устанавливает их в коде сайта. Можете открыть исходный код сайта Ctrl + U, чтобы увидеть результат.

UPD.

Начиная с версии WordPress 6.5 можно установить favicon в разделе Настройки > Общие.

Чтобы добавить фавикон через раздел Настройки, выполните шаги 2-5 указанные выше и сохраните изменения кнопкой Сохранить изменения.

Способ 2.

Добавить фавикон с помощью плагина

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

В примере будем использовать плагин Favicon by RealFaviconGenerator. Это один из самых популярных плагинов для установки favicon на WordPress. Он работает с популярным сервисом для создания favicon realfavicongenerator.net.

1. Установите плагин на сайт.

2. Откройте раздел Внешний вид > Favicon.

3. Нажмите кнопку Выберите из медиа-библиотеки. Откроется всплывающее окно для загрузки иконки. Если иконка уже загружена, выберите ее.

5. Нажмите кнопку Создать favicon. Произойдет редирект на сайт realfavicongenerator.net. На этой странице предлагается выполнить настройки favicon. Например, можно добавить иконке фон. Так же настраивается вид иконки для разных устройств.

6. После всех настроек нажмите кнопку Generate and install favicon. Начнется создание favicon. Не закрывайте окно браузера.
7. Когда процесс создания закончится, вас перекинет обратно в админку и появится сообщение, что процесс завершен.

• Фавикон установлен!

Для того чтобы favicon всегда был доступен, плагин должен быть активен. Если после создания favicon вы захотите удалить или отключить плагин, то фавикон пропадет!

Способ 3.

Изменить favicon вручную через код

Хотя два предыдущих способа достаточно удобны, для полноты рассмотрим способ ручного добавления favicon на сайт WordPress.

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

1. Откройте в FTP-менеджере корневую папку сайта и загрузите иконку.

2. Зайдите в папку с текущим шаблоном (wp-content/themes/ВАША-ТЕМА) и откройте файл functions.php.
3. В самом низу добавьте код:

add_action('wp_head', 'add_favicon_site');

function add_favicon_site() {
   $favicon_url = home_url('favicon.ico');
   printf('<link rel="icon" href="%s" type="image/x-icon">', $favicon_url);
}

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

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

Для .svg

function add_favicon_site() {
   $favicon_url = home_url('favicon.svg');
   printf('<link rel="icon" href="%s" type="image/svg+xml">', $favicon_url);
}

Для .png

function add_favicon_site() {
   $favicon_url = home_url('favicon.png');
   printf('<link rel="icon" href="%s" type="image/png">', $favicon_url);

Для .jpg

function add_favicon_site() {
   $favicon_url = home_url('favicon.jpg');
   printf('<link rel="icon" href="%s" type="image/jpeg">', $favicon_url);

Где лежит иконка на сайте

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

Когда устанавливали фавикон через настройки в админке или плагин, то загрузка файла происходила через Библиотеку файлов. Все файлы медиатеки загружаются в wp-content/uploads/. Дальнейший путь файла генерируется в зависимости от даты загрузки файла.

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

Дополнительно

Обновление favicon в Яндексе

После того, как favicon установлен, необходимо сообщить об этом Яндексу, чтобы иконка обновилась в поисковой выдаче. Период обновления базы фавикон – до 2 недель. Для ускорения обновления нужно отправить страницу с новой иконкой на переобход.

Зайдите в Вебмастер Яндекс. Откройте раздел Индексирование > Переобход страниц.

В поле ввода введите адрес главной страницы сайта и нажмите Отправить.

Согласно официальной документации Яндекса, в таком случае фавикон обновится в течение 3 дней.