Favicon для тёмной темы: создаём адаптивную иконку
Тёмно-синий знак пропадает на фоне тёмной панели вкладок. Вы можете решить это через один SVG или два PNG, но запасную иконку по умолчанию всё равно оставляете.
Что на самом деле меняет тёмная тема
Панель вкладок браузера светлая в светлом режиме и тёмная в тёмном. Ваш favicon не меняется вместе с ней, пока вы не заставите его меняться. Знак, который выглядит чётко на белом, может исчезнуть на почти чёрной вкладке, и наоборот — светлый знак на светлом chrome.
У вас есть два способа отреагировать на это. Отгрузить один SVG, который перекрашивает сам себя, или отгрузить два PNG и позволить браузеру выбрать на основе настройки системы. Путь SVG — это один файл и один запрос. Путь PNG работает на большем числе клиентов, но его поддержка favicon с переключением по media неоднородна, поэтому он чаще опирается на запасной вариант.
Способ A: один SVG, который переключается сам
SVG-favicon может нести собственный CSS. Поместите media-запрос prefers-color-scheme: dark внутрь SVG и меняйте fill там. Браузер читает настройку системы и перерисовывает иконку без второго файла и без лишнего тега <link>.
Это метод, к которому стоит обратиться первым. Это один файл, он остаётся чётким при любом размере, и это единственный подход, где один ресурс покрывает обе темы.
SVG с запасными вариантами
<!-- In your <head>: SVG first, then the raster fallback -->
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- icon.svg, with the theme rule baked in -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #1a1a1a; }
@media (prefers-color-scheme: dark) {
path { fill: #f5f5f5; }
}
</style>
<path d="M6 6h20v20H6z" />
</svg>Браузер, который читает SVG, использует первую строку и учитывает media-запрос. Всё остальное откатывается к favicon.ico.
Способ B: два PNG в тегах <link> с областью media
Если вы не можете использовать SVG, экспортируйте два PNG (скажем, тёмный-на-светлом и светлый-на-тёмном) и пометьте каждый атрибутом media в его теге <link>. Браузер загружает тот, который соответствует текущей теме.
Поддержка этого неровная. Некоторые браузеры игнорируют атрибут media в ссылках на иконки и просто берут первую, которую понимают. Именно поэтому важна последняя строка: простой favicon.ico без условия media — это вариант по умолчанию, к которому может откатиться любой клиент.
Настройка с двумя PNG
<link rel="icon" type="image/png" href="/favicon-dark.png"
media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/png" href="/favicon-light.png"
media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon.ico" sizes="any">Держите безусловный favicon.ico последним, чтобы браузер, который игнорирует подсказки media, всё равно имел иконку.
Ленивый путь, который просто работает
Если всё это не стоит усилий, используйте один знак среднего тона. Цвет с достаточным контрастом, чтобы читаться и на светлом, и на тёмном chrome (насыщенный фирменный цвет, не почти чёрный и не почти белый), читаем в обеих темах из одного файла.
Это прагматичный вариант по умолчанию. Вы теряете идеальное совпадение с каждой темой, но получаете один ресурс, который никогда не исчезает, и никаких условий media, в которых можно ошибиться.
Часто задаваемые вопросы
Как заставить favicon меняться в тёмной теме?
Используйте SVG-favicon с media-запросом prefers-color-scheme: dark внутри его стилей, который меняет цвет fill, или отгрузите два PNG в тегах <link> с областью media. Держите простой favicon.ico по умолчанию в любом случае.
Favicon для тёмной темы работают во всех браузерах?
SVG-favicon с внутренним media-запросом хорошо поддерживаются в современных браузерах. PNG-favicon с переключением по media менее надёжны, поэтому всегда включайте безусловную запасную иконку.
Можно ли пропустить тёмную тему и использовать один favicon?
Да. Выберите знак среднего тона с достаточным контрастом, чтобы читаться и на светлых, и на тёмных вкладках. Это один файл, и он никогда не пропадает ни на одной из тем.
Должен ли favicon.ico меняться в тёмной теме?
Нет. favicon.ico — это ваш запасной вариант по умолчанию для старых клиентов и краулеров. Оставьте его как одну читаемую версию и обрабатывайте переключение темы ссылками SVG или PNG над ним.