Фавикон, адаптирующийся к тёмному режиму
Только SVG может реагировать на тему браузера. Встройте <style> с запросом prefers-color-scheme внутрь самого SVG: браузер применяет его при отрисовке иконки. Так тёмный логотип остаётся видимым на тёмной панели вкладок:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #111; }
@media (prefers-color-scheme: dark) { path { fill: #fff; } }
</style>
<path d="…your icon path…"/>
</svg>
Ссылайтесь на него как <link rel="icon" href="/icon.svg" type="image/svg+xml">. Держите рядом обычный favicon.ico для браузеров и Google Search, которые не выполнят медиазапрос.
Иконка закреплённой вкладки Safari
Когда кто-то закрепляет вашу вкладку в настольном Safari, он использует отдельный, плоский, одноцветный SVG («mask icon»): только форма, без градиентов:
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#F0562E">
Атрибут color задаёт оттенок закрепления. Экспортируйте для этого монохромную версию вашего символа; всё, что имеет тонкие детали или несколько цветов, отрисуется как сплошное пятно.
Maskable-иконки и безопасная зона
Адаптивные иконки Android обрезают ваше изображение в круг, сквиркл или скруглённый квадрат в зависимости от лаунчера. У обычной иконки срезаются углы. Пометьте иконки манифеста как maskable и держите важное содержимое внутри центральной «безопасной зоны»: примерно центральные 80 %, то есть отступ около 10 % с каждой стороны:
{ "src": "/android-chrome-512x512.png", "sizes": "512x512",
"type": "image/png", "purpose": "any maskable" }
Проектируйте с фоновым цветом до самых краёв и логотипом, комфортно расположенным внутри этого отступа, чтобы никакая форма его не срезала.
theme-color: полоса вокруг иконки
Это не сам фавикон, но на мобильных он оказывается прямо рядом: theme-color окрашивает интерфейс браузера и адресную строку. Он тоже может реагировать на тему:
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#111316" media="(prefers-color-scheme: dark)">
Что на самом деле содержит настоящий .ico
Правильный .ico — это контейнер, который хранит сразу несколько растровых изображений, обычно 16, 32 и 48 пикселей. Браузер выбирает нужный размер для каждой поверхности (вкладка, панель закладок или ярлык Windows), поэтому ему никогда не приходится увеличивать изображение 16 px или уменьшать 512 px. «favicon.ico», который на самом деле является одним переименованным PNG, теряет это и выглядит размытым в некоторых размерах. Этот генератор записывает настоящий многоразмерный ICO.
Правила фавиконов Google Search
Чтобы ваша иконка появилась рядом с результатом, Google требует всего следующего: фавикон находится по постоянному URL; он квадратный и кратен 48×48 (48, 96, 144…); он на том же хосте, что и сайт; страница, которая его размещает, индексируема; и иконка визуально чёткая. Google получает и кэширует её своим собственным краулером, отдельно от страницы, поэтому после изменения дайте пройти от дней до недель и убедитесь, что /favicon.ico возвращает 200 для Googlebot.
Держите файлы маленькими
- SVG: удалите метаданные и комментарии редактора; чистый SVG-иконка обычно весит меньше 1 КБ.
- ICO: только 16/32/48; устоите перед соблазном добавить 64/128/256, которые раздувают файл без всякой пользы.
- PNG: иконка 512 самая тяжёлая; прогоните её через оптимизатор без потерь.
Тестируйте там, где это действительно видно
Не полагайтесь на один браузер. Проверьте: обычную вкладку (светлую и тёмную), закладку, «Добавить на главный экран» в iOS, установку на Android и результат Google после повторного сканирования. Быстрый способ добиться чистого чтения во время тестирования — приватное окно плюс параметр ?v= в URL иконок.