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

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

Способ 1. Через настройки WordPress

Самый простой и рекомендуемый способ для большинства сайтов.

Путь в админке:

Внешний вид → Настроить → Свойства сайта → Иконка сайта

Требования к изображению:

• квадратное
• минимум 512×512 px
• формат PNG или JPG

WordPress автоматически создаёт нужные размеры и подключает фавикон во все необходимые места.

Способ 2. Через настройки темы

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

Обычно находится в разделе:

Theme Options → General → Favicon

Минусы способа:

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

Способ 3. Через плагин

Подходит, если нет доступа к теме или кастомайзер отключён.

Обычно фавикон можно добавить через SEO-плагины или специальные плагины для иконок.

Недостатки:

• дополнительная нагрузка
• зависимость от плагина
• лишний функционал ради одной задачи

Способ 4. Ручное подключение через functions.php

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

Сначала загрузите файл фавикона, например:

/wp-content/themes/your-theme/img/favicon.png

Затем подключите его через wp_head:

add_action('wp_head', function () {
    ?>
    <link rel="icon" href="<?php echo get_template_directory_uri(); ?>/img/favicon.png" type="image/png">
    <?php
});

Способ 5. Подключение нескольких фавиконов для разных устройств

Правильный вариант для современных сайтов с поддержкой мобильных устройств.

add_action('wp_head', function () {
    $theme = get_template_directory_uri();
    ?>
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo $theme; ?>/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="<?php echo $theme; ?>/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="<?php echo $theme; ?>/apple-touch-icon.png">
    <?php
});

Рекомендуемые размеры:

• 16×16 — классический фавикон
• 32×32 — современные браузеры
• 180×180 — iOS

Способ 6. Использование site_icon API WordPress

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

add_theme_support('site-icon');

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

Частые проблемы

Фавикон не обновляется

• очисти кеш браузера
• очисти кеш сайта
• проверь Cloudflare или CDN

Отображается старая иконка

• браузеры агрессивно кешируют фавиконы
• измени имя файла

Не отображается на мобильных устройствах

• отсутствует apple-touch-icon

Какой способ выбрать

• обычный сайт — через настройки WordPress
• кастомная тема — ручное подключение через код
• строгие требования — несколько размеров + код
• нет доступа к теме — плагин

Вывод

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