Формат ICO — иконки Windows и фавиконы
Формат ICO: несколько размеров в одном файле, рекомендуемые размеры Windows (16, 32, 48, 256 px), PNG-сжатие, ICO для фавикона и создание ICO из PNG.
ICO — формат, в котором Windows хранит иконки программ, файлов и ярлыков. Официальный медиатип, зарегистрированный в IANA, — image/vnd.microsoft.icon, но на практике шире распространён image/x-icon (MDN). Главное отличие от обычных форматов изображений — в одном файле хранятся изображения нескольких размеров. Windows выбирает самый подходящий размер в зависимости от места показа: панели задач, списка в Проводнике, режима крупных значков.
Структура
Файл ICO начинается с короткого заголовка и «списка изображений (каталога)». В каждой записи списка указаны ширина и высота, число цветов и расположение данных, а за списком идут сами изображения. Каждое изображение хранится одним из двух способов.
- Формат BMP (DIB): традиционный способ. Вместе с цветовыми данными хранится 1-битная AND-маска (прозрачен пиксель или нет), а 32-битные изображения передают мягкую прозрачность альфа-каналом. Заголовок файла (
BM) при этом не включается. - Формат PNG: поддерживается начиная с Windows Vista. Позволяет хранить крупные иконки при малом объёме.
Разбор заголовка
Первые 6 байт файла ICO — зарезервированное значение (0), тип (1 = иконка, 2 = курсор) и число изображений в файле. Далее для каждого изображения идёт запись длиной 16 байт с шириной и высотой, числом цветов, размером и смещением данных. Поля ширины и высоты занимают 1 байт и вмещают максимум 255, поэтому действует правило: 256 пикселей записывается как 0. Файлы курсоров (.cur) с той же структурой вместо полей цветовых плоскостей и разрядности хранят координаты точки клика (hotspot).
Рекомендуемые размеры Windows
Руководство Microsoft по дизайну иконок рекомендует включать в иконку приложения все размеры 16×16, 32×32, 48×48 и 256×256. Иконки 256×256 появились в Vista, и этот крупный размер обычно хранится со сжатием PNG. Маленькие размеры получаются чётче, если не просто уменьшать большое изображение, а отдельно дорабатывать их: делать линии толще и убирать мелкие детали.
Windows в зависимости от масштаба экрана (настройки DPI) и режима отображения Проводника выбирает из файла ближайший размер, а недостающие получает масштабированием. Поэтому, если включить все часто используемые размеры, иконка будет выглядеть чёткой на любом экране. Во многих местах, например во вкладке браузера для фавикона, иконка показывается в 16×16, так что самый маленький размер особенно важен.
Фавиконы и ICO
Фавикон сайта долгое время отдавался как /favicon.ico в корне сайта, и все основные браузеры это поддерживают. Сейчас рекомендуется указывать фавиконы PNG или SVG через <link rel="icon"> (MDN), но есть программы, которые запрашивают /favicon.ico напрямую без тега ссылки, поэтому многие сайты держат ICO параллельно.
Центр Google Поиска требует, чтобы фавикон в результатах поиска был квадратным (1:1) и не меньше 8×8 пикселей, а для хорошего вида на разных экранах рекомендует размер больше 48×48 пикселей. Среди поддерживаемых форматов явно указаны ICO, PNG, GIF, JPEG, BMP и другие.
На что обратить внимание при конвертации
- Используйте квадратный исходник. Прямоугольное изображение растянется или получит поля. При необходимости сначала обрежьте его до 1:1 инструментом обрезки.
- Если взять за исходник PNG с прозрачным фоном, углы иконки будут естественными. У исходника в JPG останется белый квадратный фон.
- В очень маленьком размере вроде 16×16 текст не читается, поэтому лучше оставить только ключевую фигуру логотипа.
- При конвертации PNG в ICO можно поместить несколько размеров в один файл.
- Проводник Windows кэширует иконки: если после замены иконки виден старый вид, подождите обновления кэша или переименуйте файл для проверки.
Попробовать сейчас