ICO против PNG для favicon: какой формат выбрать?
Используйте PNG как основной favicon и держите favicon.ico в корне сайта как запасной вариант. PNG даёт полноценный 24-битный цвет и настоящий альфа-канал, лучше сжимается, и любой современный браузер принимает его из тега <link>. Единственное оставшееся преимущество ICO в том, что он упаковывает несколько размеров в один файл и является тем, что клиенты запрашивают по /favicon.ico, когда тега нет. Отдать оба формата стоит одного лишнего файла и полностью снимает компромисс.
Два формата
ICO — это контейнер иконок Windows, и форматом favicon он стал случайно: Internet Explorer запрашивал /favicon.ico, и все начали его отдавать. Его определяющее свойство в том, что один файл .ico содержит несколько битмапов разного размера, а потребитель выбирает один.
PNG — это обычный веб-формат изображений с сжатием без потерь и полным альфа-каналом. Он содержит ровно одно изображение одного размера, так что покрытие нескольких размеров означает несколько файлов и несколько тегов <link> — а именно этого современные браузеры и ожидают.
К чему тянуться
ICO
Запасной вариант и запросы по пути
- Один файл несёт битмапы 16, 32 и 48 пикселей вместе
- Запрашивается по /favicon.ico браузерами, краулерами и агрегаторами лент без всякого тега <link>
- Понятен любому когда-либо выпущенному браузеру, включая очень старые
- Родной формат для ярлыков рабочего стола Windows
- Неудобен в создании и просмотре; большинство инструментов относятся к нему как к артефакту сборки
PNG
Start hereВаш основной favicon
- 24-битный цвет, так что градиенты и фотографические знаки выживают
- Полный альфа-канал, так что края чисто сглаживаются на любом цвете вкладки
- Меньше эквивалентного ICO при том же качестве
- Поддерживается любым современным браузером через link rel="icon"
- Формат, который манифесты Android и PWA ожидают для иконок установки
Техническое сравнение
| Свойство | ICO | PNG |
|---|---|---|
| Глубина цвета | 8-битная палитра в классических файлах; 32 бита в современных | 24-битный цвет плюс 8-битная альфа |
| Прозрачность | 1-битная маска в классических файлах; альфа-канал в 32-битных записях | Полный альфа-канал |
| Размеров на файл | Несколько, обычно 16, 32 и 48 | Один |
| Сжатие | Несжатые битмапы или записи, сжатые по PNG | Без потерь, DEFLATE |
| Запрашивается без тега link | Да, по /favicon.ico | Нет |
Что положить в <head>
<!-- PNG first: modern browsers pick these -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- ICO fallback; also served from /favicon.ico for bare requests -->
<link rel="icon" href="/favicon.ico" sizes="any">Объявить оба — это не конфликт. Браузер читает каждую ссылку на иконку, сопоставляет по типу и размеру и использует ICO только если предпочтёт его или если PNG не загрузятся.
Частые вопросы об ICO против PNG
Можно ли вообще отказаться от favicon.ico?
Можно, и современные браузеры будут в порядке, пока присутствуют ваши теги <link> на PNG. Сломается всё, что запрашивает /favicon.ico по пути, не разбирая ваш HTML (краулеры, агрегаторы лент, боты превью ссылок, некоторая аналитика) — они получат 404 и ничего не покажут.
Какой формат победит, если объявить оба?
Решает браузер, опираясь на атрибуты type и sizes каждой ссылки. На практике современные браузеры берут PNG, который лучше всего подходит по нужному размеру, и откатываются к ICO, если больше ничего не подходит.
ICO хуже по качеству, чем PNG?
Не по своей природе. 32-битная запись ICO несёт тот же цвет и альфу, что и PNG, а многие файлы ICO буквально содержат данные PNG. Жалобы на качество идут от старых 8-битных ICO с палитрой и 1-битной прозрачностью, которые дают жёсткие рваные края.