Без завантаження, 100% локально, без облікового запису

Генератор favicon

Завантажте свій логотип чи іконку та завантажте всі стандартні розміри favicon як PNG. Включає Apple Touch Icon та іконки PWA. Нічого не залишає ваш пристрій.

Як працює Генератор favicon

Генератор favicon бере будь-яке надане зображення та змінює його до стандартних розмірів favicon за допомогою Canvas drawImage API: 16x16, 32x32, 48x48, 180x180 (іконка Apple touch), 192x192 (Android Chrome) та 512x512 (маніфест PWA). Усі шість розмірів генеруються у браузері разом із favicon.ico, що об'єднує зображення 16x16, 32x32 та 48x48 в один застарілий файл. Ваше вихідне зображення ніколи не покидає пристрій.

Повний набір favicon охоплює весь діапазон іконок вкладок браузера, закладок, ярликів на головному екрані та заставок PWA. Використання вихідного зображення у великій роздільній здатності (не менше 512x512 пікселів) дає алгоритму зменшення масштабу найбільше деталей для роботи. HTML-теги посилань, необхідні для посилання на кожен згенерований файл, показані у фрагменті, який можна скопіювати безпосередньо в елемент head сторінки.

Автор: Bastien Sulyan

Генератор favicon: покрокова інструкція

  1. Скиньте вихідне зображення на область завантаження. Використовуйте квадратне зображення 512 пкс або більше для найкращих результатів.
  2. Перегляньте шість згенерованих розмірів на панелі результатів.
  3. Завантажте шість PNG-файлів та favicon.ico з панелі результатів.
  4. Скопіюйте HTML-фрагмент із тегами посилань для всіх розмірів.
  5. Розмістіть PNG-файли в корені сайту та вставте теги посилань у head сторінки.

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

  • Розробник налаштовує новий сайт і потребує всіх розмірів favicon, згенерованих із логотипу бренду без передплати на інструмент дизайну.
  • Автор PWA генерує іконки 192x192 та 512x512, необхідні у маніфесті веб-застосунку для встановлення на головний екран.
  • Блогер оновлює ідентичність сайту та замінює стандартний favicon на власну іконку, побудовану з логотипу.
  • Фрилансер швидко виробляє повний набір favicon для проекту клієнта без очікування встановлення офлайн-програм дизайну.

Поширені запитання

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

Будь-який формат, який браузер може декодувати, підходить як вхід: JPEG, PNG, WebP, GIF та SVG. Для SVG-джерел браузер растеризує вектор у Canvas перед зміною розміру, тому вихідні PNG є растровими зображеннями в будь-якому випадку.

Чому мій favicon розмитий у вкладці браузера?

Розміри 16x16 та 32x32 дуже маленькі. Якщо вихідне зображення містить дрібні деталі або тонкі лінії, вони не переживуть зменшення масштабу. Простий, жирний дизайн із чіткими формами набагато краще працює при малих розмірах, ніж складна ілюстрація.

Чи генерує інструмент файли ICO?

Так. Окрім шести PNG-файлів інструмент завжди збирає favicon.ico, що об'єднує зображення 16x16, 32x32 та 48x48 в одному файлі -- саме його досі шукають старіші браузери Windows та деякі краулери в корені сайту. Сучасні браузери задовольняються PNG-посиланнями, тож публікація обох варіантів нічого не коштує і дозволяє кожному клієнту обрати потрібний.

Чи обробляється вихідне зображення на сервері?

Ні. Виклики Canvas drawImage, що виробляють кожен розмір, виконуються у вкладці браузера. Вихідне зображення зчитується з локального диска, і шість PNG-виходів створюються в пам'яті та пропонуються для завантаження. Жодні дані файлів не проходять через сервер.

Який розмір слід використовувати для іконки Apple touch?

iOS та iPadOS використовують PNG 180x180 пікселів, на який посилається тег посилання apple-touch-icon. Цей розмір використовується, коли користувач додає ваш сайт на головний екран Apple-пристрою. Інструмент генерує цей файл разом з іншими розмірами.

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

Так, але вихід матиме чорні поля або стовпчиків для вписування у квадратний canvas. Для найкращих результатів починайте з квадрата або кадруйте вихідне зображення до квадрату перед використанням інструменту.

Схожі інструменти

Тримайте все локально, досліджуйте додаткові інструменти.

Усі інструменти для зображень