Favicon для тёмной темы (prefers-color-scheme)
Favicon для тёмной темы меняется вместе со светлой или тёмной настройкой операционной системы, чтобы оставаться разборчивым на тёмном или светлом интерфейсе браузера. Работают два подхода: SVG favicon с медиазапросом prefers-color-scheme, который сам себя перекрашивает, или два PNG-файла, объявленных с media="(prefers-color-scheme: dark)" в их тегах <link>. Одна иконка среднего тона, читаемая на обоих, — самая простая альтернатива.
Два способа заставить его реагировать
Более чистый подход — SVG favicon с медиазапросом prefers-color-scheme в его собственных стилях, так что единственный файл перекрашивает себя, когда ОС переключается на тёмную тему. Браузеры, которые отрисовывают SVG favicon и учитывают медиазапрос (включая Safari и Firefox), подхватывают изменение без дополнительных тегов.
Альтернатива — два растровых файла: обычная иконка и оптимизированная под тёмную тему, каждая на теге <link> с атрибутом media. Поддержка переключения PNG favicon по media менее стабильна, чем путь с SVG, так что всегда держите иконку по умолчанию, которая работает сама по себе.
Подход с двумя файлами
<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)" />
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)" />
<link rel="icon" href="/favicon.ico" sizes="any" />Обычный favicon.ico — это запасной вариант для всего, что игнорирует атрибут media.
Частые вопросы о favicon для тёмной темы
Как сделать favicon для тёмной темы?
Либо поместите медиазапрос prefers-color-scheme внутрь SVG favicon, чтобы он сам перекрашивался, либо объявите два PNG с media="(prefers-color-scheme: dark)" и light в их тегах <link>. Держите обычный favicon.ico как запасной вариант.
Атрибут media на favicon работает везде?
Нет. Поддержка переключения favicon по prefers-color-scheme неравномерна среди браузеров, поэтому вы всегда держите иконку по умолчанию, которая работает независимо от темы.
Медиазапрос в SVG или два PNG?
Путь с SVG — это один файл и в целом лучше поддерживается для переключения темы. Два PNG дают попиксельный контроль под каждую тему, но полагаются на менее стабильную обработку атрибута media.