Як користуватися: Генератор фавіконок
- 1
Виберіть джерело
Завантажте логотип або зображення до 25 MB, введіть від однієї до трьох літер одним з 11 шрифтів або оберіть емодзі.
- 2
Оформте іконку
Оберіть одну з 12 форм — від варіанта без форми чи звичайного квадрата до печива або конюшини, а також колір тла або прозорість, відступ і радіус заокруглення.
- 3
Перевірте всі розміри
Перегляньте іконку від 16 до 192 пікселів, на світлих і темних вкладках браузера та всередині безпечної зони maskable-іконок Android.
- 4
Завантажте й установіть
Збережіть favicon.zip, розпакуйте його в папку свого сайту та вставте згенерований HTML у head сторінки.
Ліміти та Pro
Необмежена кількість наборів іконок із тексту чи емодзі; зображення до 25 MB, по одному. У кожному наборі 10 файлів.
Pro підвищує ліміт завантаження зображень логотипів до 4 GB. Дивитися Pro
Про інструмент: Генератор фавіконок
Генератор фавіконок створює з одного дизайну повний набір іконок, потрібних сучасному сайту. У ZIP-архіві ви знайдете favicon.ico із зображеннями 16, 32 і 48 пікселів, окремі PNG розмірами 16, 32 і 48 пікселів, apple-touch-icon на 180 пікселів з непрозорим тлом (iOS сама додає заокруглені кути), іконки Android Chrome на 192 і 512 пікселів, maskable-іконку на 512 пікселів, вміст якої лишається всередині безпечної зони 80%, файл site.webmanifest з назвою застосунку, короткою назвою та кольором теми, а також готовий до вставлення фрагмент HTML з тегами link і theme-color. Усі PNG оптимізуються без втрат.
Завантажені зображення зменшуються фільтром Ланцоша, тому великий логотип лишається чітким навіть на 16 пікселях, а SVG-логотип спершу малюється розміром 1024 пікселі. Текстові іконки відтворюються вибраним вами шрифтом, а емодзі — шрифтом Noto Color Emoji, тож результат однаково виглядає в системі будь-якого відвідувача. Якщо іконки не лежатимуть у корені сайту, вкажіть папку, наприклад /icons/, і шляхи у фрагменті та маніфесті зміняться відповідно.
Типові випадки використання: новий сайт або блог, вебзастосунок, який додають на головний екран, внутрішня панель керування, що має виділятися серед вкладок браузера, чи швидка тимчасова іконка для невеликого проєкту. Дрібні деталі й довгі слова на 16 пікселях зникають, тому найкраще працюють прості форми та одна-дві літери. Інструмент не розміщує файли й не редагує ваш сайт: завантажувати їх потрібно самостійно.
Приватність
Іконки малюються на canvas у цій вкладці, а кодує їх PNG-кодек сайту на WebAssembly у Web Worker, тож завантажений логотип ніколи не залишає ваш пристрій. Якщо ви оберете шрифт Google або джерело «Емодзі», браузер один раз завантажить цей шрифт із Google Fonts, щойно ви почнете редагування; запит містить лише назву шрифту, а не ваш текст, і під час відкриття сторінки нічого не завантажується.
Можливості
Повний набір іконок
ICO, PNG різних розмірів, Apple touch icon, іконки Android і maskable та веб-маніфест в одному ZIP.
Зображення, текст або емодзі
Використайте свій логотип, від однієї до трьох літер у 11 шрифтах або будь-яке емодзі як джерело.
Виразні форми
Квадрат, заокруглена форма, коло та вісім форм Material, з налаштуванням відступу й радіуса заокруглення.
HTML, готовий до вставлення
Теги link, колір теми та шляхи до маніфесту створюються для обраної вами папки.