SVG favicon: когда использовать и какой ICO всё же нужен
Один SVG может быть вашим самым чётким favicon в современных браузерах и переключаться в тёмный режим из одного файла. Он лишь не может быть вашей единственной иконкой, поэтому вот где он вписывается и что оставляет для .ico и PNG.
Что SVG favicon делает хорошо
Favicon рисуется в совершенно разных размерах на разных поверхностях, и один SVG покрывает их все из одного файла. Он остаётся чётким на любом экране, потому что это вектор, а не фиксированная сетка пикселей, так что нет ни размытого увеличения, ни отдельных экспортов 16, 32 и 48 пикселей, которые нужно держать в синхронизации.
У него есть ещё один трюк, с которым не сравнится растровая иконка: медиазапрос prefers-color-scheme внутри SVG позволяет одному и тому же файлу перекрашиваться, когда операционная система переключается в тёмный режим, так что знак остаётся читаемым на фоне тёмной полосы вкладок без поставки второго изображения.
Как на него ссылаться, с запасными вариантами
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Браузер, который понимает SVG, предпочитает первую строку. Всё остальное — для поверхностей, которые не понимают.
Где SVG работает, а где нет
| Поверхность | Использует SVG? |
|---|---|
| Вкладки современных браузеров | Да, и здесь он выглядит лучше всего |
| Старые браузеры | Нет, они откатываются к .ico или PNG |
| Путь /favicon.ico | Нет, этому запросу нужен настоящий .ico |
| Домашний экран iOS | Нет, он использует apple-touch-icon в PNG |
| Установка Android и PWA | Нет, она читает иконки PNG из манифеста |
Как заставить SVG адаптироваться к тёмному режиму
Поместите медиазапрос prefers-color-scheme в собственные стили SVG и позвольте ему менять цвета заливки, когда меняется тема ОС. Тогда один файл читается корректно и в светлом, и в тёмном интерфейсе браузера, что является самым изящным способом сделать favicon, адаптирующийся к теме.
Если вы предпочитаете не поддерживать медиазапрос, единый знак среднего тона с достаточным контрастом, чтобы выжить на любом фоне, — более простой путь к той же цели.
Часто задаваемые вопросы
Стоит ли использовать SVG favicon?
Для вкладки браузера — да: это один файл, идеально масштабируется и может адаптироваться к тёмному режиму. Просто сочетайте его с favicon.ico и app icon в PNG, чтобы поверхности, которые не читают SVG, всё равно были покрыты.
Все ли браузеры поддерживают SVG favicon?
Большинство современных браузеров поддерживают, но не все, и ни одна поверхность домашнего экрана его не использует. Именно поэтому вы держите .ico и PNG как запасные варианты, а не полагаетесь только на SVG.
Нужен ли мне до сих пор favicon.ico, если у меня есть SVG?
Да. Браузеры, краулеры и читалки лент всё ещё запрашивают /favicon.ico по пути, и на этот запрос нельзя ответить SVG. Держите настоящий .ico в корне сайта.
Может ли SVG favicon работать в тёмном режиме?
Да, это одно из его преимуществ. Медиазапрос prefers-color-scheme внутри SVG перекрашивает его, когда ОС переключает темы, так что один файл работает и в светлом, и в тёмном интерфейсе браузера.