📌 Как добавить favicon в WordPress: 3 способа для любого сайта

Сайт без favicon выглядит незаконченным. Посетитель открывает пять вкладок, ищет вашу среди них, и не находит, потому что вместо иконки там серая заглушка браузера. Мелочь? Да. Но именно такие мелочи формируют впечатление: о вас позаботились или собрали на скорую руку.

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

Ниже, три работающих способа добавить favicon в WordPress: через кастомайзер (самый простой), вручную через код и через плагин. Плюс разбор требований к размеру и формату, чтобы иконка отображалась везде: во вкладках, закладках, на iPhone и Android.

💡 Быстрый обзор:

• Что такое favicon и зачем он сайту: узнаваемость бренда, доверие, навигация по вкладкам
• Требования к файлу: квадратное изображение стандартного размера, формат PNG, ICO или SVG
• Способ 1: загрузка через «Сайт» → кастомайзер (2 минуты, без плагинов)
• Способ 2: ручная вставка через functions.php или header.php (для тех, кто правит тему)
• Способ 3: установка плагина Site Favicon (если кастомайзер недоступен)
• Что делать, если favicon не отображается: кеш браузера, старый ICO, CDN

Зачем сайту favicon и какие к нему требования

Favicon (сокращение от favorite icon) — это маленькая иконка, которую браузер показывает слева от названия страницы во вкладке, в закладках и в истории посещений. Пользователь с десятком открытых вкладок находит ваш сайт глазами за долю секунды, именно по favicon, а не по тексту заголовка.

Вторая функция менее очевидна: favicon участвует в формировании микробренда. Когда кто-то сохраняет страницу в закладки или добавляет сайт на домашний экран смартфона, туда попадает именно site icon. Без него WordPress подставляет либо серую заглушку, либо скриншот страницы, выглядит неопрятно.

Требования к размеру и формату

С 2014 года WordPress поддерживает загрузку site icon через кастомайзер. Требования стандартные:

• Размер: 512×512 пикселей. WordPress автоматически генерирует уменьшенные копии для браузеров (32×32, 180×180 для Apple touch icon, 192×192 и 512×512 для Android). Загружать отдельные файлы под каждое разрешение не нужно, ядро делает это само. Подробнее о требованиях к site icon, в официальной документации WordPress.
• Формат: PNG (рекомендуется), ICO или SVG. PNG даёт наилучшее качество на retina-экранах. ICO, legacy-формат для старых браузеров, на практике в 2026 году без него обходятся.
• Что использовать как favicon: логотип, узнаваемый в квадрате и читаемый при сильном уменьшении. Текст из трёх-четырёх букв на цветном фоне работает лучше, чем сложная иллюстрация.

Главное правило при подготовке файла: квадрат. Неквадратное изображение WordPress обрежет принудительно, и результат может вас не устроить.

Как добавить favicon в WordPress: 3 способа

Способ 1: через кастомайзер, проще всего

Этот метод работает на любой современной версии WordPress с классической темой. Для блочных тем (FSE) маршрут чуть отличается, покажу оба.

Классическая тема (Customizer):

• Зайдите в админку WordPress.
• Перейдите в Внешний вид → Настроить (Appearance → Customize).
• Выберите раздел Сведения о сайте (Site Identity). В некоторых темах он называется «Информация о сайте» или «Site Icon & Logo».
• Найдите поле Иконка сайта (Site Icon). Нажмите «Выбрать иконку сайта» и загрузите квадратный PNG, WordPress ожидает изображение минимум 512×512, согласно документации.
• При необходимости обрежьте изображение встроенным редактором и нажмите «Сохранить изменения».

Блочная тема (Site Editor, WordPress 5.9+):

Если тема поддерживает Full Site Editing, кастомайзер заменён редактором сайта. Зайдите в Внешний вид → Редактор, откройте панель Стили или Настройки, найдите раздел Иконка сайта и загрузите ту же квадратную картинку. Логика та же, интерфейс другой.

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

Способ 2: вручную через functions.php

Вариант для тех, кто правит дочернюю тему и не хочет полагаться на кастомайзер. Добавьте следующий код в functions.php дочерней темы или через плагин Code Snippets:

1
/**
2
 * Подключаем favicon через wp_head.
3
 * Файл favicon.png должен лежать в корне дочерней темы.
4
 */
5
add_action( 'wp_head', 'sdstudio_add_favicon' );
6
 
7
function sdstudio_add_favicon() {
8
    $favicon_url = get_stylesheet_directory_uri() . '/favicon.png';
9
    echo '<link rel="icon" href="' . esc_url( $favicon_url ) . '" type="image/png" sizes="512x512">' . "\n";
10
    echo '<link rel="apple-touch-icon" href="' . esc_url( $favicon_url ) . '" sizes="180x180">' . "\n";
11
}

Что здесь происходит: хук wp_head вставляет два тега <link> в <head> каждой страницы. Первый, стандартный favicon для браузеров, второй, Apple touch icon для устройств Apple (iPhone, iPad). Функция get_stylesheet_directory_uri() отдаёт URL дочерней темы, favicon нужно положить туда же, в корень папки с темой.

Переименовывать файл в favicon.ico не обязательно. WordPress нормально работает с PNG, а браузеры понимают его без проблем. Главное, квадрат стандартного размера.

Если вы подключаете favicon не из темы, а из корня сайта, замените get_stylesheet_directory_uri() на home_url() и скорректируйте путь:

1
$favicon_url = home_url( '/favicon.png' );

После добавления кода загрузите favicon.png в соответствующую папку через FTP или файловый менеджер хостинга. Проверьте результат в приватном окне браузера.

Способ 3: через плагин

Если кастомайзер по какой-то причине не даёт загрузить site icon (бывает в кастомных и устаревших темах), поставьте плагин Site Favicon, минималистичный и бесплатный. Устанавливается стандартно: Плагины → Добавить новый → поиск «Site Favicon» → Установить → Активировать. После активации в админке появляется пункт Настройки → Site Favicon, где можно загрузить иконку и сразу увидеть превью.

Другой вариант, All in One SEO. Если SEO-плагин уже стоит на сайте, загляните в его настройки: там есть секция загрузки site icon, которая делает то же самое без дополнительного плагина. Но ставить тяжёлый SEO-комбайн только ради favicon не советуем, Site Favicon справляется с задачей, весит меньше и не добавляет лишней нагрузки.

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

На видео выше, пошаговая демонстрация всех трёх способов на живом сайте WordPress. Если после прочтения остались сомнения по какому-то из шагов, посмотрите ролик: на 1:15 показывают загрузку через кастомайзер, на 3:40, ручной способ.

⁉️🤔 Частые вопросы

Почему favicon не отображается после загрузки через кастомайзер?

В большинстве случаев проблема в кеше браузера. Favicon кешируется агрессивно, браузер может держать старую версию несколько дней. Откройте сайт в режиме инкогнито (Ctrl+Shift+N в Chrome): если иконка появилась, дело именно в кеше. Очистите кеш браузера или дождитесь его естественного сброса. Вторая по частоте причина, favicon загружен в формате ICO, а браузер ожидает PNG. WordPress с версии 4.3 отдаёт предпочтение PNG, загрузите квадрат стандартного размера в PNG, как того требует документация, и проблема уйдёт.

Можно ли использовать логотип в качестве favicon?

Можно и нужно, это стандартная практика. Но не каждый логотип годится. Проверьте, как ваш логотип выглядит при масштабе в мелком размере: если детали сливаются в нечитаемое пятно, сделайте упрощённую версию. Хороший пример, значок WordPress (W на синем фоне): узнаваем даже в крошечном размере. Горизонтальный логотип с текстом из десяти букв при сильном уменьшении превратится в серую полоску, для favicon возьмите только знак без текста.

Почему WordPress требует favicon именно такого размера?

Для WordPress, да. Ядро принимает именно этот размер как исходный и генерирует все необходимые уменьшенные копии автоматически, официальная документация подтверждает минимальное требование 512 px по каждой стороне. Если загрузить favicon меньшего размера (например, 128×128), масштабирование до 512 пикселей произойдёт с потерей качества, а на retina-экранах иконка будет выглядеть размытой. Исключение, если подключаете favicon вручную через код (способ 2): тогда можно собрать несколько размеров и прописать их отдельными тегами <link>.

Как убрать или заменить favicon?

Замена, через тот же интерфейс, где загружали: кастомайзер → Сведения о сайте → Иконка сайта → «Удалить» и затем загрузить новую. Старая иконка некоторое время будет висеть в кеше браузера (до нескольких дней) — это нормально. Полное удаление, кнопка «Удалить» в том же интерфейсе, после чего WordPress перестанет отдавать теги favicon, и браузер вернётся к серой заглушке.

Влияет ли favicon на SEO?

Напрямую, нет. Google не использует наличие или отсутствие favicon как фактор ранжирования. Косвенно, да: сайт с favicon выглядит профессиональнее, пользователи реже его путают с конкурентами при навигации по вкладкам. Это снижает показатель pogo-sticking (возврат к поисковой выдаче), что поисковики учитывают опосредованно. Плюс Google иногда показывает favicon в результатах мобильного поиска, иконка делает сниппет заметнее визуально, что повышает CTR.

Какой способ выбрать: короткий алгоритм

Если у вас стандартная тема с кастомайзером, используйте способ 1. Это два клика, и WordPress берёт на себя всю техническую часть: ресайз, генерацию тегов, поддержку Apple и Android. Девять из десяти сайтов на WordPress закрывают вопрос favicon именно так.

Кастомная тема без поддержки site icon? Подключите через functions.php (способ 2), код из трёх строк даёт полный контроль над размерами и форматом. Плагин (способ 3) оставьте на случай, когда ни кастомайзер, ни правка темы недоступны, например, если сайт на мультисайтовой установке с ограниченными правами или вы работаете с конструктором, который не даёт доступа к functions.php.

И главное: после загрузки favicon проверьте сайт в режиме инкогнито нового браузера. Не полагайтесь на обычное окно, там мог закешироваться старый вариант или сама заглушка. Увидели иконку во вкладке? Готово.