Належний набір фавіконів — це більше, ніж один файл: браузерам потрібен багаторозмірний .ico, iOS хоче apple-touch-icon на 180px, Android хоче PNG на 192 і 512px плюс вебманіфест. Цей інструмент рендерить їх усі з одного зображення й пакує в один ZIP разом із точними тегами HTML, які треба вставити у ваш <head>.
Попередній перегляд показує вашу іконку в реальних 16, 32 і 48px, щоб ви могли перевірити, що вона залишається впізнаваною на крихітних розмірах, перш ніж запустити її.
Як користуватися
- Додайте логотипНайкраще підходять квадратні зображення; інші центрально обрізаються.
- Перевірте малі розміриПерегляд на 16px — це те, що більшість користувачів насправді побачить у вкладці.
- Завантажте ZIPfavicon.ico, шість PNG, site.webmanifest і html-snippet.txt, готовий до вставлення.
Одне зображення на вході, повний набір favicon на виході
Закиньте один логотип чи іконку — і цей генератор збудує повний набір, який потрібен сучасному сайту: багаторозмірний favicon.ico, що поєднує версії 16, 32 і 48 пікселів, окремі PNG у 16, 32, 48, 180 для Apple touch icon, а також 192 й 512 для встановлень Android і PWA, плюс site.webmanifest. Усе спускається одним ZIP, тож ви можете кинути його просто в корінь проєкту.
Ви також отримуєте готовий до вставлення фрагмент HTML head із уже під'єднаними правильними тегами link і meta. Скопіюйте його у свій шаблон, завантажте файли — і favicon з'явиться на вкладках браузера, у закладках і на ярликах головного екрана, а вам не доведеться писати розмітку вручну.
Чіткі іконки на кожному розмірі
Favicon-и болісно маленькі, тож генератор рендерить превʼю справжнього розміру в 16, 32 й 48 пікселів — рівно так, як їх покаже вкладка браузера. Це дозволяє зловити логотип, що перетворюється на кашу в 16px, перш ніж ви його випустите. Якщо ваше вихідне зображення не квадратне, інструмент центрально обрізає його, щоб іконка лишалася збалансованою, а не сплющеною.
Весь процес працює в браузері з вашого оригінального зображення, а це означає, що ви можете згенерувати PNG favicon та ICO з логотипу високої роздільності без жодного завантаження чи акаунта.
Для чого його використовують
Запуск нового сайту — Згенеруйте favicon.ico й кожен розмір PNG за один прохід, щоб вкладки й закладки виглядали готовими з першого дня.
Додавання іконки встановлення PWA — Експортуйте PNG 192 і 512 плюс site.webmanifest, щоб ваш застосунок встановлювався з належною іконкою на головному екрані.
Apple touch icon — Створіть apple-touch-icon 180x180, щоб закладки й головні екрани iOS показували чітку плитку.
Ребрендинг наявного сайту — Проженіть один новий логотип через генератор і замініть увесь набір іконок одразу.
Передача клієнту — Передайте єдиний ZIP з ico, PNG, маніфестом і фрагментом head, щоб розробник просто його вкинув.
Перевірка читабельності на малому розмірі — Скористайтеся превʼю справжнього розміру 16px, щоб підтвердити, що деталізований логотип досі читається як іконка.
Неквадратний логотип — Подайте широкий словесний знак і дозвольте центральній обрізці перетворити його на збалансований квадратний favicon.
Статичний сайт чи проєкт на фреймворку — Скопіюйте згенеровані теги head у ваш шаблон Next, Astro чи звичайний HTML і випускайте.
Згенеруйте повний набір фавіконів з одного зображення — у браузері, за один прохід
Фавікон звучить як єдина 16×16-піксельна дрібниця, і роками нею й був. Сучасні браузери й платформи тихо перетворили його на маленьке виробництво. Щоб зробити це сьогодні як слід, вам потрібні favicon.ico, набір PNG від 16px аж до 512px, іконка Apple touch для домашніх екранів iOS, site.webmanifest, щоб сайт можна було встановити як застосунок, і правильний блок тегів <link> та <meta> у вашому HTML <head>. Пропустіть розмір — і іконка вкладки виглядає розмитою на ретина-екрані; пропустіть маніфест — і іконка «додати на головний екран» відкочується до скріншота; помиліться з блоком тегів — і деякі платформи проігнорують усе це.
Це чимало марудного виводу для завдання, яке ви робите раз на проєкт, а потім забуваєте деталі. IMG.DIY бере одне вихідне зображення й видає повний набір — .ico, кожен розмір PNG, вебманіфест і фрагмент HTML для копіювання-вставлення — змінюючи розмір повністю у вашому браузері за допомогою Canvas. Ваш логотип зчитується локально й рендериться до кожного цільового розміру на пристрої; нічого не завантажується. Для бренд-позначки чи логотипа невипущеного продукту, який ви радше не публікували б на сторонньому сервері до запуску, ця локальна гарантія варта того, і вона нічого не коштує.
Оскільки увесь конвеєр працює на боці клієнта, він також працює офлайн, коли PWA закешовано, тож ви можете перегенерувати іконки на заблокованій робочій машині чи без з'єднання. Безкоштовно, без акаунта, без водяного знака, вбудованого у ваші іконки.
Чим це відрізняється
- Увесь набір, а не лише .ico. ICO, PNG від 16 до 512, іконка Apple touch і
site.webmanifestв одному завантаженні. - HTML для копіювання-вставлення в комплекті. Точний блок
<link>/<meta>, який треба вкласти у ваш<head>, щоб іконки справді зареєструвалися в усіх браузерах. - Нічого не завантажується. Ваш логотип змінює розмір локально — корисно, коли позначка конфіденційна чи до запуску.
- Один прохід, без майстра. Подайте одне зображення, отримайте все; жодного багатокрокового процесу, що питає про вибір платформ, які потім треба досліджувати.
- Офлайн і чисто. Кешований PWA, без реєстрації, без водяного знака на жодній згенерованій іконці.
IMG.DIY проти інших генераторів фавіконів
| Аспект | favicon.io | realfavicongenerator.net | Вручну (дизайн-застосунок + код) | IMG.DIY |
|---|---|---|---|---|
| Файли завантажуються | Так, на їхній сервер | Так, на їхній сервер | Ні, локально | Ні, лишаються у браузері |
| Повний набір (.ico + PNG + маніфест) | Так | Так, дуже ретельно | Ви його збираєте | Так |
| Наданий фрагмент HTML | Так | Так, детальний | Ви його пишете | Так |
| Кроків до результату | Кілька | Більше (багато варіантів) | Багато | Один прохід |
| Працює офлайн | Ні | Ні | Так | Так, після першого візиту |
| Ціна | Безкоштовно | Безкоштовний рівень; платні варіанти | Вартість застосунку + ваш час | Безкоштовно |
| Потрібен акаунт | Ні | Ні | Ні | Ні |
Прямо про конкурентів: realfavicongenerator чудовий і справді ретельніший — він показує вашу іконку на реальних платформах, обробляє крайні випадки на кшталт масок закріплених вкладок Safari й тем і дозволяє налаштувати вигляд для кожної платформи. Якщо ви хочете такий рівень контролю й не проти завантажити ваше зображення, це чудовий вибір. favicon.io швидкий і простий і теж видає надійний набір. Відмінність IMG.DIY — це поєднання повного виводу з відсутністю завантаження і одним проходом: ви отримуєте ті самі практичні результати — ico, PNG, маніфест і HTML для їх під'єднання — без того, щоб ваш логотип залишав браузер, і без проходження майстра конфігурації. Для «маю логотип, дай мені все, що треба вставити, і нікуди не надсилай мій файл» — саме те.
Чому IMG.DIY
Повний набір
ICO + PNG 16/32/48/180/192/512 + маніфест.
HTML для копіювання
Точні теги link включені як текстовий файл.
Перегляд у справжньому розмірі
Спершу бачте іконку в реальних 16/32/48px.
Приватно
Ваш логотип ніколи не залишає браузер.