Разный цвет иконки сайта для светлой и темной темы браузера

26.12.2023

Алексей Чубыкин

Web-разработчик

Фавикон (favicon) – это значок сайта, который отображается на вкладке браузера рядом с названием страницы или в результатах поиска. Также favicon может использоваться как значок мобильного приложения в главном меню смартфона. Повышает узнаваемость сайта, привлекает посетителей на сайт и подчеркивает фирменный стиль бренда.

В этом материале узнаете, как менять цвет фавикона в формате SVG с учетом цветовой темы браузера.

Есть несколько способов обнаружения светлой и темной темы в браузере:

C помощью медиа-запроса CSS refers-color-circuit. У данного медиа-запроса есть несколько значений, которые можно указать: светлое light и темное dark. Пример:

@media (prefers-color-scheme: dark) { /* выполнение кода в темном режиме */ }

JavaScript. Показан для ознакомления. Мы применим первый метод.

if (window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches) {
// выполнение кода в темном режиме
}

Как же в итоге переключить favicon в темном режиме? Во-первых добавляем иконку в <head> секцию документа:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

В коде svg иконки вносим изменения. Для примера возьмем значок в виде буквы Z

С помощью вышеупомянутой функции CSS prefers-color-scheme задаем значение заливки области белым в темной теме:

<svg width="267" height="267" viewBox="0 0 267 267" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
    path {
      fill: black;
    }
    @media (prefers-color-scheme: dark) {
      path {
        fill: white;
      }
    }
</style>
<path d="M208 168.631H150.462L208 81.8567V0.888672H0.671875V99.4336H58.8428L0.671875 181.612V266.212H208V168.631ZM21.9914 245.071V186.41L100.046 78.2584H22.4888V22.4899H185.37V75.3439L111.203 189.683H185.37V244.981L21.9914 245.071Z"/></svg>

Стоит учитывать то, что не все браузеры поддерживают SVG-иконки сайта. В этом случае мы добавляем дополнительно иконку в формате .png, когда браузер не может загрузить .svg в качестве значка:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" href="/favicon.png">

Смотрим результат:

Спасибо за внимание!

Статьи по теме