Генератор фавіконів — ICO, PNG і Apple Touch Icon
Перетворіть одне зображення на повний набір фавіконів: favicon.ico, іконки PNG, apple-touch-icon і маніфест вебзастосунку.
Apple-touch-icon завжди непрозорий. Якщо назва застосунку порожня, маніфест використає назву файлу зображення.
Попередній перегляд
Файли в ZIP
Як створити фавікон
- Виберіть квадратне зображення, бажано щонайменше 512 на 512 пікселів, у форматі PNG, JPG, WebP або SVG.
- Виберіть, як вписувати неквадратні зображення: contain додає відступи кольором тла, cover обрізає по центру.
- Задайте колір тла й теми, відступ і те, чи зберігати прозоре тло для малих іконок.
- Введіть назву й коротку назву застосунку для маніфесту, а потім перевірте попередній перегляд наживо.
- Завантажте ZIP з усіма файлами або окремо favicon.ico та apple-touch-icon.png, і скопіюйте фрагмент HTML.
Коли стане в пригоді
- Створення фавікону для нового сайту без відкриття графічного редактора.
- Заміна відсутнього чи розмитого фавікону, який показується як порожня іконка сторінки у вкладках.
- Додавання apple-touch-icon, щоб сайт добре виглядав на головному екрані iPhone.
- Підготовка іконок Android і маніфесту для прогресивного вебзастосунку.
- Перетворення логотипа на охайний набір іконок з однаковими відступами в кожному розмірі.
Часті запитання
Які розміри створює генератор?
Він записує favicon.ico із зображеннями 16, 32 і 48 пікселів усередині, окремі файли favicon-16x16.png і favicon-32x32.png, apple-touch-icon.png розміром 180 на 180 і іконки Android 192 та 512 пікселів.
Чому apple-touch-icon завжди непрозорий?
iOS не показує прозорість в іконці на головному екрані, тож прозорий PNG отримав би чорний або білий блок позаду. Генератор заповнює цей файл кольором тла, а малі розміри фавікону може залишити прозорими.
Що вписати в маніфест?
Повну назву сайту чи застосунку та коротку назву приблизно з дванадцяти символів, бо саме вона з'являється під іконкою на телефоні. Колір теми забарвлює панель браузера, а колір тла заповнює стартовий екран.
Чи можу я використати логотип SVG?
Так. SVG растеризується на ширину 512 пікселів, а його пропорції беруться з атрибутів width і height або з viewBox, тож квадратний логотип залишається квадратним.
Куди покласти файли на сервері?
Покладіть їх у корінь сайту поруч з index.html, щоб шляхи з фрагмента, як-от /favicon.ico і /site.webmanifest, працювали. Якщо тримаєте їх у підпапці, відредагуйте значення href у фрагменті відповідно.
Чи завантажується моє зображення кудись?
Ні. Зображення декодується й малюється на полотні у вашому браузері, а ZIP збирається в пам'яті, тож нічого не надсилається на сервер.