Чёрный логотип на прозрачном фоне отлично выглядит в светлой вкладке и исчезает в тёмной. ICO не умеет адаптироваться, а SVG-фавикон умеет: внутри него есть CSS-правило, меняющее цвета в зависимости от темы браузера.
Проблема: один файл, два фона
Браузеры следуют системной теме, поэтому панель вкладок одной и той же страницы у одного посетителя почти белая, а у другого почти чёрная. Одноцветный фавикон, рассчитанный на один фон, теряется на другом.
Многие сайты обходят проблему непрозрачным цветным фоном значка. Это работает, но превращает его в тяжёлое пятно, тогда как крупные бренды часто используют отдельный символ без фона.
Лучше дать браузеру выбрать подходящий вариант. Это возможно без JavaScript и без определения темы на сервере.
Как работает адаптивный SVG
SVG-файл — документ, а не плоская картинка: он может содержать тег style и, следовательно, медиазапросы. Правило prefers-color-scheme: dark внутри него переопределяет заливку контуров, когда браузер использует тёмную тему.
На практике SVG задаёт цвет по умолчанию для светлой темы и правило, заменяющее его в тёмной. Браузер применяет нужный вариант при отрисовке и сразу обновляет вкладку, если посетитель переключает тему.
Механизм не ограничивается инверсией: можно показывать совершенно другой рисунок, например отдельный символ в светлой теме и сплошную эмблему в тёмной.
Объявление SVG рядом с .ico
Объявите SVG через link rel="icon" type="image/svg+xml" href="/favicon.svg". Браузеры с поддержкой формата предпочитают его, а остальные используют favicon.ico в корне как запасной вариант.
Удалять ничего не нужно: оба файла существуют вместе и покрывают разные клиенты. Так прогрессивное улучшение применяется даже к значку размером 32 пикселя.
Есть нюанс: SVG-фавикон должен быть автономным. Внешний шрифт, удалённое изображение или скрипт не загрузятся в этом контексте. Текст нужно преобразовать в контуры.
На что тёмная тема не влияет
Тёмный вариант применяется к фавикону браузера на компьютере. Он не меняет значок Apple Touch, который остаётся непрозрачным PNG, и значки веб-манифеста, которые Android рисует на собственном фоне.
Поддержка тоже не универсальна: браузеры на Chromium и Firefox читают адаптивный SVG, а возможности Safari зависят от версии. Это допустимо, поскольку переход к запасному .ico происходит автоматически.
Поэтому светлый значок следует проектировать как базовый вариант для всех посетителей, а тёмный — как дополнительное улучшение для браузеров, которые умеют его читать.
Первоисточники
Частые вопросы
Может ли favicon.ico поддерживать тёмную тему?
Нет. ICO хранит неизменяемые растровые изображения и ничего не знает о теме. Только SVG может содержать медиазапрос, поэтому современный набор включает оба формата.
Нужны два SVG-файла, светлый и тёмный?
Нет, достаточно одного файла. Оба варианта находятся внутри одного SVG и разделяются медиазапросом prefers-color-scheme. Это позволяет обойтись без лишнего запроса и кода определения темы.
Как проверить отображение в тёмной теме?
Переключите тему операционной системы и перезагрузите вкладку. В генераторе предпросмотры светлой и тёмной вкладок расположены рядом, поэтому переключаться туда и обратно не придётся.