Формати файлів
Що таке 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 рік: стаття Джона Горніка "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, запис може також бути повноцінним файлом PNG замість BMP. Вбудовування PNG, особливо для розміру 256x256, значно зменшує файл. MDN зазначає, що PNG усередині ICO не підтримувався до Vista і може спричиняти проблеми в старих програмах, але актуальні браузери та версії 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, але Перегляд (Preview) відкриває 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, маскувальну icon-512-maskable.png і site.webmanifest, а також icon.svg, якщо джерело у форматі 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 працюють у браузерах на будь-якій операційній системі.
Джерела
- Microsoft Learn (архів): Icons, John Hornick, 1995
- Microsoft Learn: Construct your Windows app's icon
- WHATWG HTML Standard: тип посилання "icon"
- Google Search Central: Define a favicon to show in search results
- MDN: посібник із типів і форматів файлів зображень
- Вікіпедія: ICO (file format)
- Вікіпедія: Favicon
