SVG против ICO Иконки

SVG favicon — это отдельные XML-документы, которые масштабируются до любого размера табуляции без дополнительных байтов. Файлы ICO представляют собой двоичные контейнеры, содержащие один или несколько предварительно растрированных кадров.

Современные Chromium, Firefox и Safari могут отображать SVG на вкладках. Оболочка Windows, старые внедрения и неявные выборки /favicon.ico по-прежнему ожидают растровые данные ICO.

Вопрос не в SVG или ICO — это SVG плюс ICO, причем SVG указан для совместимых браузеров, а ICO — в качестве системы безопасности.

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

Один файл охватывает логические пиксели размером от 16×16 до 256×256. Mipmap не настроен для обслуживания.

Размер файла для простых меток часто составляет менее 2 КБ, что намного меньше, чем шестикадровый .ico.

Встроенный CSS может инвертировать заливку под @media (prefers-color-scheme: темный), предоставляя вам адаптивные вкладки без экспорта отдельных ночных ресурсов.

SVG — это текст. Вы можете различать изменения favicon в Git, как и любой другой исходный ресурс.

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

Пины Windows, развертывание ссылок Outlook, а некоторые программы чтения RSS полностью игнорируют SVG. Ожидается, что примерно 5 % показов будут использовать пути только для ICO.

ICO также дает предсказуемые пиксели. Сложные фильтры SVG могут отображаться по-разному в разных системах; Резервные варианты растра стабилизируют внешний вид.

Сначала объявите ICO для максимальной совместимости, затем SVG для улучшения:

<link rel="icon" href="/favicon.ico" size="any">

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Соответствующие браузеры предпочитают SVG, если тип и MIME верны. Другие возвращаются к ICO без сломанного символа изображения.

Соедините его с значком apple-touch размером 180×180 PNG, поскольку iOS не использует SVG для значков на главном экране.

Монохромный буквенный знак: SVG с одним <path> и заменой заливки в темном режиме. ICO создан на основе той же формы для ярлыков Windows.

Градиентный логотип: упростить для SVG (только плоская заливка). Сохраняйте маркетинговый градиент на сайте, а не во вкладке 16×16.

Государственный или корпоративный сайт с устаревшими требованиями IE: установите приоритет ICO; добавляйте SVG только после того, как аналитика покажет незначительный трафик IE.

Система дизайна со строгими фирменными цветами: сохраните SVG в репозитории, запустите задание CI для регенерации .ico для каждого тега выпуска.

Могу ли я использовать только SVG? Нет, если вас интересуют ярлыки Windows и неявные выборки .ico.

Поддерживает ли Safari SVG favicon? Safari 15+ на настольном компьютере. Для главного экрана iOS по-прежнему требуется PNG.

Будет ли SVG замедлять первую отрисовку? SVG размером 1–2 КБ ничтожно мал по сравнению с главными изображениями.

Могу ли я встроить растровое изображение в SVG? Можно, но при этом теряется масштабируемость — вместо этого используйте ICO.

SVG favicon невидим в темном режиме: заливка соответствует фону вкладки. Добавьте явные заливки или правила prefers-color-scheme.

Chrome использует ICO, а не SVG: проверьте type="image/svg+xml" и убедитесь, что тип контента сервера — image/svg+xml.

SVG выглядит неровным: вы растрировали сложные фильтры. Упростите пути или используйте ICO для вкладки.

Огромный файл SVG: экспорт с помощью SVGO; удалите метаданные Illustrator и неиспользуемые определения.

Оставьте viewBox квадратным и по центру. Неквадратный почтовый ящик viewBox может непредсказуемо отразиться на круглых или квадратных вкладках.

Предпочитайте простые заливки фильтрам, маскам и встраиваниям иностранных объектов. Полоса контекстов рендеринга Favicon позволяет использовать полностраничные функции SVG.

Встроить все стили. Внешние таблицы стилей могут не загружаться только для запросов favicon.

Перед развертыванием протестируйте правила prefers-color-scheme в светлых и темных настройках ОС на одном и том же компьютере.

Запустите SVGO с консервативными плагинами, чтобы уменьшить размер файла, но сохраните viewBox и данные критического пути без изменений.

Контроль версий favicon.svg, как код приложения. Различие XML превосходит сравнение двоичных файлов ICO в запросах на включение.

Стоимость анализа SVG ничтожна по сравнению с главными изображениями, но огромный экспорт SVG из Illustrator (более 100 КБ) по-прежнему тратит байты на каждой вкладке.

Браузеры кэшируют favicon отдельно от управления кэшем HTTP на HTML. Переименование favicon.svg в favicon-v2.svg приводит к обновлению, когда этого требует маркетинг.

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

Мультиплексирование HTTP/2 означает, что три небольших файла значков не являются проблемой водопада. Отправляйте правильные форматы; не объединяйте SVG и ICO в один файл.

Фавиконки на вкладках являются декоративными — им не нужен замещающий текст в HTML. Значимое имя сайта по-прежнему принадлежит <title>.

Низкоконтрастные метки SVG не подходят для WCAG для пользовательского интерфейса Chrome так же, как и для содержимого страницы. Проверьте контрастность на фонах #fff и #323232.

Товарные знаки, состоящие только из цветов, сбивают с толку пользователей с нарушением цветового зрения. Добавьте четкую форму, а не только изменение оттенка, в силуэт 16×16.

Сохраните favicon.svg в Git. В теге выпуска запустите автономный сценарий или шаг ручного генератора, чтобы создать favicon.ico и зафиксировать двоичные файлы или прикрепить их для развертывания артефакта.

Сбой CI, если favicon.ico старше favicon.svg mtime — ловит забытую регенерацию после настройки логотипа.

Среды предварительной версии должны использовать те же пути к значкам, что и рабочая среда, чтобы поймать ошибки 404 перед объединением.

Документ в руководстве по стилю: SVG — это источник, ICO — сгенерированный артефакт, размеры PNG — цели экспорта.

Укажите минимальную толщину штриха и отступы размером 16×16, чтобы внешние агентства не размещали товарные знаки, не относящиеся к торговой марке.

Включите светлые и темные скриншоты в фирменный PDF-файл. Маркетинговые команды ссылаются на вкладки так же часто, как на фирменные бланки.

Ресурсы версии favicon с тегами semver, соответствующими выпускам продуктов, когда значки меняются при запуске функций.

Проводите ежеквартальные аудиты: если аналитика показывает, что поддержка SVG в вашей аудитории превышает 98 %, все равно сохраняйте ICO — длинный хвост имеет значение для корпоративных установок.

Сначала разверните favicon.ico и убедитесь, что неявные запросы /favicon.ico возвращают 200.

Добавьте favicon.svg с правильным MIME при промежуточной настройке; запустите автоматическую проверку того, что Content-Type имеет значение image/svg+xml.

Используйте в производство, очистите CDN, принудительно обновите три браузера, подтвердите вкладку SVG на Chromium и резервный вариант ICO там, где это ожидалось.

Отслеживайте заявки в службу поддержки в течение одной недели — кластер проблем со значками сразу после ребрендинга, если отдел контроля качества пропустил ярлыки Windows.

Запишите базовые снимки экрана в свой билет на выпуск, чтобы будущие регрессии были очевидны во время проверки кода.