Генератор фавіконів онлайн
Завантажте своє зображення або введіть емодзі, щоб створити іконку для сайту
Фавікон — це маленька картинка у вкладці браузера, закладках і (часто) у видачі Google. Щоб його зробити, не потрібен дизайнер: достатньо квадратного зображення та онлайн-генератора, який нарізає з нього потрібні розміри.
Нижче розібрано, що саме треба згенерувати, як підключити файли до сайту і що робити, якщо Google не показує іконку.
А ще у мене зібрано безкоштовні онлайн-інструменти для щоденних завдань, якщо після картинок доведеться щось конвертувати, перевірити чи підрахувати.
Генератор фавіконів — безкоштовний онлайн-інструмент
Генератор фавіконів бере одну вихідну картинку (логотип, літеру, символ) і перетворює її на набір файлів для різних пристроїв. Вручну це довго: окремо ICO, окремо PNG для iPhone, окремо для Android.
Для чого він потрібен на практиці?
- Вкладка браузера. Коли відкрито десять вкладок, текст заголовків обрізається, і користувач шукає ваш сайт саме по іконці.
- Закладки та історія. Сайт без власної іконки виглядає як порожній шаблон.
- Пошук Google. За документацією Google, якщо в сайту є фавікон, він може показуватися поруч із результатом. Гарантії немає навіть за дотримання всіх вимог.
- Домашній екран телефона. Коли хтось додає сайт «на головний екран», береться окремий, більший значок.
Є й менш очевидна річ. Порожній фавікон нічого не ламає, але читається як ознака недоробленого сайту. Це не наукова істина, а моє припущення, однак воно збігається з тим, як фахівці з фронтенду описують роль іконки.
Створити фавікон онлайн: покроково
Весь процес займає кілька хвилин, якщо вихідна картинка підготовлена.
1. Підготуйте вихідну картинку. Квадрат, бажано від 512×512 пікселів. З великого зображення нарізати маленькі версії легко, а збільшити малу без втрати якості не вийде. Найкраще працює PNG із прозорим тлом або SVG.
2. Спростіть малюнок. Фавікон у вкладці має розмір 16×16 пікселів, тому дрібні деталі зіллються в пляму. Повний логотип із підписом майже завжди читається погано. Візьміть один символ, літеру або монограму.
3. Завантажте файл у генератор і дочекайтеся результату.
4. Перегляньте попередній вигляд на світлому й темному тлі. Темна іконка на темній вкладці зникає, і це типова помилка.
5. Завантажте архів і розмістіть файли в корені сайту, тобто за адресою на кшталт ваш-сайт.ua/favicon.ico.
6. Додайте теги в <head> (приклад нижче).
Фавікон розмір: які розміри потрібні
Єдиного «правильного» розміру немає, бо різні пристрої беруть різні файли. Ось розкладка, яку наводять профільні довідники та документація Google.
| Файл | Розмір | Де використовується |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Вкладки браузера, старі браузери |
| favicon.svg | масштабований | Сучасні браузери |
| apple-touch-icon.png | 180×180 | Домашній екран iPhone та iPad |
| icon-192.png | 192×192 | Домашній екран Android, веб-маніфест |
| icon-512.png | 512×512 | Заставка PWA, Android |
Що стосується Google, вимоги скромніші, ніж може здатися. Іконка повинна бути квадратною (1:1) і мати щонайменше 8×8 пікселів, але Google радить розмір більший за 48×48, щоб вона добре виглядала на різних екранах. Формат будь-який валідний: ICO, PNG, SVG.
Невеликий практичний нюанс для іконки під iOS. Її радять робити з невеликими відступами від краю й суцільним фоном, бо iOS сам скруглює кути та не любить прозорості.
Створити фавікон: як підключити його до сайту
Згенеровані файли самі по собі нічого не роблять. Їх треба оголосити в <head> головної сторінки. Мінімальний робочий набір виглядає так:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">У файлі manifest.webmanifest вказуються іконки 192×192 і 512×512. Якщо у вас WordPress або інша CMS, код можна не чіпати: у WordPress іконку завантажують через «Вигляд → Налаштувати → Ідентифікація сайту».
Чому Google не показує мій фавікон
Це найчастіше питання після встановлення. Типові причини такі.
- Файл недоступний для робота. Перевірте, що
robots.txtне забороняє шлях до іконки. Відкрийте адресу файлу в браузері, там має бути картинка, а не помилка 404. - Іконка не квадратна або надто мала.
- Змінюється адреса файлу. Google вимагає стабільного URL, тож не перейменовуйте файл без потреби.
- Ви не дали часу. Нова іконка з’являється в пошуку не одразу. За різними довідниками це від кількох днів до кількох тижнів. Гарантованого терміну Google не називає.
- Іконка не пройшла перевірку на доречність. Google замінює невідповідні зображення, зокрема з порнографією чи символами ненависті, іконкою за замовчуванням.
Скоротити очікування можна: запросіть переіндексацію головної сторінки в Search Console через інструмент перевірки URL.
Окреме правило, яке часто пропускають. Google підтримує один фавікон на хост, тобто на hostname. Піддомен blog.сайт.ua вважається окремим сайтом і має власну іконку.
Генератор фавіконів: на що звернути увагу під час вибору
Не всі генератори однакові. Перш ніж довірити одному з них логотип, перевірте кілька речей:
- Чи віддає він і ICO, і PNG, і готові теги для вставки? Без цього доведеться дописувати код вручну.
- Чи є попередній перегляд у світлій і темній темі?
- Чи не стискає він вихідне зображення з помітною втратою якості?
- Чи не вимагає реєстрації для простого завантаження?
- Чи не накладає водяних знаків на безкоштовний результат?
Якщо ви тільки починаєте, обмежтеся мінімумом: один SVG або ICO плюс apple-touch-icon на 180 пікселів. Решту додасте, коли сайт вимагатиме PWA.
Висновок
Фавікон дрібниця, проте саме з таких дрібниць складається враження про сайт. Зробіть простий квадратний знак, згенеруйте набір файлів, підключіть його в <head> і переконайтеся, що Googlebot може до нього дістатися. Про решту подбає час.
Автор: Lumir
Дивіться також:
HTML в зображення онлайн: як перетворити код або сторінку на PNG, JPG чи WebP
Швидко обрізати зображення онлайн безкоштовно
