CodeKitHubЩо це за інструмент?
favicon.ico — це не просто маленьке зображення, а формат-контейнер, що може містити кілька розмірів однієї іконки в одному файлі, тож браузер, панель завдань чи панель закладок можуть обрати ту роздільну здатність, яка виглядатиме найчіткіше саме там, де вона показується. Перейменування PNG у favicon.ico такого результату не дає: це одне зображення з неправильним розширенням файлу, і хоча деякі браузери це терплять, чимало інструментів, краулерів і старіших браузерів, що читають сирі байти, очікують справжню структуру ICO-контейнера і дадуть збій або відкотяться до порожньої іконки.
Цей інструмент будує справжній ICO-контейнер: він рендерить ваш SVG у 16×16, 32×32 та 48×48, кодує кожен розмір як PNG всередині, і пакує всі три в один валідний favicon.ico, використовуючи той самий формат PNG-у-ICO, який підтримують усі браузери й ОС ще з часів Windows Vista. Разом з ним ви отримуєте окремі PNG-файли розміром 180×180 (розмір, який iOS використовує для іконки при додаванні сайту на головний екран) та 192×192 / 512×512 (розміри, які Android і запити на встановлення PWA беруть із вашого маніфесту веб-застосунку).
Навіщо його використовувати?
- Створює справді валідний багаторозмірний favicon.ico, а не перейменований PNG.
- Покриває кожен розмір іконки, потрібний реальному розгортанню, за один прохід: 16, 32, 180, 192, 512px.
- Готовий до вставки HTML для <head> — без здогадок щодо атрибутів rel/sizes/type.
- Неквадратні SVG центруються на прозорому квадраті, а не розтягуються.
- Усе рендериться локально у вашому браузері; SVG ніколи не завантажується на сервер.
Як користуватися
- Клацніть на поле або перетягніть у нього файл логотипу SVG.
- Інструмент автоматично рендерить його в кожному розмірі фавікона — жодних налаштувань не потрібно.
- Завантажте favicon.ico для кореня вашого сайту, а також окремі PNG-іконки.
- Скопіюйте HTML-фрагмент і вставте його в <head> вашої сторінки.
Приклад
Введення
logo.svg — знак компанії, вектор на 3 КБРезультат
favicon.ico (16/32/48px об'єднано), плюс favicon-16.png, favicon-32.png, apple-touch-icon.png (180px), icon-192.png, icon-512.pngОдин SVG на вході, кожен файл іконки, потрібний реальному розгортанню, — на виході.
Який розмір іконки де використовується
| Файл | Розмір | Використовується для |
|---|---|---|
| favicon.ico | 16/32/48px (об'єднано) | Вкладка браузера, панель закладок, панель завдань |
| favicon-16.png / favicon-32.png | 16×16 / 32×32 | Резерв для браузерів, що надають перевагу PNG-фавіконам |
| apple-touch-icon.png | 180×180 | Іконка головного екрана iOS при додаванні сайту на головний екран |
| icon-192.png | 192×192 | Іконка головного екрана Android, маніфест веб-застосунку |
| icon-512.png | 512×512 | Запит на встановлення PWA, іконка заставки Android |
Чому важливе саме джерело SVG
Оскільки SVG зберігає фігури як математику, а не пікселі, свіжий рендеринг у 16px і в 512px обидва починаються з тих самих точних даних шляхів — на великому кінці немає артефактів апскейлу, а на малому немає вимушених здогадок пікселізації, на які інструменту довелося б піти на компроміс. Якщо у вас є лише PNG-логотип, цей інструмент не допоможе; спершу конвертуйте чи відтворіть логотип як SVG, оскільки масштабування маленького PNG до 512px просто дало б розмитий результат.
Часті запитання
Чому б просто не перейменувати PNG у favicon.ico?
Файл .ico має власний бінарний формат-контейнер (заголовок ICONDIR, що описує, скільки зображень він містить, і запис директорії для кожного зображення) — PNG-файл, перейменований у .ico, залишається просто PNG з неправильним розширенням усередині. Більшість сучасних браузерів це терпить і все одно відрендерить, але цей інструмент будує справжній ICO-контейнер із трьома реальними роздільними здатностями, для чого формат і був створений, і чого очікують суворіші засоби читання.
Навіщо мені PNG-іконки, якщо в мене вже є favicon.ico?
favicon.ico покриває лише класичний випадок вкладки браузера чи закладки. 180×180 PNG — це те, що iOS використовує, коли користувач додає ваш сайт на головний екран (apple-touch-icon), а 192×192 / 512×512 PNG — це те, що Android і запити на встановлення PWA беруть із маніфесту вашого веб-застосунку. Без них іконка на головному екрані телефону відкотиться до загального скріншота чи порожнього квадрата.
Мій логотип не квадратний — що з ним станеться?
Він центрується на прозорому квадраті в кожному цільовому розмірі, а не розтягується, тож широкий чи високий логотип зберігає правильні пропорції замість того, щоб бути стиснутим у квадрат.
Куди покласти завантажені файли?
Розмістіть favicon.ico, apple-touch-icon.png, icon-192.png та icon-512.png у кореневій папці вашого сайту (поруч з index.html), а потім вставте згенеровані теги <link> у <head> вашої сторінки.
Чи завантажується мій SVG кудись?
Ні. SVG рендериться на локальних елементах <canvas>, а файли ICO/PNG збираються у вашому браузері. Нічого не надсилається на сервер.