Сравнение форматов favicon: ICO против PNG против SVG
Три формата, три задачи. Используйте .ico для пути /favicon.ico и старых клиентов, PNG для современных браузеров и всех размеров иконок приложений, а SVG для чёткой иконки вкладки, адаптирующейся под тему.
Каждый формат выполняет свою задачу
Единственного идеального формата favicon не существует. Каждый из них закрывает случай, с которым не справляются остальные. Выбрать один и навязывать его повсюду — верный путь к пустым вкладкам и серым квадратам на домашних экранах.
Формат .ico — это контейнер, который хранит несколько размеров в одном файле. Это важно, потому что браузеры и поисковые роботы по-прежнему запрашивают /favicon.ico по умолчанию, а старые клиенты понимают только .ico. Настоящий .ico — это не PNG с переименованным расширением. Переименование файла меняет его имя, а не байты, и большинство клиентов его отвергнут.
PNG — это рабочая лошадка. Его читает каждый современный браузер, и каждый слот иконки приложения и манифеста (16, 32, 180, 192, 512) — это PNG. SVG — новичок: единственный векторный файл, который остаётся чётким при любом размере и может менять цвет в тёмной теме с помощью media-запроса внутри самого файла.
ICO против PNG против SVG
| Формат | Лучше всего для | На что обратить внимание |
|---|---|---|
| .ico | Путь /favicon.ico и старые браузеры или роботы, которые читают только .ico | Должен быть настоящим многоразмерным контейнером (16 + 32 + 48), а не переименованным PNG. Не используйте его для иконок приложений. |
| PNG | Вкладки современных браузеров и все размеры иконок приложений и манифеста (16, 32, 180, 192, 512) | Это растр, поэтому каждый размер — это отдельный файл. Вам всё равно нужны все размеры, один PNG не покрывает их все. |
| SVG | Единственная чёткая иконка вкладки, которая масштабируется до любого размера и может менять цвет в тёмной теме | Недопустим по пути /favicon.ico и не используется на домашних экранах iOS или Android. Держите его простым, эффекты могут отображаться по-разному в разных браузерах. |
Как они уживаются в head
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Браузер, который читает SVG, использует favicon.svg. Всё остальное откатывается к PNG и .ico. apple-touch-icon остаётся PNG, потому что iOS игнорирует здесь SVG.
Частые вопросы
Можно ли просто переименовать PNG в favicon.ico?
Нет. .ico — это собственный формат-контейнер, а не PNG с другим расширением. Некоторые браузеры терпят файл с неверной меткой, но многие — нет, а роботы строже. Сгенерируйте настоящий многоразмерный .ico.
Нужен ли мне favicon.ico, если у меня есть PNG и SVG?
Да, оставьте один. Браузеры, читалки лент и поисковые роботы по-прежнему запрашивают /favicon.ico вообще без тега. Файл по этому пути — страховка на случай, когда ваши теги <link> остаются незамеченными.
SVG-favicon лучше, чем PNG?
Для иконки вкладки — возможно, потому что один файл остаётся чётким при любом размере и может адаптироваться к тёмной теме. Он не заменяет PNG-иконки приложений для домашних экранов, поэтому используйте оба.
Какой формат использовать для иконки манифеста 512x512?
PNG. Массив icons манифеста ожидает растровые PNG в 192 и 512, включая maskable. SVG — это не тот формат, который Android использует для иконок установленных приложений.