Настройка динамического Favicon в WordPress

Опубликован 1 год назад

Что такое динамический favicon и зачем он нужен

Favicon — это маленький значок рядом с названием вашего сайта во вкладке браузера. Казалось бы, мелочь — но именно такие детали создают ощущение профессионально сделанного сайта.

Современные операционные системы (Windows, macOS, Android, iOS) умеют переключаться между светлой и тёмной темой. Браузер знает, какую тему выбрал пользователь, и может передать эту информацию вашему сайту. Задача — сделать так, чтобы favicon тоже реагировал на эту смену: тёмный значок на светлом фоне и светлый — на тёмном.

Существует несколько способов это реализовать. В этой статье разберём самый элегантный из них — один SVG-файл, который сам меняет цвета в зависимости от темы. Никакого JavaScript, никаких двух отдельных файлов.

JS Favicon Manipulation

Почему SVG, а не PNG или ICO

Традиционные форматы favicon — .ico и .png — это обычные растровые изображения. Они хранят пиксели, и менять в них что-либо «на лету» невозможно.

SVG — это совсем другой формат. Это текстовый файл с описанием графики через код (похоже на HTML). Внутри SVG можно писать самый настоящий CSS, в том числе медиазапросы. Это и есть ключ к нашему решению.

Сравнение форматов:

  • ICO/PNG: фиксированное изображение, один размер, нет адаптации к теме
  • SVG: масштабируется без потери качества, поддерживает CSS и медиазапросы, один файл вместо нескольких

Шаг 1 — Создаём SVG-файл favicon

Создайте файл favicon.svg и поместите его в папку вашей темы, например по пути wp-content/themes/ваша-тема/images/favicon.svg.

Вот шаблон с объяснением каждой части:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    /* Цвет по умолчанию — для светлой темы */
    :root {
      --icon-color: #1a1a1a;
    }
    /* Если у пользователя тёмная тема — меняем цвет */
    @media (prefers-color-scheme: dark) {
      :root {
        --icon-color: #ffffff;
      }
    }
    /* Применяем переменную к элементам иконки */
    .icon {
      fill: var(--icon-color);
    }
  </style>
  <!-- Ваша иконка. Здесь для примера — простой круг -->
  <circle class="icon" cx="16" cy="16" r="14"/>
</svg>

Разберём, что здесь происходит:

  • :root { --icon-color: #1a1a1a; } — задаём CSS-переменную с тёмным цветом. Это цвет для светлой темы пользователя.
  • @media (prefers-color-scheme: dark) — этот медиазапрос срабатывает, когда у пользователя включена тёмная тема. Внутри мы меняем переменную на белый цвет.
  • fill: var(--icon-color) — все элементы с классом icon используют эту переменную. Когда переменная меняется — меняется и цвет иконки.

Браузер читает этот CSS-файл точно так же, как CSS на обычной странице. Всё происходит автоматически, без единой строчки JavaScript.

Шаг 2 — Разрешаем загрузку SVG в WordPress

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

Если же вы просто кладёте файл вручную через FTP или файловый менеджер хостинга — этот шаг можно пропустить.

// Разрешаем загрузку SVG через медиабиблиотеку
function allow_svg_upload( $mimes ) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
}
add_filter( 'upload_mimes', 'allow_svg_upload' );

// Без этого WordPress иногда отклоняет SVG даже после разрешения выше
function fix_svg_mime_check( $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_mime_check', 10, 4 );

Шаг 3 — Подключаем favicon в WordPress

Теперь нужно сообщить браузеру, где находится наш favicon. Добавьте в functions.php:

function custom_svg_favicon() {
    $favicon_url = get_template_directory_uri() . '/images/favicon.svg';
    echo '<link rel="icon" href="' . esc_url( $favicon_url ) . '" type="image/svg+xml">';
}
add_action( 'wp_head', 'custom_svg_favicon' );

Что делает этот код:

  • get_template_directory_uri() — возвращает URL папки вашей активной темы. Удобно: если вы переименуете тему или переедете на другой домен — путь обновится автоматически.
  • esc_url() — функция безопасности WordPress, которая очищает URL от потенциально опасных символов. Хорошая практика использовать её всегда при выводе URL.
  • wp_head — хук, который добавляет наш тег <link> в секцию <head> каждой страницы.

Шаг 4 — Добавляем поддержку старых браузеров (опционально)

SVG favicon поддерживается во всех современных браузерах: Chrome, Firefox, Edge. Safari добавил поддержку в версии 17 (2023 год). Если для вас важна совместимость с совсем старыми браузерами — добавьте .ico-файл как запасной вариант:

function custom_svg_favicon() {
    $theme_uri = get_template_directory_uri();
    ?>
    <!-- Современные браузеры: SVG с адаптацией к теме -->
    <link rel="icon" href="<?php echo esc_url( $theme_uri . '/images/favicon.svg' ); ?>" type="image/svg+xml">
    <!-- Запасной вариант для старых браузеров -->
    <link rel="icon" href="<?php echo esc_url( $theme_uri . '/images/favicon.ico' ); ?>">
    <?php
}
add_action( 'wp_head', 'custom_svg_favicon' );

Браузер просматривает теги <link rel="icon"> сверху вниз и выбирает первый подходящий. Современный браузер выберет SVG, старый — пройдёт мимо непонятного ему type="image/svg+xml" и возьмёт ICO.

Устранение конфликтов с темой

WordPress и многие темы имеют встроенную настройку favicon. Если вы видите, что ваш код не работает — скорее всего, другая настройка его перекрывает.

Стандартная настройка WordPress

Перейдите в Внешний вид → Настроить → Идентификация сайта и удалите иконку сайта, если она там установлена. Встроенная настройка WordPress имеет приоритет.

Elementor

В панели Elementor перейдите в Elementor → Настройки → Стиль и убедитесь, что поле favicon там пустое.

Проверка в исходном коде

Откройте любую страницу сайта и нажмите Ctrl + U (исходный код). Найдите через Ctrl + F слово favicon или rel="icon". Вы сразу увидите, сколько тегов favicon присутствует и какой из них стоит первым.

Проверка результата

После того как всё настроено:

  1. Очистите кэш браузера (Ctrl + Shift + Delete)
  2. Если используете кэширующий плагин (WP Rocket, W3 Total Cache) — очистите кэш там тоже
  3. Откройте сайт и посмотрите на вкладку браузера
  4. Переключите тему системы (светлая/тёмная) — favicon должен поменяться

На macOS переключение темы: Системные настройки → Основные → Внешний вид. На Windows: Параметры → Персонализация → Цвета.

Итог

Мы реализовали динамический favicon с помощью одного SVG-файла. Вся логика смены темы находится внутри самого файла — это делает решение чистым и простым в поддержке.

Если вам в будущем понадобится изменить цвета — достаточно открыть favicon.svg в любом текстовом редакторе и поменять два значения в CSS-переменных. Больше ничего трогать не нужно.

Global

Если у вас есть вопрос?

По вопросу статьи или что-то связанно свашим цифровым проектом, просто свяжитесь со мной?

Связаться сейчас

Похожие записи

Перезвонить?

Хотите развивать бизнес онлайн, мы можем вам помочь!