Створити набір фавіконів _

Як працює генерація фавіконів у браузері

Весь процес генерації виконується у вашому браузері за допомогою Canvas API та бібліотеки стиснення fflate. Жодної обробки на сервері, жодних завантажень, жодних сторонніх сервісів.

1. Завантажте вихідне зображення або відрендеріть текст чи емодзі на позаекранному полотні у високій роздільній здатності. Якщо ви вибрали зображення, воно декодується браузером нативно. Якщо ви вибрали текстовий режим, сторінка малює ваш текст на полотні з вибраним шрифтом, кольором тексту та фону.
2. Для кожного цільового розміру (16, 32, 48, 180, 192, 512 пікселів) сторінка створює нове позаекранне полотно точного розміру, потім малює вихідний вміст на ньому за допомогою Canvas API. Вбудоване масштабування браузера виконує зменшення з білінійною або бікубічною фільтрацією автоматично, створюючи чіткий фавікон кожного розміру.
3. Кожне полотно експортується у PNG Blob через canvas.toBlob(). Панель попереднього перегляду показує всі шість розмірів, щоб ви могли перевірити результат перед завантаженням. Готовий блок HTML-коду та фрагмент маніфесту (manifest.json) створюються з назв файлів, щоб їх можна було одразу вставити в head вашого сайту.
4. Коли ви натискаєте «Завантажити ZIP», сторінка зчитує всі PNG Blob у пам'ять, використовує fflate для пакування їх разом із файлом manifest.json у єдиний ZIP-архів і запускає завантаження одним кліком. Весь архів створюється у вашому браузері — нічого не завантажується на сервер на жодному етапі.

Чому варто генерувати фавікони в браузері?

• Повний набір фавіконів усуває помилку 404 браузера при першому відвідуванні та гарантує, що ваш сайт виглядає професійно в закладках, вкладках браузера та на екранах встановлення PWA. Відсутність потрібного розміру означає, що браузер або нічого не показує, або використовує розмите масштабування найближчого сусіда.
• Вбудований HTML-код та фрагмент маніфесту позбавляють необхідності вручну писати шість тегів та JSON-блок маніфесту. Вставте їх у head вашого сайту, скоригуйте шляхи за потреби — і все готово за секунди, а не хвилини.
• Генерація на стороні клієнта — єдиний варіант на корпоративних пристроях з обмеженнями, де немає фоторедактора. Оскільки нічого не завантажується на сервер, немає ризику витоку даних і не потрібен дозвіл комплаєнсу для чутливих або брендованих зображень.
• Режим тексту та емодзі дозволяє створити фавікон без жодного зображення. Введіть початкову літеру бренду, символ або емодзі, виберіть шрифт і колір — і отримайте повний набір. Ідеально для особистих проєктів, прототипів або сайтів, яким тимчасово потрібен фавікон.

Поширені сценарії використання

Кожен сайт, який люди додають у закладки або встановлюють, потребує фавікона. Ось три сценарії, де браузерний генератор економить час.

• Створення нової посадкової сторінки або мікросайту. Згенеруйте повний набір фавіконів із логотипу бренду менш ніж за хвилину, скопіюйте теги у head сайту та опублікуйте. Жодного дизайнерського інструменту не потрібно.
• Створення іконок PWA для прогресивного вебдодатку. PNG-іконки 192×192 та 512×512 обов'язкові для manifest.json. Згенеруйте їх разом з усім набором фавіконів за один крок, а не змінюйте розмір логотипу вручну.
• Створення заповнювачів для прототипів та стейджинг-сайтів. Введіть одну літеру або емодзі, виберіть колір фону та отримайте реалістичні фавікони без очікування фінальних брендованих ресурсів від дизайнерів.

Приклад: генерація фавіконів із логотипу компанії

У вас є логотип PNG 500×500 і потрібен повний набір фавіконів для нового маркетингового сайту.

Відкрийте цю сторінку та перетягніть логотип PNG у зону завантаження. Зображення завантажиться, і з'явиться попередній перегляд разом із сіткою розмірів. Натисніть Створити фавікони. Сторінка малює логотип на шести позаекранних полотнах розмірами 16, 32, 48, 180, 192 та 512 пікселів і показує кожен результат. Під панеллю попереднього перегляду з'являється готовий HTML-блок із записами rel=\"icon\" для розмірів 16/32/48, посиланням apple-touch-icon для розміру 180 і посиланням manifest для іконок PWA. Фрагмент маніфесту нижче містить іконки 192 та 512. Натисніть Завантажити ZIP — сторінка пакує всі шість PNG разом із manifest.json у єдиний ZIP-архів через fflate. Весь процес займає дві секунди і не споживає трафіку, окрім початкового завантаження сторінки.

Які розміри фавіконів генерує інструмент?

Шість розмірів: 16×16, 32×32 та 48×48 для стандартних фавіконів, 180×180 для Apple Touch Icon та 192×192 і 512×512 для іконок PWA маніфесту. Кожен розмір експортується як PNG. Сучасні браузери приймають PNG фавікони через .

Чи можна створити фавікон із тексту або емодзі?

Так. Перемкніться в режим тексту або емодзі, введіть слово або вставте емодзі, виберіть шрифт, колір тексту та фону й натисніть «Створити». Текст рендериться на позаекранному полотні у високій роздільній здатності, а потім змінюється до кожного цільового розміру фавікона.

Чи завантажується зображення на сервер?

Ні. Зображення ніколи не покидає ваш пристрій. Сторінка використовує File API браузера для читання зображення в пам'ять, а Canvas API — для зміни розміру та експорту кожного фавікона. Відкрийте панель Network у DevTools під час генерації — єдині вихідні запити — це початкове завантаження сторінки та рекламні дзвінки. Жодні дані зображення не передаються.

Які формати приймаються для завантаження зображення?

Будь-який формат, який браузер може декодувати: PNG, JPEG, WebP, GIF та SVG (растеризований браузером). Максимальний розмір файлу — 10 МБ.

Як працює завантаження ZIP?

Сторінка використовує бібліотеку fflate (завантажується на вимогу зі спільного vendor-шляху) для пакування всіх згенерованих PNG разом із manifest.json у стандартний ZIP-архів. Пакування відбувається повністю в пам'яті браузера — без завантаження, без серверних запитів. ZIP завантажується як Blob одним кліком.

Чи можна використовувати ці фавікони на будь-якому сайті?

Так. Згенеровані PNG фавікони працюють на всіх сучасних браузерах, що підтримують тег . Іконка Apple Touch 180×180 підтримується на iOS та Safari. Іконки PWA 192×192 та 512×512 відповідають вимогам маніфесту для Chrome на Android та інших браузерів, що підтримують PWA.

Чи є опція формату .ico?

Поточна версія експортує PNG, оскільки всі сучасні браузери приймають їх через . Справжній багатороздільний формат .ico поки не підтримується, але може бути доданий у майбутніх версіях.