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

Добавление фавикона в WordPress занимает около 30 секунд: перейдите в Внешний вид → Настроить → Свойства сайта → Иконка сайта, загрузите PNG-изображение 512x512 и нажмите «Опубликовать». Готово.

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

Быстрый способ: Настройщик WordPress

Этот способ работает на любом сайте WordPress версии 4.3 или новее (выпущена в 2015 году). Если у вас хоть сколько-нибудь современная версия, эта опция доступна.

Шаг 1: Откройте Настройщик

Перейдите в Внешний вид → Настроить в панели администратора WordPress
Или нажмите «Настроить» в админ-панели при просмотре сайта

Шаг 2: Найдите «Свойства сайта»

Нажмите Свойства сайта в боковой панели Настройщика
Прокрутите вниз до Иконка сайта

Шаг 3: Загрузите изображение

Нажмите Выбрать иконку сайта
Загрузите PNG-изображение размером не менее 512 x 512 пикселей
WordPress автоматически создаст все нужные уменьшенные размеры (включая 32x32, 180x180 и другие)
Обрежьте при необходимости, затем нажмите Опубликовать

Вот и всё. WordPress сделает остальное — создаст теги <link> для фавиконов браузера, иконок Apple Touch и даже изображения для плиток Windows.

Способ через код: ручное добавление фавикона

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

Вариант А: Файлы в директории темы

Загрузите файлы фавикона в корневую директорию темы, затем добавьте это в functions.php вашей темы:

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

Вариант Б: SVG-фавикон

SVG-фавиконы идеально масштабируются и поддерживают тёмную тему. Добавьте это в functions.php:

function svg_favicon() {
    $favicon_url = get_stylesheet_directory_uri() . '/favicon.svg';
    ?>
    <link rel="icon" type="image/svg+xml" href="<?php echo $favicon_url; ?>">
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon-32x32.png">
    <?php
}
add_action('wp_head', 'svg_favicon');

PNG-запасной вариант нужен для Safari, который до сих пор не полностью поддерживает SVG-фавиконы.

Использование плагина (если предпочитаете)

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

Разные фавиконы для разных страниц или записей
A/B-тестирование разных иконок
Мультисайт с отдельными фавиконами для каждого подсайта

Популярные варианты включают All in One Favicon и Flavor (ранее flavicon). Но повторюсь — попробуйте сначала Настройщик.

Блочные темы WordPress (полное редактирование сайта)

Если вы используете блочную тему, например Twenty Twenty-Four или Twenty Twenty-Five, процесс немного отличается:

Перейдите в Внешний вид → Редактор
Нажмите Стили (иконка полукруга)
Перейдите к глобальным стилям сайта
Настройка иконки сайта по-прежнему находится в Внешний вид → Настроить → Свойства сайта

Блочные темы по-прежнему используют тот же Настройщик для фавикона. WordPress ещё не перенёс эту функцию в Редактор сайта.

Файл	Размер	Назначение
`favicon.ico`	16x16, 32x32	Поддержка старых браузеров
`favicon-32x32.png`	32x32	Современные браузеры
`apple-touch-icon.png`	180x180	Домашний экран iOS
`android-chrome-192x192.png`	192x192	Домашний экран Android
`android-chrome-512x512.png`	512x512	Заставка Android
`favicon.svg`	Масштабируемый	Современные браузеры, тёмная тема

Устранение неполадок: фавикон не отображается

Очистите всё

Проблемы с фавиконом в WordPress почти всегда связаны с кэшированием:

Кэш браузера: принудительное обновление Ctrl+Shift+R (Windows) или Cmd+Shift+R (Mac)
Кэш WordPress: если вы используете WP Super Cache, W3 Total Cache или LiteSpeed Cache — очистите кэш
Кэш CDN: Cloudflare, Fastly или другой сервис — очистите URL фавикона
Попробуйте инкогнито: открывает чистую сессию без кэшированных файлов

Проверьте конфликты плагинов

Некоторые SEO-плагины и темы-фреймворки добавляют свои собственные теги фавикона. Если вы видите дублирующиеся теги <link rel="icon"> в исходном коде:

Просмотрите исходный код страницы (Ctrl+U)
Поищите «icon» или «favicon»
Если есть дубликаты, проверьте, какой плагин их добавляет
Отключите функцию фавикона в плагине или удалите ваш ручной код

Переопределение темой

Некоторые темы (особенно премиальные) имеют собственные настройки фавикона, которые переопределяют Настройщик. Проверьте:

Панель настроек темы на наличие настройки фавикона
Файл header.php темы на наличие жёстко прописанных тегов <link rel="icon">
Документацию темы по настройке фавикона

Устранение неполадок: Google показывает неправильный фавикон

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

Требования Google к фавиконам

У Google есть конкретные правила для отображения фавиконов в поисковой выдаче:

Должен быть кратен 48 пикселям (48x48, 96x96, 144x144)
Должен быть квадратным
Не должен содержать неприемлемый контент
Должен представлять сайт (а не быть стандартной иконкой)

Ускорьте обновление

Убедитесь, что фавикон доступен на сайте
Откройте Google Search Console
Используйте Проверку URL для главной страницы
Нажмите Запросить индексацию
Подождите — обычно это занимает 1-2 недели

Устранение неполадок: фавикон отображается на компьютере, но не на мобильных

Мобильные браузеры более требовательны к форматам фавиконов:

iOS Safari: нужен apple-touch-icon (180x180) — обычный фавикон не отображается на домашнем экране
Android Chrome: ищет manifest.json с указанием иконок для домашнего экрана
PWA: нужны иконки 192x192 и 512x512, указанные в манифесте веб-приложения

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

Лучшие практики

Начните с большого: загружайте минимум 512x512 — WordPress уменьшает, но не увеличивает
Используйте PNG: прозрачный фон работает лучше, чем JPEG
Будьте проще: ваш фавикон крошечный — сложные логотипы не читаются при 16x16
Тестируйте в разных браузерах: используйте Favicon.im для проверки настройки
Версионируйте фавикон: добавляйте ?v=2 к URL при обновлении для сброса кэша

Часто задаваемые вопросы

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

Перейдите в Внешний вид → Настроить → Свойства сайта → Иконка сайта, загрузите PNG-изображение 512x512 и нажмите «Опубликовать». WordPress автоматически создаст все необходимые размеры.

Какой размер фавикона нужен для WordPress?

Загружайте минимум 512 x 512 пикселей. WordPress автоматически создаст размеры 32x32, 180x180 и другие. Для поисковой выдачи Google используйте размеры, кратные 48 пикселям.

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

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

Можно ли использовать SVG-фавикон в WordPress?

WordPress по умолчанию не поддерживает загрузку SVG из соображений безопасности. Можно добавить поддержку SVG-фавикона вручную через код functions.php или использовать плагин, включающий загрузку SVG.

Как добавить разные фавиконы для светлой и тёмной темы в WordPress?

Используйте SVG-фавикон со встроенными CSS-медиазапросами для prefers-color-scheme. Добавьте SVG-файл вручную через functions.php, так как Настройщик поддерживает только форматы PNG/ICO.

Ссылки

Site Icon - WordPress Developer Resources - Официальная документация WordPress
Define a favicon to show in search results - Google Search Central
Favicon.im - Инструмент для тестирования и проверки фавиконов