Размеры фавиконок и мультиразрешение ICO: 16, 32, 48 px и дальше
16, 32, 48, 64, 128, 256 — список размеров иконок легко превращается в кашу из цифр. Какие из них действительно нужны, а какие — наследие прошлого? Почему ICO хранит несколько разрешений сразу и сколько версий разумно класть в один файл? Разбираем каждый размер по делу: где он используется и стоит ли он места в вашей фавиконке.
Почему размеров много: идея мультиразрешения
Иконку показывают в десятке разных мест, и везде она нужна своего размера: крошечная во вкладке, побольше в закладках, ещё крупнее в проводнике. Казалось бы, можно взять одну большую картинку и уменьшать по мере надобности. Но автоматическое уменьшение убивает мелкие иконки: тонкие линии слипаются, края становятся грязными, текст превращается в пятно.
Решение — мультиразрешение. Внутри одного файла ICO хранится несколько готовых версий, каждая нарисована под свой размер. Систему это избавляет от уменьшения на лету: она просто берёт подходящую картинку из набора. Как именно устроен этот контейнер, мы разобрали в статье «Что такое ICO».
Коротко
Размеры существуют не «на всякий случай», а потому что мелкую иконку нужно рисовать отдельно, упрощая детали. ICO даёт хранить эти отдельные версии в одном файле.
Каждый размер и где он живёт
Чтобы не гадать, вот карта размеров и их реальных мест применения:
| Размер | Где используется | Нужен? |
|---|---|---|
| 16×16 | Вкладка браузера, строка адреса, история | Обязательно |
| 32×32 | Закладки, дисплеи высокой плотности, панель задач | Обязательно |
| 48×48 | Проводник Windows, плитки среднего размера | Желательно |
| 64×64 | Крупные значки в проводнике | Опционально |
| 128×128 | Иконки приложений, предпросмотр | Опционально |
| 256×256 | Крупные плитки, иконки программ | Для приложений |
Вывод из таблицы прост: для фавиконки сайта ключевые размеры — это 16, 32 и 48. Всё, что крупнее, относится скорее к иконкам приложений Windows, чем к вкладкам браузера.
Какой набор класть в favicon.ico
Соблазн запихнуть в ICO все размеры подряд понятен, но вреден: файл раздувается, а пользы ноль. Разумный современный набор внутри favicon.ico:
Базовый
Вкладка и адресная строка. Без него никуда — это «лицо» во вкладке.
Чёткий
Закладки и экраны Retina. Браузер любит брать именно его.
Крупный
Проводник Windows и масштабирование интерфейса.
Этих трёх размеров достаточно для подавляющего большинства сайтов. Всё остальное — крупные PNG для apple-touch-icon и манифеста — хранят отдельными файлами, а не внутри ICO. Подробнее о полном наборе — в гайде «Как сделать favicon».
Нужен ли 256×256
Размер 256×256 — особенный: именно ради него в ICO разрешили хранить сжатый PNG вместо несжатого BMP, чтобы файл не раздувался. Но нужен ли он в фавиконке?
Чаще всего — нет. Во вкладках, закладках и истории работают мелкие размеры; крупная картинка там просто не показывается. 256×256 по-настоящему нужен для иконок приложений и больших плиток Windows. Если вы делаете именно favicon для сайта, не тащите 256 внутрь ICO — лучше отдайте крупное разрешение отдельным PNG для apple-touch-icon и манифеста.
Правило экономии
Каждый лишний размер внутри ICO — это вес, который грузится на каждой странице. Для сайта три размера (16/32/48) — золотая середина: чётко везде и без лишних килобайт.
Retina, плотность и apple-touch-icon
На экранах высокой плотности (Retina и подобных) один логический пиксель состоит из нескольких физических. Поэтому браузер на таком экране для «16-пиксельной» вкладки нередко берёт версию 32×32 — чтобы иконка оставалась резкой. Это ещё одна причина держать в ICO и 16, и 32: они закрывают обычные и плотные дисплеи.
Отдельная история — apple-touch-icon. Это не часть ICO, а отдельный PNG, который iOS использует для иконки сайта на домашнем экране. Современный рекомендуемый размер — 180×180. Раньше делали целый зоопарк размеров под разные модели, но сегодня одного 180×180 достаточно.
Как собрать мультиразмерный ICO
Собирать каждый размер вручную не нужно. Подготовьте один крупный квадратный исходник — и конвертер сделает остальное:
Исходник 256×256
Квадратный PNG с прозрачным фоном и упрощённым, читаемым логотипом.
Конвертация в ICO
Конвертер сам создаст внутри версии 16, 32 и 48.
Проверка в мелком
Уменьшите до 16 px и убедитесь, что силуэт читается.
Соберите мультиразмерный ICO
Загрузите крупный PNG — конвертер FormatZ упакует 16, 32 и 48 в один favicon.ico. Бесплатно, в браузере, без регистрации.
Хотите наоборот разобрать чужой ICO на размеры и посмотреть, что внутри? Поможет конвертер ICO в PNG. А какой формат вообще выбрать для иконки — ICO, PNG или SVG — разбирали в отдельном сравнении.
