Форматы файлов
Что такое ICO? Файлы иконок и фавиконки
ICO - формат иконок Windows, который хранит несколько размеров в одном файле. Разбираем его устройство, историю фавиконки и то, какие размеры нужны сегодня.
Автор: Hemen Dönüştür Editör EkibiОпубликовано: 7 мин чтения
ICO - формат, который Windows использует для иконок программ и папок, а веб для маленькой иконки сайта во вкладке браузера (фавиконки). От других форматов изображений его отличает то, что один файл может содержать несколько размеров одной и той же иконки. В этой статье расскажем о внутреннем устройстве файла ICO, о том, как он менялся от версии к версии Windows, об истории фавиконки, о том, какие размеры нужны сегодня, и о том, как правильно создавать файлы ICO.
Что такое ICO?
ICO (расширение .ico) - формат-контейнер, который Microsoft определила для ресурсов иконок. Файл ICO начинается с "каталога иконок", где каждое изображение в файле (например, 16x16, 32x32 и 48x48 пикселей) указано отдельной записью. Затем Windows или браузер выбирают размер, который лучше всего подходит для места, где показывается иконка.
Официальный MIME-тип, зарегистрированный в IANA, - image/vnd.microsoft.icon, но программы Microsoft и многие серверы по-прежнему используют image/x-icon. Формат курсоров мыши CUR почти идентичен; в поле типа каталога у него стоит 2 вместо 1, и в нем хранится точка нажатия курсора (hotspot).
История: от иконок Windows к фавиконке
- Windows 1.0: иконки были монохромными.
- Windows 3.0: появилась знакомая нам сегодня структура с каталогом, хранящая несколько изображений.
- 1995 год: статья Джона Хорника (John Hornick) "Icons" от Microsoft подробно описала устройство ICO и советовала разработчикам включать как минимум изображения 16x16 (16 цветов), 32x32 (16 цветов) и 48x48 (256 цветов).
- Март 1999 года: Internet Explorer 5 стал первым браузером с поддержкой фавиконок. Файл
favicon.icoв корне сайта показывался в избранном и в адресной строке. - Windows XP: 32-битные изображения получили 8-битный альфа-канал, что сделало возможными мягкие полупрозрачные края.
- Windows Vista: добавились изображения 256x256 и сжатие PNG внутри ICO.
- 2003 год: MIME-тип
image/vnd.microsoft.iconбыл подан в IANA третьей стороной.
Устройство файла ICO
Каталог иконок (ICONDIR)
Файл начинается с 6-байтового заголовка: зарезервированное поле (0), тип (1 для иконок, 2 для курсоров) и количество изображений. Далее для каждого изображения следует 16-байтовая запись каталога.
Запись каталога (ICONDIRENTRY)
| Поле | Значение |
|---|---|
| bWidth, bHeight | Ширина и высота (по 1 байту). Значение 0 означает 256 пикселей. |
| bColorCount | Число цветов палитры (0 для 8 бит и выше) |
| wPlanes, wBitCount | Цветовые плоскости и количество бит на пиксель |
| dwBytesInRes | Размер данных изображения в байтах |
| dwImageOffset | Место начала данных изображения в файле |
Поскольку поля размера занимают один байт, изображение внутри ICO может быть не больше 256x256 пикселей.
Данные изображения: BMP или PNG
В классическом ICO каждое изображение - это BMP без файлового заголовка (DIB). Согласно статье Хорника, он содержит цветное изображение (маску XOR), за которым следует 1-битная маска прозрачности (маска AND), поэтому высота в заголовке - это суммарная высота обеих масок, то есть удвоенная реальная высота. Начиная с Windows XP 32-битные изображения несут альфа-канал прямо в данных пикселей.
Начиная с Windows Vista запись может содержать вместо BMP полноценный файл PNG. Встраивание PNG, особенно для размера 256x256, заметно уменьшает файл. MDN отмечает, что до Vista PNG внутри ICO не поддерживался и в старых программах может вызывать проблемы, но современные браузеры и версии Windows читают оба варианта.
Какие размеры нужны?
Иконки приложений Windows
Согласно актуальным рекомендациям Microsoft по иконкам приложений, приложение Win32 должно включать как минимум 16x16, 24x24, 32x32, 48x48 и 256x256. Если точного совпадения нет, Windows уменьшает ближайший больший размер; при наличии изображения 256 пикселей иконка только уменьшается и никогда не растягивается. Например, при масштабе 100% строка заголовка и контекстные меню используют 16 пикселей, а панель задач 24; при 200% это уже 32 и 48.
Фавиконки для сайтов
В вебе все устроено иначе. По стандарту HTML, если на странице нет ссылки rel="icon", браузеры могут запросить /favicon.ico из корня сайта. Поэтому держать favicon.ico в корне по-прежнему полезно, но одного его недостаточно:
- Google Поиск требует квадратную (1:1) фавиконку размером не менее 8x8 пикселей и рекомендует размер больше 48x48, чтобы она хорошо выглядела на разных поверхностях.
- Домашние экраны iPhone и iPad используют
apple-touch-iconразмером 180x180. - Android и PWA ожидают в манифесте веб-приложения иконки 192 и 512 пикселей, а также "maskable" версию для адаптивных иконок.
- Современные браузеры поддерживают и SVG-фавиконки; один векторный файл покрывает все размеры.
На практике 16, 32 и 48 пикселей внутри favicon.ico покрывают настольные браузеры и старые системы, а большие размеры поставляются отдельными файлами PNG.
Поддержка в системах, браузерах и программах
Windows изначально читает и записывает ICO; с ним работают Проводник, ярлыки и рабочий стол. По данным MDN, Chrome, Edge, Firefox, Opera и Safari отображают файлы ICO. macOS для иконок приложений использует собственный формат ICNS, но Просмотр открывает ICO. Редакторы вроде GIMP открывают ICO как многослойный файл, по слою на каждый размер. MDN не рекомендует ICO для обычного веб-контента и отмечает, что фавиконки перешли на PNG с элементом <link>.
Сильные и слабые стороны
| Сильные стороны | Слабые стороны |
|---|---|
| Несколько размеров и глубин цвета в одном файле | Максимум 256x256 пикселей |
| Повсеместная поддержка в Windows | В вебе не применяется нигде, кроме фавиконок |
| Альфа-канал и сжатие PNG (Vista и новее) | Старые записи на основе BMP большие и громоздкие |
| Браузеры сами ищут favicon.ico в корне сайта | Нужен специальный инструмент; не каждая программа умеет его сохранять |
Частые проблемы и их решение
Разве недостаточно переименовать PNG в .ico?
Некоторые браузеры это допускают, но настоящим ICO такой файл не будет: в нем нет каталога иконок, и Windows не примет его как иконку. Правильный путь - конвертировать изображение в настоящий ICO. Наши инструменты PNG в ICO и JPG в ICO всегда записывают квадраты 16, 32 и 48 пикселей и добавляют 64, 128 и 256, если изображение достаточно большое. Каждый размер встраивается как PNG, поэтому прозрачность сохраняется.
Фавиконка размытая или неразборчивая
Тонкие линии и мелкий текст в 16 пикселях пропадают. Используйте жирный, контрастный и простой знак; при необходимости возьмите только символ из логотипа. Лучший результат дает квадратный исходник не меньше 256x256, а в идеале 512x512 пикселей.
Неквадратное изображение выглядит сплющенным или растянутым
Иконки квадратные. Наши инструменты никогда не растягивают изображение: они размещают его по центру квадрата с сохранением пропорций и оставляют края прозрачными. Для идеального квадрата сначала вырежьте квадратный фрагмент с помощью обрезки изображения.
Новая фавиконка не появляется
Браузеры долго хранят фавиконки в кэше. Обычно помогает переименование файла или добавление параметра версии (/favicon.ico?v=2), а также проверка того, что сервер отдает правильный MIME-тип. Иконка в результатах Google Поиска обновится только после повторного сканирования сайта.
Windows все еще показывает старую иконку
Windows хранит иконки в отдельном кэше. Часто достаточно пересобрать приложение и заново создать ярлык или выйти из системы и войти снова.
Советы по конвертации
- Для сайта одного ICO мало: генератор фавиконок за один раз создает favicon.ico (16, 32 и 48 пикселей), favicon-48x48.png, apple-touch-icon.png (180 пикселей), icon-192.png, icon-512.png, maskable-иконку icon-512-maskable.png и site.webmanifest, а если исходник в SVG, то еще и icon.svg. Он также дает фрагмент кода для вставки в
<head>страницы. - Иконке Apple нужен непрозрачный фон: iOS показывает прозрачные области черными и сама скругляет углы, поэтому генератор фавиконок заливает apple-touch-icon выбранным вами цветом фона.
- Если логотип в SVG: отрисуйте большой PNG с помощью SVG в PNG и конвертируйте его в ICO или передайте SVG прямо в генератор фавиконок.
Наши инструменты для ICO и фавиконок работают в браузере; изображение не загружается на сервер и не покидает ваше устройство.
Часто задаваемые вопросы
Каков максимальный размер изображения в ICO?
Поля ширины и высоты в записи каталога занимают по одному байту, а 0 означает 256. Поэтому одно изображение внутри ICO может быть не больше 256x256 пикселей.
Что использовать для фавиконки: ICO или PNG?
И то, и другое. favicon.ico в корне с размерами 16, 32 и 48 пикселей обслуживает старые браузеры и автоматические запросы; иконки PNG (и при желании SVG) объявите тегами <link> для современных браузеров и мобильных устройств.
Поддерживает ли ICO прозрачность?
Да. Старые ICO используют 1-битную маску, у 32-битных изображений начиная с Windows XP есть полноценный альфа-канал, а встроенный PNG передает прозрачность начиная с Vista.
Как конвертировать файл ICO в PNG?
Добавьте ICO в конвертер изображений и выберите PNG как целевой формат. Если в файле несколько размеров, используется самый большой.
Используются ли файлы ICO на Mac?
Для иконок приложений macOS использует формат ICNS. Для сайтов favicon.ico и иконки PNG работают в браузерах на любой операционной системе.
