Генератор фавіконів
Зроби іконку сайту з логотипа, літер або емодзі та завантаж повний набір: favicon.ico, іконки для iPhone і Android, маніфест і код для вставлення.
У вкладці браузера
Усі розміри
Файли
Код для <head>
Поклади файли в корінь сайту, поруч із головною сторінкою, і встав цей код усередину тегу head на кожній сторінці.
Фавікон за кілька хвилин
- 1Вибери основулітери, емодзі або свою картинку
- 2Налаштуйте виглядкольори, шрифт, заокруглення та розмір
- 3Завантаж набірZIP з іконками, маніфестом і кодом
Текст, емодзі чи картинка
Літери на кольоровому фоні - найпоширеніший варіант: першу літеру назви видно навіть при 16 px. Емодзі - швидкий спосіб отримати яскраву іконку без дизайнера. Логотип краще брати квадратний і без дрібних деталей: при 16 px усе дрібне зливається.
Перевір малий розмір
Подивися прев'ю у вкладці на світлій і темній темі. Якщо знак губиться на темній вкладці, додай фон або вибери яскравіший колір. Поля навколо картинки допомагають, коли логотип упирається в краї.
Що робити з файлами
Поклади всі файли з архіву в корінь сайту, поруч із головною сторінкою, і встав код у розділ head. У WordPress, Tilda та інших конструкторах зазвичай досить завантажити favicon.ico або PNG 512 px у налаштуваннях сайту.
Часті запитання
Не знайшли відповідь - напишіть нам, підкажемо.
Тут ти створюєш свою іконку з нуля. «Фавікон сайту» робить навпаки: за посиланням знаходить і завантажує іконки, які вже стоять на чужому сайті.
Мінімум - favicon.ico в корені сайту: його шукають усі браузери. PNG 32 px дає чітку іконку у вкладці, apple-touch-icon.png 180 px - іконку на екрані iPhone, а site.webmanifest з іконками 192 і 512 px потрібен Android і PWA.
Три картинки: 16, 32 і 48 px у форматі PNG. Браузер і Windows самі вибирають потрібний розмір.
iOS сам заокруглює кути іконки на екрані «Додому», а прозорі місця заливає чорним. Тому apple-touch-icon ми зберігаємо квадратною і з фоном: білим, якщо ти вибрав прозорий.
Так. Емодзі малюється шрифтом твоєї системи: на iPhone у стилі Apple, на Windows у стилі Microsoft, на Android у стилі Google. У файл потрапляє той вигляд, який ти бачиш у прев'ю.
Розпакуй архів у корінь сайту і встав код із блоку «Код для <head>» усередину тегу head. Якщо іконка не змінилася, онови сторінку без кешу: браузери довго пам'ятають старий фавікон.
Спробуйте також
Теж безкоштовно і без реєстрації