Чи досі потрібен favicon.ico?

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

Яке зображення завантажити?

Квадратне, з простою формою. Дрібні деталі зникають на 16 пікселях, тому логотип із написом варто спростити до знака.

А значки maskable?

Цей інструмент не створює значків maskable. Якщо вони вам потрібні, підготуйте графіку з безпечним відступом і додайте окремий запис у маніфесті.

Чому файли завантажуються по одному?

Щоб інструмент лишався легким і працював без додаткових бібліотек. ZIP-архів можемо додати, якщо буде потреба.

Безкоштовні онлайн-інструменти

Генератор favicon і маніфесту

Завантажте логотип чи графіку, і інструмент підготує значки потрібних для браузерів, iOS та Android розмірів, файл favicon.ico, маніфест і готовий HTML-код.

Завантажити зображення

PNG, JPG, WebP або SVG. Зображення не залишає ваш браузер.

Прозоре тло

Колір тла

Відступ: 0%

HTML-код для секції head

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Маніфест застосунку (site.webmanifest)

{
  "name": "",
  "short_name": "",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Ваші дані не залишають браузер. Ми нічого не надсилаємо на сервер.

Як користуватися

Завантажте квадратне зображення PNG, JPG, WebP або SVG, найкраще не менше 512 × 512 px.
Оберіть прозоре тло або колір і відступ навколо логотипа.
Завантажте потрібні файли й розмістіть їх у корені сайту.
Вставте HTML-код у head і підлаштуйте маніфест.

Які файли створюються

Ви отримаєте значки PNG 16, 32 і 48 px для браузерів, apple-touch-icon 180 px для iOS та значки 192 і 512 px для Android і застосунків, що встановлюються з браузера. Додатково файл favicon.ico з розмірами 16, 32 і 48 px.

Тло й відступ

Значки в iOS не мають прозорості, тому за прозорого тла система додасть чорне. Для apple-touch-icon оберіть колір тла. Невеликий відступ не дає логотипу торкатися країв, коли кути заокруглюють.

Приватність файлів

Зображення обробляється локально у вашому браузері через елемент canvas. Воно не надсилається на сервер, тож можна використовувати графіку, яку ви ще не публікували.

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

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

Потрібно більше, ніж інструмент?

Якщо за цим стоїть більший проєкт, сайт, магазин чи застосунок, опишіть його в короткому брифі. Відповімо конкретно й без зобов'язань.

Описати проєкт