Возможно вы уже столкнулись с тем, что ваш темный favicon практически не заметен в темной версии браузера? Или может быть вы еще только планируете как это будет выглядеть. Но в любом случае вас интересует как сделать так, чтобы иконка сайта всегда была видна не зависимо от цвета браузера.

К счастью решение есть — media queries. С помощью prefers-color-scheme можно определить темную или светлую тему использует посетитель вашего сайта. А дальше дело за малым, останется только подменить свой темный favicon на светлый.

Код для добавления светлого favicon’а

if (window.matchMedia('(prefers-color-scheme: dark)')) {
   var link = document.querySelector("link[rel*='icon']");
   link.type = 'image/x-icon';
   link.rel = 'shortcut icon';
   link.href = '/light.png'; // адрес вашего светлого favion'а для темной темы

   document.getElementsByTagName('head')[0].appendChild(link);
 }

Обратите внимание

prefers-color-scheme все еще является экспериментальной функцией и поддерживается не всеми браузерами. Но 76.83% используемых браузеров ее уже поддерживают. Как всегда отстают мобильные браузеры и пресловутый IE (Edge тоже)

По крайней мере у пользователей современных браузеров с иконкой будет все в порядке. Проверить актуальное состояние дел с поддержкой этой функции можно на всеми любимом caniuse.com

Узнать больше о работе favicon’а можно в статье Как работает favicon

Was this helpful?