Фавикон – это графический элемент вашего сайта, который появляется на вкладках браузеров и рядом с заголовком в поисковых системах. Установка фавикона крайне важна для повышения заметности сайта в поисковой выдаче и упрощения навигации по вкладкам браузера. Чтобы добавить фавикон на сайт, работающий на WordPress, необходимо загрузить иконку и использовать специальный код. Существует три метода для выполнения этой задачи: через административную панель WordPress, с помощью плагина или вручную добавив код.
1. Добавление через административную панель WordPress: Войдите в администраторскую панель WordPress, перейдите в раздел «Внешний вид» и выберите «Настроить». Затем найдите пункт «Идентификация сайта» или «Фавикон» и загрузите ваше изображение. Не забудьте, что лучше всего использовать изображение формата .ico, .png или .jpg размером 512×512 пикселей.
2. Использование плагина: Если вы предпочитаете использовать плагины, установите и активируйте плагин, такой как «All in One Favicon» или «Custom Favicon». После активации перейдите в настройки плагина и загрузите ваш фавикон. Это может быть удобно, если вам нужно управлять фавиконами на нескольких сайтах.
3. Ручное добавление кода: Если вы хотите более глубокую настройку, вы можете добавить фавикон вручную. Для этого загрузите иконку на сервер в папку вашей темы (например, /wp-content/themes/your-theme/). Затем откройте файл header.php вашей темы и добавьте следующий код в раздел
:<link rel="icon" href="/favicon.ico" type="image/x-icon">Не забудьте заменить «favicon.ico» на имя вашего файла фавикона.
Теперь, в зависимости от выбранного метода, ваш фавикон будет отображаться в браузерах. Также стоит помнить, что обновления кэша могут занять некоторое время, поэтому если иконка не появляется сразу, попробуйте очистить кэш браузера.
Создание favicon
Первым делом необходимо создать изображение, которое будет использоваться в качестве фавикона. Официальная документация WordPress рекомендует готовить изображение размером не менее 512×512 пикселей.
Что касается формата файла, то в зависимости от метода, которым вы будете добавлять фавикон, потребуются разные расширения. Например, WordPress по умолчанию не позволяет загружать файлы с расширениями .svg или .ico. Поэтому, если вы будете добавлять иконку через административную панель, вам понадобится файл с расширением .png.
Рекомендую создать иконку в формате .svg, а затем воспользоваться генератором, который преобразует ее в другие форматы. Для этих целей можно использовать сервис favycon.vercel.app.
Перейдите на сайт favycon.vercel.app и загрузите ваше изображение.
Поставьте отметку на PWA compatible, чтобы получить изображение большого размера (512×512), и нажмите Generate Favicon.
Когда процесс генерации завершится, вы сможете скачать архив с созданными иконками.
Теперь у нас есть все необходимые файлы для установки фавикона на WordPress сайт.
После того как вы скачали архив с фавиконами, распакуйте его и загрузите полученные файлы на ваш сервер. Обычно фавикон добавляется в корневую директорию вашего сайта или в папку с изображениями. Не забудьте проверить настройки темы WordPress: в разделе «Внешний вид» -> «Настроить» вы сможете найти параметр для загрузки фавикона.
Также стоит отметить, что рекомендуются разные фавиконы для различных устройств. Напоминаю, что фавиконы могут отображаться на вкладках браузера, в закладках, а также в приложениях, поэтому убедитесь, что ваша иконка хорошо выглядит в разных размерах. Если у вас есть доступ к дизайнеру, вы можете создать несколько вариантов фавиконов для обеспечения наилучшего качества отображения на различных платформах.
Еще один способ добавить фавикон — это вручную вставить код в файл header.php вашей темы. Для этого используйте следующий код:
<link rel="shortcut icon" href="URL_ВАШЕГО_ФАВИКОНА" type="image/png">
Замените URL_ВАШЕГО_ФАВИКОНА на фактический путь к вашему изображению фавикона. Это может быть полезно, если вам нужно больше контроля над тем, как отображается фавикон на вашем сайте.
Не забывайте периодически обновлять фавикон, чтобы он соответствовал дизайну вашего сайта, особенно если вы меняете логотип или стиль оформления.
Установить фавикон через админку
С версии 4.3 в WordPress добавили удобный функционал, который позволяет установить фавикон прямо через админку всего за несколько кликов.
- Перейдите в административную панель своего сайта и выберите раздел Внешний вид > Настроить. Откроется интерфейс настройки WordPress.
- Выберите раздел “Свойства сайта”. Нам нужно настроить Иконку сайта.
- Нажмите на Выбрать значок сайта и в открывшемся окне загрузите изображение фавикона размером не менее 512×512 пикселей.
- Выберите загруженное изображение и нажмите Выбрать.
Если загруженное изображение не квадратное, появится окно для его обрезки.
- Как только изображение будет обрезано и выбрано, в настройках Иконка сайта появится предпросмотр фавикона.
- Фавикон успешно установлен; теперь необходимо сохранить изменения. Нажмите кнопку Опубликовать.
- Готово! Теперь вы можете перейти на сайт и убедиться, что фавикон отображается.
Этот способ установки фавикона автоматически создаёт 4 различных размера иконок для разных устройств и добавляет их в код сайта. Вы можете просмотреть исходный код сайта, нажав Ctrl + U, чтобы убедиться в этом.
UPD.
С версии WordPress 6.5 появилась возможность устанавливать фавикон через раздел Настройки > Общие.
Чтобы добавить фавикон через раздел Настройки, выполните шаги 2-5, указанные выше, и сохраните изменения, нажав кнопку Сохранить изменения.
Добавить фавикон с помощью плагина
Хотя первый способ очень удобен, некоторые темы WordPress могут не поддерживать функционал Customizer. В таких случаях можно воспользоваться альтернативным методом.
В данном примере мы будем использовать плагин Favicon by RealFaviconGenerator. Это один из самых распространенных плагинов для установки фавикона в WordPress, который взаимодействует с хорошо известным сервисом realfavicongenerator.net.
- Установите плагин на сайт.
- Перейдите в раздел Внешний вид > Favicon.
- Нажмите кнопку Выбрать из медиа-библиотеки. Появится всплывающее окно для загрузки иконки. Если иконка уже загружена, просто выберите её.
- Кликните по кнопке Создать фавикон. У вас откроется сайт realfavicongenerator.net. Здесь вы сможете настроить ваш фавикон. Например, можете добавить фон для иконки, а также настроить ее внешний вид для различных устройств.
- После внесения всех настроек нажмите на кнопку Generate and install favicon. Запустится процесс создания фавикона. Не закрывайте браузер.
- Когда процесс завершится, вы будете возвращены в админку, и появится уведомление об успешном завершении процесса.
- Фавикон установлен!
Для того, чтобы фавикон всегда оставался доступным, плагин должен оставаться активным. Если после установки фavicon вы решите отключить или удалить плагин, фавикон исчезнет!
Изменить favicon вручную через код
Несмотря на то что два предыдущих метода достаточно удобны, давайте рассмотрим и способ ручного добавления фавикона на сайт WordPress.
Сначала нужно загрузить фавикон в корневую папку вашего сайта, поскольку обычно фавиконы размещаются именно там.
- Откройте корневую папку вашего сайта с помощью FTP-менеджера и загрузите туда вашу иконку.
- Перейдите в директорию текущей темы (wp-content/themes/ВАША-ТЕМА) и откройте файл functions.php.
- Добавьте следующий код в самый низ файла:
add_action('wp_head', 'add_favicon_site'); function add_favicon_site() { $favicon_url = home_url('favicon.ico'); printf('', $favicon_url); }Если тема вашего сайта регулярно обновляется, важно вносить изменения в дочерней теме.
Также стоит учитывать, что в зависимости от формата вашего фавикона, код может немного изменяться.
Для .svg
function add_favicon_site() { $favicon_url = home_url('favicon.svg'); printf('', $favicon_url); }Для .png
function add_favicon_site() { $favicon_url = home_url('favicon.png'); printf('', $favicon_url); }Для .jpg
function add_favicon_site() { $favicon_url = home_url('favicon.jpg'); printf('', $favicon_url); }Где лежит иконка на сайте
Также полезно знать, где фактически хранится файл фавикона в WordPress. При ручной установке мы загрузили иконку в корень сайта. Если вам потребуется изменить фавикон, ищите файл там.
Если фавикон добавлялся через настройки в админке или с помощью плагина, файл загружался через Медиа библиотеку. Все файлы, загруженные в медиатеку, помещаются в директорию wp-content/uploads/. Дальнейшая структура пути к файлам формируется в зависимости от даты загрузки.
Чтобы точно узнать, где находится фавикон, зайдите в раздел Медиафайлы, найдите установленные фавиконы и кликните по ним. Во всплывающем окне вы увидите ссылку на иконку сайта.
Обновление favicon в Яндексе
После установки фавикона важно сообщить Яндексу о нововведении, чтобы иконка обновилась в поисковой выдаче. Период обновления базы фавиков может достигать 2 недель. Для ускорения этого процесса необходимо отправить страницу с новым фавиконом на переобход.
Перейдите на сайт Вебмастера Яндекс. Откройте раздел Индексирование > Переобход страниц.
В поле ввода введите адрес главной страницы вашего сайта и нажмите Отправить.
Согласно официальной информации Яндекса, обновление фавикона произойдет в течение 3 дней.