Как правильно установить favicon для области администратора и сайта на WordPress

Не нужно устанавливать сторонние плагины. Подключение значка можно реализовать вручную через хук wp_head. Добавьте в файл functions.php следующую конструкцию:


function add_site_icon() {
    echo \'<link rel=\"icon\" href=\"\' . get_stylesheet_directory_uri() . \'/favicon.ico\" />\';
}
add_action(\'wp_head\', \'add_site_icon\');

Работает без зависимости от темы. Файл favicon.ico должен находиться в корне активного шаблона. Путь можно изменить, если ресурсы хранятся в другом месте.

Иконка для панели управления задается отдельно. Используйте хук admin_head и аналогичную вставку:


function admin_favicon() {
    echo \'<link rel=\"icon\" href=\"\' . get_stylesheet_directory_uri() . \'/admin-favicon.ico\" />\';
}
add_action(\'admin_head\', \'admin_favicon\');

Внимание! Обычная иконка не подставляется в интерфейс администратора автоматически – нужно прописывать вручную.

Файл для панели управления может быть отличен от общего значка. Это особенно полезно при работе с мультисайтом или кастомной админкой. Нужен чёткий визуальный ориентир? Создавайте разные иконки.

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

С версии 4.3 появилась опция добавления через кастомайзер. Но она не влияет на иконку в панели управления. Ловушка. Разрыв между интерфейсами. Никакого единого источника.

Важно помнить: браузеры кэшируют значок. При замене файла принудительно очистите кэш или измените имя файла.

Что делать при отсутствии поддержки формата .ico? Используйте .png с указанием размеров:


<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/path/to/favicon-32x32.png\">

Нельзя надеяться на автоматизацию. WordPress не предлагает полной универсальности в этих деталях. Нужно руками. Без иллюзий. Только прямое управление.

Поддержка Retina? Отдельный файл 192×192. А ещё можно прописать apple-touch-icon – если есть смысл.

Добавление favicon через настройки темы WordPress

Перейдите в раздел Внешний вид → Настроить. Найдите пункт «Иконка сайта». Не видите? Значит, тема не поддерживает этот функционал. Придется действовать через фильтры или дочернюю тему.

Читайте также:  Эффективное управление большим сообществом на платформе WordPress для успешного взаимодействия и роста

Если пункт доступен – нажмите. Загрузите изображение размером не меньше 512×512 пикселей. Формат – PNG. JPG – допустим, но без прозрачности. SVG – не поддерживается по умолчанию. Это раздражает, но такова специфика ядра.

Важно! Размер менее 512×512 приведёт к нечеткости в закладках и на мобильных экранах.

После загрузки нажмите «Опубликовать». Изменения вступят в силу немедленно. Проверить можно через источник страницы: ищите <link rel=\"icon\" href=\"...\" />.

Не обновилось? Кэш. Очистите браузер и сторонние плагины. Проблема осталась? Используется плагин кэширования – сбросьте и его. Иногда помогает смена темы и возврат обратно.

Раздражает? Понимаю. Некоторые темы, особенно кастомные, игнорируют стандартные хуки WordPress. Тогда вручную:

add_action(\'wp_head\', function() {
echo \'<link rel=\"icon\" href=\"\' . get_stylesheet_directory_uri() . \'/wp-content/uploads/2025/05/favicon.ico\" type=\"image/x-icon\">\';
});

Расположите иконку в папке темы. Не используйте внешние CDN – они блокируются в админке по политике безопасности.

Внимание! Если работаете в мультисайте – потребуется отдельная иконка на каждый поддомен или отдельный фильтр get_site_icon_url.

Проверка – Ctrl+U. Поиск по слову icon. Ищите дубликаты. Бывает, темы вставляют свою иконку поверх той, что вы задали вручную. Удалите хук через remove_action – и порядок.

Установка favicon вручную через файл functions.php и папку темы

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

Внимание! Автоматически ничего не подключается. Нужен прямой вызов через хук wp_head.

Добавьте в functions.php код:


function custom_site_icon() {
  echo \'<link rel=\"icon\" href=\"\' . get_stylesheet_directory_uri() . \'/favicon.ico\" type=\"image/x-icon\">\';
  echo \'<link rel=\"shortcut icon\" href=\"\' . get_stylesheet_directory_uri() . \'/favicon.ico\" type=\"image/x-icon\">\';
}
add_action(\'wp_head\', \'custom_site_icon\');

Проверяйте путь. Если используете дочернюю тему – get_stylesheet_directory_uri(). Если основную – get_template_directory_uri().

  • Размер: 32×32 или 48×48 пикселей. Лучше – многослойный .ico.
  • Формат SVG не всегда корректно отображается в Safari и IE.
  • Не загружайте через медиабиблиотеку. Только физически в папку.

Важно помнить: WordPress может переопределить отображение, если ранее был установлен значок через кастомайзер. Удалите его в панели настроек внешнего вида.

На страницах консоли значок не изменится. Для этого потребуется фильтр admin_head и отдельный вызов. Пример:

Читайте также:  Как добавить конвертер валют в WordPress двумя способами


function admin_custom_icon() {
  echo \'<link rel=\"icon\" href=\"\' . get_stylesheet_directory_uri() . \'/favicon.ico\" type=\"image/x-icon\">\';
}
add_action(\'admin_head\', \'admin_custom_icon\');

Кэш браузера безжалостен. Обновление может не сработать. Пропишите уникальный параметр:


/favicon.ico?v=2

Малейшая опечатка – значок не загрузится. Никаких сообщений, тишина. Проверяйте вручную через DevTools.

Вопрос – зачем через functions.php, если можно просто вставить в header.php? Ответ – контроль. И масштабируемость. Подключение через хук – корректно, безопасно, учитывает child themes и future updates.

Настройка отдельного favicon для панели администратора WordPress

Создайте файл-значок, отличающийся от основного интерфейса. Сохраните его в директории темы или в подкаталоге /assets текущей оболочки.

Далее – хук admin_head. Подключение выполняется через файл functions.php или отдельный модуль:


add_action(\'admin_head\', function() {
    echo \'<link rel=\"icon\" type=\"image/png\" href=\"\' . get_stylesheet_directory_uri() . \'/assets/admin-icon.png\">\';
});

Формат изображения – PNG или ICO. Размер – 32×32. Поддержка SVG в административной части нестабильна, браузеры ведут себя непредсказуемо. Не рискуйте.

Внимание! Не используйте тот же файл, что на фронте. Кэш может помешать увидеть изменения. Очистите его принудительно или проверьте в режиме инкогнито.

Роль пользователя значения не имеет. Эмблема будет одинаковой для всех, у кого есть доступ к интерфейсу управления.

Если используется кастомная тема администрирования – например, через Adminimize или собственный CSS – учтите приоритеты стилей. Иногда link-тег с favicon сбрасывается, если не обернуть в wp_admin_css.


add_action(\'admin_enqueue_scripts\', function() {
    add_action(\'admin_head\', function() {
        echo \'<link rel=\"icon\" type=\"image/png\" href=\"\' . plugin_dir_url(__FILE__) . \'custom/admin-fav.png\">\';
    });
});

Важно помнить: при использовании мультисайта фавикон подгружается глобально. Придётся настраивать через is_network_admin() и is_user_admin() для разделения.

Не пробуйте вставлять напрямую в admin-footer.php ядра – любое обновление уничтожит результат. Только хуки. Только через тему или подключаемый плагин.

Никаких CDN. Даже минимальная задержка – и браузер вернётся к стандартной иконке. Быстродействие критично.

Читайте также:  Лучшие плагины WordPress для подкастеров для удобного создания и продвижения подкастов

Проверка работоспособности – через DevTools, вкладка Network. Убедитесь, что адрес изображения соответствует настройкам. Иначе – снова кэш, снова бой.

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *