Форматы favicon: ICO, PNG, SVG и что нужно браузерам

Почему favicon всё ещё устроены странно сложно

Favicon выглядит как одно маленькое изображение, но находится на пересечении интерфейса браузера, закладок, вкладок, закреплённых ярлыков, результатов поиска, домашних экранов мобильных устройств и установок progressive web app. У каждого контекста немного разные ожидания.

Именно поэтому советы по favicon часто кажутся хаотичными. Одни команды поставляют только один favicon.ico, потому что раньше этого было достаточно. Другие генерируют десяток файлов, не понимая, какие из них действительно используются. Разумная середина компактнее: понять, в чём сильны ICO, PNG и SVG, а затем поставить небольшой набор, который покрывает современные браузеры и распространённые контексты устройств.

Favicons — не место для демонстрации возможностей пайплайна изображений. Здесь лучше быть скучными, явными и совместимыми.

ICO: старый формат, который не собирается исчезать

ICO — классический контейнер иконок Windows. Он может содержать несколько растровых изображений разных размеров, обычно 16×16, 32×32 и 48×48 пикселей. Это важно, потому что favicon может отображаться очень маленьким во вкладке браузера, крупнее в списке закладок и иначе в ярлыках Windows.

Важная деталь: ICO — это контейнер, а не просто одно изображение. Хороший favicon.ico обычно содержит несколько растровых размеров, чтобы браузер или операционная система могли выбрать ближайший вариант вместо масштабирования одной крошечной битовой картинки.

ICO всё ещё полезен по трём причинам:

• Браузеры могут автоматически запрашивать /favicon.ico, даже если вы не указали его в HTML.
• Некоторые старые браузеры и интеграции ожидают именно его.
• Это безопасный запасной вариант, когда более новые объявления иконок игнорируются.

Это не значит, что ICO должен быть вашей единственной иконкой. Его неудобно редактировать, он не особенно дружелюбен к современным рабочим процессам и плохо подходит как источник истины для фирменного знака. Относитесь к нему как к совместимому fallback.

На практике разместите настоящий /favicon.ico в корне сайта. Не отдавайте там 404, если только вам не нравятся шумные логи и лишние повторные запросы браузеров.

PNG: надёжная рабочая лошадка

PNG всё ещё остаётся самым предсказуемым растровым форматом для favicons и touch icons. Он поддерживает прозрачность, широко поддерживается и ведёт себя стабильно в разных браузерах и платформах.

Для favicons PNG полезен, когда вам нужны явные иконки заданного размера в пикселях, например 32×32 или 48×48. Для иконок на домашних экранах мобильных устройств PNG в некоторых средах фактически обязателен. Например, Apple touch icons в обычном production-использовании основаны на PNG.

Помогают несколько практических правил:

• Экспортируйте из векторного источника, а не из уже маленького растра.
• Добейтесь читаемости иконки на 16×16 до того, как думать о больших размерах.
• Добавьте достаточно отступов, чтобы знак не выглядел обрезанным в скруглённых или маскированных контекстах.
• Избегайте мелкого текста, тонких линий и детализированных иллюстраций.

О сжатии PNG для favicons обычно не стоит слишком переживать, потому что файлы крошечные. Но всё же не поставляйте touch icon размером 500 KB только потому, что он вышел напрямую из дизайнерского экспорта. Если вы уже пересматриваете более широкие решения по изображениям, здесь тоже применимо то же дисциплинированное мышление из выбора форматов изображений в современном вебе: выбирайте формат под задачу, а не потому, что он модный.

SVG: современный и гибкий вариант

SVG favicons привлекательны тем, что не зависят от разрешения. Один небольшой файл может чётко отображаться во многих размерах, а ещё его можно редактировать прямо в коде или экспортировать из дизайнерского ПО.

Современные версии Chromium, Firefox и Safari поддерживают SVG favicons. Поэтому SVG — хороший основной формат favicon для многих сайтов, особенно если иконка представляет собой простой логотип, глиф или геометрический знак.

Но у SVG favicons есть оговорки.

Во-первых, SVG должен быть самодостаточным. Не полагайтесь на внешние шрифты, удалённые изображения или скрипты. Браузеры применяют ограничения к SVG, используемому как изображение, и даже если что-то работает в одном браузере, в другом оно может сломаться.

Во-вторых, сохраняйте визуальную простоту. SVG не решает магически проблему 16 пикселей. Детализированная векторная иллюстрация всё равно превращается в пятно, когда её сжимают во вкладку.

В-третьих, будьте осторожны с динамической стилизацией. Некоторые команды используют prefers-color-scheme внутри SVG favicon, чтобы иконка адаптировалась к тёмной и светлой темам браузера. Это может работать, но поведение браузеров и кэширование бывают неровными. Если узнаваемость бренда важна, одна надёжная иконка часто лучше хитрой адаптивной.

SVG — хороший источник и хороший современный формат доставки. Но это не причина отказываться от fallback-файлов.

Что браузеры на самом деле ищут

Браузеры находят favicons двумя основными способами: через явные HTML-ссылки и через неявные запросы к корню сайта.

Неявное поведение — старое: если браузеру нужна иконка и он её не нашёл, он может запросить /favicon.ico. Именно поэтому корневой ICO-файл остаётся полезным даже на современных сайтах.

Явное поведение использует элементы <link> в head документа. Компактная современная настройка выглядит так:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Затем manifest может указывать на более крупные PNG-иконки, используемые для устанавливаемых веб-приложений:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Это не единственно допустимая настройка, но хорошая базовая линия. Она даёт современным браузерам SVG, предоставляет привычный ICO fallback, покрывает сохранение на домашний экран iOS и поддерживает контексты установки приложений.

Набор favicon, который стоит поставлять большинству сайтов

Для обычного маркетингового сайта, сайта документации, SaaS-приложения или издания такого набора достаточно:

• /favicon.ico, содержащий 16×16 и 32×32, опционально 48×48.
• /icon.svg как современный масштабируемый favicon.
• /apple-touch-icon.png размером 180×180.
• /icon-192.png и /icon-512.png, если у вас есть манифест веб-приложения.

Вы можете добавить больше размеров, если у платформы есть конкретное требование, но не генерируйте десять файлов по привычке. Каждый дополнительный файл — это ещё одна вещь, которую нужно кэшировать, не забыть, правильно назвать и не оставить устаревшей после ребрендинга.

Если ваш сайт не устанавливается и у него нет manifest, иконки 192 и 512 пикселей могут быть не нужны. Если ваш сайт ведёт себя как приложение, скорее всего, нужны.

Типичные сценарии поломок

Самые частые ошибки с favicon не художественные. Это проблемы доставки.

Одна из них — агрессивное кэширование. Браузеры цепко держатся за favicons. Во время тестирования изменённая иконка может не появиться, пока вы не сделаете жёсткую перезагрузку, не очистите данные сайта, не используете новое имя файла или не проверите в свежем профиле. Для production-ребрендингов изменение /icon.svg?v=2 может помочь в HTML, но с корневым /favicon.ico сложнее, потому что браузеры запрашивают его напрямую. Замена файла и ожидание истечения кэшей часто являются частью работы.

Другая распространённая проблема — неправильный MIME type. SVG должен отдаваться как image/svg+xml, PNG как image/png, а ICO обычно как image/x-icon или image/vnd.microsoft.icon. Многие браузеры прощают ошибки, но не все контексты. Если что-то ломается только в одном браузере, проверьте сетевой ответ перед тем, как перерисовывать иконку. Здесь применимы те же привычки, что и при отладке редиректов и HTTP-заголовков в production: смотрите на фактический ответ, а не на то, что CMS якобы отдаёт.

Третья проблема — плотность дизайна. Логотипы, которые прекрасно работают в шапке сайта, часто проваливаются как favicons. Иконка во вкладке — жёсткий тест. Уберите слова, упростите формы, повысьте контраст и проверяйте в реальных размерах. Если иконка является значимым контентом внутри страницы, тогда важны вопросы доступности, например alt text; сам favicon — это декоративный элемент интерфейса браузера, а не содержимое страницы. Об этом различии см. наше прагматичное руководство по alt text для изображений.

<!-- tool-cta:start -->

💡 Попробуйте: Создайте варианты ICO, PNG и SVG, которые ожидают современные браузеры, за один проход с помощью Ultimate Favicon Generator.

<!-- tool-cta:end -->

Простой чек-лист внедрения

Используйте этот чек-лист перед поставкой:

1. Начните с чистого векторного мастера.
2. Проверьте знак на 16×16 и 32×32.
3. Экспортируйте самодостаточный SVG favicon.
4. Сгенерируйте многоразмерный ICO fallback.
5. Экспортируйте Apple touch icon 180×180.
6. Добавьте PNG 192×192 и 512×512, если используете manifest.
7. Разместите /favicon.ico в корне сайта.
8. Проверьте status codes, MIME types и caching headers.
9. Протестируйте как минимум в одном браузере Chromium, Firefox и Safari, если ваша аудитория включает устройства Apple.

Favicons малы, но очень заметны. Сломанный favicon создаёт ощущение незавершённого сайта. Хорошо сделанный растворяется в интерфейсе — именно в этом и смысл.