Фавиконка для тёмной темы
В тёмной теме браузера обычная (тёмная) иконка может «потеряться» на тёмном фоне вкладки. Решение — отдельная favicon для dark mode и правильное подключение.
Как сделать
- В генераторе выберите «Complete set» (он включает тёмную тему).
- Настройте цвета для светлой и тёмной вкладки в предпросмотре.
- Скачайте ZIP и возьмите готовый HTML-сниппет.
- Подключите 2 SVG через prefers-color-scheme (светлый и тёмный).
Частая ошибка
Не подключайте две фавиконки одинаковыми тегами без media — браузер выберет одну случайно или последнюю.
Как подключать (суть)
Идея простая: 2 <link rel="icon">, у каждого свой media. В ZIP у вас будет готовый сниппет — просто вставьте его в <head>.
- <link rel="icon" href="/favicon-light.svg" type="image/svg+xml" media="(prefers-color-scheme: light)">
- <link rel="icon" href="/favicon-dark.svg" type="image/svg+xml" media="(prefers-color-scheme: dark)">
Сделать тёмную фавиконку в генераторе
Выберите Complete set и скачайте ZIP.
FAQ
Нужно ли делать тёмную фавиконку всем?
Если у иконки тёмные элементы — да, иначе на тёмной вкладке она будет плохо видна.
Это работает везде?
Большинство современных браузеров понимают prefers-color-scheme для favicon, но совместимость зависит от браузера. Поэтому в наборе важны и PNG/ICO для fallback.
Можно ли просто инвертировать цвета?
Иногда да, но лучше иметь отдельный вариант: можно чуть изменить контраст, толщину и фон, чтобы иконка читалась лучше.