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

Алексей Чубыкин
Web-разработчик

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

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

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

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

  1. C помощью медиа-запроса CSS refers-color-circuit.  У данного медиа-запроса есть несколько значений, которые можно указать: светлое light и темное dark. Пример:
@media (prefers-color-scheme: dark) { /* выполнение кода в темном режиме */ }
  1. 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">

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

Темная тема
 Темная тема
Светлая тема
Светлая тема

 

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

Алексей Чубыкин
Web-разработчик
разработка
разработка сайта

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

Что такое сквозная аналитика и почему без нее маркетинг – просто игра в угадайку
Как перестать гадать на кофейной гуще и начать понимать, какие каналы действительно работают? В новой статье рассказываем о преимуществах сквозной аналитики: что это, зачем нужно и кому обязательно пригодится. Ликбез для тех, кто хочет принимать решения на основе данных, а не догадок!
Читать далее
Коммуникационная стратегия: привлечение клиентов через продвижение бренда
Разобрали лучшие способы достижения результата в общении с целевой аудиторией при помощи коммуникационной стратегии. Рассказываем что из себя представляет коммуникационная стратегия и на что она влияет.
Читать далее
Разработка сайта для отечественного производителя компьютерной техники как первый шаг к комплексному продвижению в интернете – кейс ЗЕКСЛЕР и Урал Компьютер
Рассказываем о проекте разработки интернет-магазина, смене концепции в процессе, а также о том, как мы работали над удобством сайта для конечного пользователя.
Читать далее
Как ЗЕКСЛЕР собирал данные для большого исследования негативных отзывов о работодателях
Большой проект по сбору данных о негативных отзывах. Как реализовывали и что из этого получилось подробно описали в этой статье.
Читать далее
Все статьи

Начнем?