Favicon — это маленькая иконка сайта, которая отображается в вкладках браузера, закладках и мобильных устройствах. Обычно favicon статичен, но иногда возникает задача сделать его динамическим, например, менять иконку в зависимости от категории, времени суток или состояния сайта. В этой статье разберем, как реализовать динамический favicon в WordPress с помощью кода и плагинов.
Почему нужен динамический favicon в WordPress
Стандартный favicon загружается один раз и не меняется. Но динамический favicon позволяет:
- Выделиться среди конкурентов, сделав сайт более интерактивным;
- Отображать важные статусы сайта (например, уведомления, события);
- Адаптировать иконку под время суток (дневной/ночной режим);
- Персонализировать опыт пользователя, показывая разные иконки для разных категорий или разделов.
Реализация динамического favicon требует понимания, как браузеры загружают иконки, и как WordPress подключает favicon.
Как WordPress подключает favicon по умолчанию
В WordPress начиная с версии 4.3 появилась возможность через кастомайзер задавать favicon (Site Icon). Он сохраняется в опции site_icon и выводится в <head> темы автоматически.
Код, который выводит favicon, примерно такой:
if ( function_exists( 'has_site_icon' ) && has_site_icon() ) {
wp_site_icon();
}Чтобы сделать favicon динамическим, нужно вмешаться в этот процесс и заменить стандартный favicon на свой, меняющийся по условию.
Реализация динамического favicon через хук wp_head
Самый простой способ — убрать стандартный favicon и вставить свой тег с иконкой непосредственно в <head>. Для этого используем хук wp_head.
Пример функции, которая выводит динамический favicon в зависимости от времени суток:
function wptips_dynamic_favicon() {
$hour = date('H');
if ( $hour >= 7 && $hour < 19 ) {
$favicon_url = get_template_directory_uri() . '/favicons/day.ico';
} else {
$favicon_url = get_template_directory_uri() . '/favicons/night.ico';
}
echo '<link rel="icon" href="' . esc_url( $favicon_url ) . '" type="image/x-icon" />';
}
add_action('wp_head', 'wptips_dynamic_favicon', 1);Обратите внимание, что функцию нужно подключать с приоритетом 1, чтобы она выводилась раньше стандартного favicon. Также желательно удалить стандартный favicon, если он уже установлен через кастомайзер, чтобы избежать конфликтов.
Удаление стандартного favicon из кастомайзера
Чтобы отключить вывод стандартного favicon, можно воспользоваться фильтром get_site_icon_url. Если вернуть пустую строку, WordPress не будет выводить стандартный favicon.
function wptips_disable_standard_favicon( $url ) {
return '';
}
add_filter( 'get_site_icon_url', 'wptips_disable_standard_favicon' );Таким образом, мы полностью контролируем favicon и можем выводить любой, динамически меняя по логике.
Динамический favicon на основе категории записи
Еще один популярный кейс — менять favicon в зависимости от категории текущего поста. Например, для новостей показывать одну иконку, для блога — другую.
function wptips_favicon_by_category() {
if ( is_singular() ) {
$categories = get_the_category();
if ( ! empty( $categories ) ) {
$cat_slug = $categories[0]->slug;
switch ( $cat_slug ) {
case 'news':
$favicon_url = get_template_directory_uri() . '/favicons/news.ico';
break;
case 'blog':
$favicon_url = get_template_directory_uri() . '/favicons/blog.ico';
break;
default:
$favicon_url = get_template_directory_uri() . '/favicons/default.ico';
}
} else {
$favicon_url = get_template_directory_uri() . '/favicons/default.ico';
}
} else {
$favicon_url = get_template_directory_uri() . '/favicons/default.ico';
}
echo '<link rel="icon" href="' . esc_url( $favicon_url ) . '" type="image/x-icon" />';
}
add_action('wp_head', 'wptips_favicon_by_category', 1);Этот подход позволяет сделать визуальное разделение сайта по разделам. Не забудьте добавить соответствующие иконки в папку favicons темы.
Использование плагина для динамического favicon
Если вы не хотите писать код, можно воспользоваться плагинами. Например:
- Dynamic Favicon — позволяет настраивать разные favicon для страниц, постов, категорий и по времени. Плагин бесплатен и прост в использовании.
- Favicon by RealFaviconGenerator — помогает создать favicon разных размеров и платформ, а также загружать их в WordPress.
Однако для полностью динамического управления favicon с кастомными условиями часто требуется дополнительный код.
Советы по оптимизации и совместимости динамического favicon
При реализации динамического favicon учитывайте:
- Кэш браузера — браузеры сильно кэшируют favicon, поэтому изменения могут не отображаться сразу. Для обхода можно добавлять параметр версии, например:
?v=123. - Производительность — не стоит делать тяжелую логику для определения favicon, чтобы не увеличивать время загрузки.
- Мобильные устройства — убедитесь, что иконки разных размеров корректно отображаются на мобильных браузерах.
- SEO — динамический favicon не влияет на SEO напрямую, но улучшает UX.
Пример с версионированием favicon для обхода кэша
function wptips_dynamic_favicon_with_version() {
$favicon_url = get_template_directory_uri() . '/favicons/dynamic.ico';
$version = filemtime( get_template_directory() . '/favicons/dynamic.ico' ); // время последнего изменения файла
echo '<link rel="icon" href="' . esc_url( $favicon_url ) . '?v=' . $version . '" type="image/x-icon" />';
}
add_action('wp_head', 'wptips_dynamic_favicon_with_version', 1);Это простой трюк, который заставит браузер обновлять favicon при изменении файла.
Заключение
Динамический favicon — отличный способ улучшить визуальное восприятие сайта и добавить интерактивности. С помощью простых хук и немного PHP-кода можно реализовать смену иконки в зависимости от времени, категории или других условий. Если не хотите писать код — используйте проверенные плагины. Но для тонкой настройки часто без кастомного кода не обойтись.
Для удобства управления и создания favicon обратите внимание на плагин Clearfy Pro, который помогает оптимизировать работу сайта и управлять различными аспектами, включая иконки.