SVG favicon: поддержка, тёмная тема и запасные варианты
SVG favicon — это векторная иконка, подключаемая тегом <link> с типом image/svg+xml, так что один файл чётко отрисовывается в любом размере вместо одного PNG на размер. Поскольку это документ, он может нести медиазапрос prefers-color-scheme и рисовать себя иначе в тёмной теме. Поддержка не всеобщая: современные Chrome, Edge и Firefox его отрисовывают, а Safari не использует его для иконки вкладки, так что держите рядом запасной PNG или ICO.
Один файл вместо набора
Растровый favicon — это решение о размере, принятое во время экспорта. SVG — нет: браузер растрирует его в том размере, который нужен поверхности, так что вкладка на 16 пикселей и панель закладок на 32 получают одинаково чёткий результат из одного файла, который обычно меньше единственного PNG.
Загвоздка в том, что поддержка неравномерна, и SVG favicon не заменяет остальной набор иконок. Поверхности установленных приложений на Android и iOS по-прежнему хотят PNG, а Safari по-прежнему нуждается в растровом пути для иконки вкладки. Относитесь к SVG как к улучшению поверх работающей настройки из PNG и ICO.
Где SVG favicon работает
| Поверхность | Поведение |
|---|---|
| Вкладка Chrome / Edge | Отрисовывает SVG |
| Вкладка Firefox | Отрисовывает SVG |
| Вкладка Safari | Не использует его; откатывается к вашему PNG или ICO |
| Домашний экран iOS | Использует PNG apple-touch-icon, никогда SVG |
| Установка Android / PWA | Использует PNG из веб-манифеста приложения |
Теги в <head>
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">Браузеры, понимающие image/svg+xml, берут SVG; остальные проваливаются к ICO. Никакого определения user-agent не требуется.
Favicon, следующий за тёмной темой
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
path { fill: #111111 }
@media (prefers-color-scheme: dark) {
path { fill: #ffffff }
}
</style>
<path d="M20 80 L50 20 L80 80 Z" />
</svg>Стили должны быть внутри SVG. Внешняя таблица стилей для favicon не загружается. Браузеры, поддерживающие SVG favicon, обычно это учитывают; те, что не поддерживают, просто используют растровый запасной вариант.
Частые вопросы об SVG favicon
Может ли SVG favicon заменить favicon.ico?
Не полностью. Всё, что запрашивает /favicon.ico по пути (и всё, что не отрисовывает SVG favicon), нуждается в растровом файле. SVG — это дополнение, а не замена.
Почему мой SVG favicon не появляется в Safari?
Safari на момент написания не использует SVG для иконки вкладки. Он откатывается к любой объявленной вами растровой иконке, так что решение — убедиться, что этот запасной вариант существует и хорошо выглядит.
Rel="mask-icon" — это то же самое?
Нет. mask-icon — это отдельная функция Safari, которая берёт плоский монохромный SVG и тонирует его для закреплённых вкладок. Она игнорирует цвета в вашем файле и не влияет на обычную иконку вкладки.