Введение

Favicon (Favorite Icon) — это небольшой значок, который отображается во вкладке браузера рядом с названием сайта. Современные браузеры поддерживают автоматическое переключение favicon в зависимости от цветовой схемы системы пользователя (светлой или тёмной темы). В этом руководстве мы рассмотрим, как настроить такой динамический favicon в WordPress.

Dark Light Favicon

Преимущества использования SVG для favicon

  1. Масштабируемость: SVG-изображения остаются чёткими при любом размере
  2. Меньший размер файла: SVG обычно весит меньше, чем ICO или PNG
  3. Поддержка цветовых схем: Можно использовать разные версии для светлой и тёмной темы
  4. Редактируемость: SVG легко модифицировать через код или редактор

Подготовка файлов

  1. Создайте две версии вашего favicon в формате SVG:
  • Светлая версия (для тёмной темы) — light-favicon.svg
  • Тёмная версия (для светлой темы) — dark-favicon.svg
  1. Загрузите файлы через медиабиблиотеку WordPress:
  • Перейдите в Медиафайлы → Добавить новый
  • Загрузите оба SVG файла
  • Сохраните пути к загруженным файлам

Настройка WordPress для поддержки SVG

Сначала нужно разрешить загрузку SVG файлов в WordPress. Добавьте следующий код в файл functions.php вашей темы:

// Разрешаем загрузку SVG
function add_svg_mime_type($mimes) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
}
add_filter('upload_mimes', 'add_svg_mime_type');

// Исправляем возможные ошибки при загрузке SVG
function fix_svg_upload_error($data, $file, $filename, $mimes) {
    $filetype = wp_check_filetype($filename, $mimes);
    return [
        'ext'             => $filetype['ext'],
        'type'           => $filetype['type'],
        'proper_filename' => $filename
    ];
}
add_filter('wp_check_filetype_and_ext', 'fix_svg_upload_error', 10, 4);

Добавление динамического Favicon

Вариант 1: Файлы в папке темы

Если вы храните файлы favicon в папке вашей темы:

function custom_theme_favicon() {
    ?>
    <link rel="icon" type="image/svg+xml" media="(prefers-color-scheme: light)" href="<?php echo get_template_directory_uri(); ?>/light-favicon.svg">
    <link rel="icon" type="image/svg+xml" media="(prefers-color-scheme: dark)" href="<?php echo get_template_directory_uri(); ?>/dark-favicon.svg">
    <link rel="alternate icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">
    <?php
}
add_action('wp_head', 'custom_theme_favicon', 100);
add_action('admin_head', 'custom_theme_favicon', 100);

Вариант 2: Файлы в медиабиблиотеке (uploads)

Если файлы загружены через медиабиблиотеку:

function custom_theme_favicon() {
    ?>
    <link rel="icon" type="image/svg+xml" media="(prefers-color-scheme: light)" href="<?php echo site_url('/wp-content/uploads/dark-favicon.svg.svg'); ?>">
    <link rel="icon" type="image/svg+xml" media="(prefers-color-scheme: dark)" href="<?php echo site_url('/wp-content/uploads/light-favicon.svg.svg'); ?>">
    <?php
}
add_action('wp_head', 'custom_theme_favicon', 100);
add_action('admin_head', 'custom_theme_favicon', 100);

Проверка и устранение проблем

1. Конфликты с темой

У меня работает и установленной через настройки, в противном случае используете руководство ниже.
В Hello Elementor, убедитесь что:

  • В настройках Elementor не установлен свой favicon
  • В настройках WordPress (Внешний вид → Настроить) не установлен стандартный favicon

2. Проверка путей

Убедитесь, что пути к файлам корректны:

  1. Откройте исходный код страницы (Ctrl + U в браузере)
  2. Найдите теги <link rel="icon">
  3. Скопируйте пути и проверьте их доступность напрямую в браузере

3. Проблемы с кэшем

Если favicon не обновляется:

  1. Очистите кэш браузера
  2. Очистите кэш WordPress
  3. Попробуйте открыть сайт в режиме инкогнито

Дополнительные настройки

Альтернативный метод через фильтр

function custom_theme_favicon() {
    $html = '<link rel="icon" type="image/svg+xml" media="(prefers-color-scheme: light)" href="' . site_url('/wp-content/uploads/dark-favicon.svg.svg') . '">' . "\n";
    $html .= '<link rel="icon" type="image/svg+xml" media="(prefers-color-scheme: dark)" href="' . site_url('/wp-content/uploads/light-favicon.svg.svg') . '">';
    return $html;
}
add_filter('site_icon_meta_tags', 'custom_theme_favicon');

Поддержка старых браузеров

Для лучшей совместимости можно добавить fallback в формате .ico:

<link rel="alternate icon" href="<?php echo site_url('/wp-content/uploads/favicon.ico'); ?>">

Заключение

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

  1. Правильность путей к файлам
  2. Отсутствие конфликтов с темой или плагинами
  3. Корректность загрузки SVG файлов
  4. Очистку кэша браузера и WordPress

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