Для чего нужен каждый формат
Favicon — это не один файл. Браузеры, операционные системы и сервисы закладок ищут каждый свой, а стандарт HTML позволяет странице объявить несколько файлов и оставляет выбор за браузером.
| Файл | Формат | Для чего |
|---|---|---|
favicon.ico |
ICO, несколько растровых изображений в одном файле | Запасной вариант: если на странице нет ссылки на иконку, браузер может запросить /favicon.ico в корне сайта. В этом пакете в нем изображения 16, 32 и 48 px. |
favicon.svg |
SVG | Один масштабируемый файл для браузеров, которые поддерживают SVG-favicon. Может сам переключать светлые и темные цвета. |
favicon-16x16.png, favicon-32x32.png |
PNG | Растровые копии иконки вкладки — для конструктора сайтов или сервиса, который просит favicon в PNG. |
apple-touch-icon.png |
PNG, 180 × 180 px | Главный экран iPhone и iPad, когда сайт добавляют туда. |
site.webmanifest |
JSON | Название, цвета и иконки для устанавливаемых веб-приложений (см. руководство по maskable-иконкам). |
ICO — самый старый формат, и до сих пор его читают шире всего. Стандарт HTML описывает запрос /favicon.ico как то, что браузер может сделать, если страница не объявила иконку, поэтому считайте его страховкой и всё равно подключайте явно. MDN отмечает, что файл ICO хранит несколько размеров, — поэтому один файл покрывает 16, 32 и 48 px.
SVG — единственный формат, который остается четким в любом размере и при любой плотности пикселей. Блок <style> внутри SVG может переключать цвета через prefers-color-scheme, и темный знак не пропадет на темной панели вкладок. Сервер должен отдавать его с типом image/svg+xml: по данным Can I use, браузерам на Chromium и Firefox этот тип обязателен.
PNG-favicon — обычные растровые картинки, их, как правило, подключают с атрибутом sizes. Стандарт называет sizes рекомендательным: браузер может выбрать по нему самый подходящий файл, но не обязан. Это работает в обе стороны, как показывает следующий раздел.
Какие браузеры что используют
Поддержка SVG-favicon по данным Can I use на 28 сентября 2026 года: Chrome и Edge с версии 80, Firefox с 41, Opera с 67 и Safari с 26.0 — и на macOS, и на iOS. Safari 18 и старше SVG-favicon не используют и полагаются на файлы PNG и ICO. Команда WebKit объявила об изменении в посте о выходе Safari 26.0 в сентябре 2025 года. У тех, кто всё еще на старом Safari, по-прежнему растровые иконки, — поэтому SVG-favicon никогда их не заменяет.
Если страница объявляет несколько иконок, по стандарту HTML браузер выбирает самую подходящую, а если подходят несколько одинаково — побеждает последняя объявленная. Если файл оказался непригодным, например в нечитаемом формате, браузер переходит к следующему. Что значит «самая подходящая», решает сам браузер: тот, что выбирает по объявленному размеру, может предпочесть PNG с sizes="32x32" SVG без размера, в каком бы порядке они ни шли. Поэтому в фрагменте ниже PNG с размерами не подключены вовсе: растровые размеры покрывает ICO, а SVG идет после него.
Одна деталь взята из практики, а не от разработчиков браузеров. Статья Evil Martians о favicon советует указывать sizes="32x32" у ссылки на ICO, «чтобы обойти баг Chrome, из-за которого он выбирает файл ICO вместо SVG»; в журнале изменений статьи сказано, что по этой причине в июле 2023 года sizes="any" заменили. Ссылки на баг-репорт Chromium в статье нет, и мы его тоже не нашли, так что считайте это опытом практиков. Генератор следует этому совету. Вреда нет: в ICO действительно есть изображение 32 px.
Apple touch icon. Архивное руководство Apple Safari Web Content Guide описывает <link rel="apple-touch-icon"> и указывает 180 × 180 px для iPhone с Retina-экраном. MDN добавляет, что для иконок на главном экране iOS не использует обычные ссылки rel="icon". Что происходит с прозрачными пикселями, в документации Apple не сказано; в ответе на форумах разработчиков Apple (от другого разработчика, не от Apple) говорится, что они становятся черными. Поэтому генератор всегда делает этот файл непрозрачным — на выбранном вами цвете фона.
Цвет темы — самая ненадежная часть. По данным Can I use, Firefox не поддерживает <meta name="theme-color">, а Chrome на компьютере использует этот цвет только для установленных веб-приложений. И Can I use, и MDN пишут, что с Safari 26 он применяется только к установленным веб-приложениям. В деталях для Chrome на Android и Safari на iOS 26 источники расходятся. Добавьте тег, но не стройте на нем дизайн.
Старая ссылка Apple mask-icon для закрепленных вкладок Safari всё еще встречается в архивной документации. Официального сообщения о ее отмене мы не нашли, но и требования ее использовать тоже. В этот пакет она не входит.
Минимальный набор, который стоит отдавать
Для сайта с векторной графикой подключите favicon.ico, favicon.svg и apple-touch-icon.png, а если сайт должен устанавливаться — еще манифест с иконками 192 и 512 px. На таком наборе останавливается и статья Evil Martians. PNG-favicon могут лежать на сервере для сервисов, которые их просят, без тега link. Если логотип сайта существует только в растре, SVG не нужен: PNG, вложенный в файл SVG, остается растром и ничего не выигрывает. Чтобы получить SVG-favicon, сначала переведите изображение в настоящие векторные контуры.
Фрагмент HTML
Эти теги генератор записывает в favicon.html для примера пакета ниже — с файлами в корне сайта:
<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="/site.webmanifest">
<meta name="theme-color" content="#0a2d8f">
Если файлы лежат в папке вроде /assets/icons/, укажите ее как префикс пути в генераторе favicon — и все href изменятся вместе с ней; а favicon.ico еще и скопируйте в корень сайта, где браузеры ищут его на страницах без ссылки на иконку. Из исходника в PNG, JPG или WebP получаются те же теги, только без строки с SVG.
Настоящий пример для скачивания
Мы прогнали собственный знак этого сайта (SVG из нашего репозитория, а не чья-то загрузка) через генератор favicon с названием «png2svg.art», цветом темы #0a2d8f, фоном #e8efff и отступом 8 %. Потом ничего не правили: это ровно те файлы, которые делает инструмент.
Favicon 32 px в реальном размере: 
Apple touch icon 180 px, непрозрачный, на цвете фона:
Скачайте пример пакета целиком (ZIP): favicon.svg, favicon.ico, оба PNG-favicon, Apple touch icon, четыре иконки приложения, site.webmanifest, favicon.html и README.
Проверьте свои favicon
После загрузки откройте страницу в режиме инкогнито: браузеры долго хранят favicon в кэше, и старая иконка в обычном окне ничего не доказывает. На вкладке сети в инструментах разработчика проверьте, что favicon.svg отдается с типом image/svg+xml и что каждый файл отвечает кодом 200. Посмотрите на вкладку в светлой и темной теме, а чтобы проверить touch icon, добавьте страницу на главный экран телефона.