SEO
Favicon Generator
Завантажити зображення й отримати повний набір favicon (16–512px, .ico, web-маніфест) та готовий HTML-код для <head>.
До архіву входять усі PNG, favicon.ico і site.webmanifest.
Сучасні браузери й ОС очікують не один файл favicon.ico, а цілий набір іконок різних розмірів — для вкладки браузера, закладок, домашнього екрана iOS/Android, web-маніфесту PWA. Інструмент генерує весь цей набір з одного завантаженого зображення.
Як користуватися
- Завантажте вихідне зображення (бажано квадратне, від 512×512px) — інструмент згенерує повний набір розмірів (16–512px) у форматах ICO та PNG.
- Завантажте архів з усіма файлами favicon і site.webmanifest.
- Скопіюйте готовий блок HTML-тегів <link> і вставте в <head> сайту.
Типові сценарії
- Налаштування повного набору favicon для нового сайту без ручного створення кожного розміру окремо.
- Оновлення застарілого набору іконок (лише favicon.ico) до сучасного стандарту з підтримкою PWA й Android maskable-іконок.
- Швидка перевірка, як логотип виглядає зменшеним до 16×16px — на цьому розмірі дрібні деталі часто зливаються.
Що варто памʼятати
На маленьких розмірах (16–32px) дрібні деталі логотипу стають нерозбірливими — для favicon краще підходить спрощений варіант знака, а не повний логотип з текстом.
Maskable-іконки для Android потребують безпечного поля навколо основного зображення, інакше важливий вміст може бути обрізаний при накладенні маски форми.
Стаття про цей інструмент: Favicon: чому для однієї іконки потрібно стільки розмірів і форматів
Часті запитання
Навіщо потрібно стільки різних розмірів фавікону?
Різні платформи запитують різні розміри — вкладки браузера зазвичай використовують 16x16 або 32x32, іконки на головному екрані iOS потребують 180x180, а Android використовує різні розміри до 512x512 — генерація повного набору гарантує чіткий вигляд іконки всюди.
Чим відрізняються фавікони .ico та .png?
Формат .ico може об'єднувати кілька роздільних здатностей в одному файлі й має найширшу підтримку старих браузерів, тоді як сучасні браузери також приймають звичайні .png файли, вказані прямо в тегах link — більшість сайтів сьогодні використовують обидва для сумісності.
Чи надсилається моє завантажене зображення на сервер для генерації фавіконів?
Ні. Усе зміну розміру й конвертацію формату виконується повністю у вашому браузері — зображення ніколи нікуди не завантажується.
Чи можна використати SVG як фавікон?
Так — сучасні браузери на базі Chromium і Firefox підтримують <link rel="icon" type="image/svg+xml">, і такий фавікон лишається чітким на будь-якій щільності екрана та може навіть реагувати на темну тему через prefers-color-scheme всередині самого файлу.
Що таке maskable-іконка для Android?
Це іконка з безпечним полем навколо основного зображення, яку Android може обрізати в будь-яку форму (коло, квадрат із заокругленими кутами тощо) відповідно до теми пристрою, не обрізаючи важливий вміст іконки.