Що таке фавікон? Як зробити та додати на сайт?
24.02.2023
Усі користувачі знають, як незручно шукати потрібну сторінку серед величезної кількості вкладок у браузері. Але ми швидко орієнтуємось завдяки маленькому зображенню, розміщеному перед назвою. Цей елемент називається favicon. Що це таке? Яку функцію виконує? У статті також розбираємо, як правильно створити фавікон і де шукати проблему у разі помилки.
Зміст:
1. Що таке фавікон? Визначення поняття
2. Де відображається фавікон для сайту?
4. Як зробити фавікон онлайн? Генератори для створення
6. Чому може виникати помилка у відображенні favicon?
7. Резюме
Що таке фавікон? Визначення поняття
Favourite icone або скорочено favicon — це невелике зображення, розташоване перед назвою сторінки у браузері. У разі відсутності брендової іконки відображатиметься стандартний значок у вигляді чорно-білої планети, що вважається помилкою. Значок включає логотип або першу букву назви бренду або компанії.
За допомогою маленького значка — міні-логотипу — користувач орієнтується в інтерфейсі, коли бачить велику кількість вкладок у браузері. Однак фавікон на сайті — не просто іконка для прикраси. Це важлива частина айдентики бренду та юзабіліті.
Де відображається фавікон для сайту?
Фавікон відображається у кількох місцях:
1. На вкладках у браузері
2. В історії браузера
3. На панелі збережених закладок
4. У пошуковій видачі Google у mobile версії.
Мета favicon — виділити бренд, привернути до нього увагу, підвищити впізнаваність компанії для аудиторії. Іконка допомагає відрізняти ваш сайт від решти в інтернеті. Погодьтеся, при пошуку улюбленого бренду ви дізнаєтесь його фавікон і точно не переплутаєте з конкурентами. На підсвідомості ви запам’ятовуєте картинку, яка автоматично асоціюється із брендом.
Як створити фавікон?
Важливо дотримуватись технічних параметрів під час створення фавікона, щоб він коректно відображався на всіх пристроях. Потрібно враховувати такі фактори:
Формат
Найчастіше favicon створюють у форматі ICO, у якому можна зберігати кілька розмірів. Нині цей спосіб вважається застарілим. На зміну прийшов формат PNG. Сьогодні його розпізнають майже усі браузери. Також сучасні операційні системи підтримують формати GIF, JPEG або SVG. Але потрібно обережно використати такий фавікон, тому що не всі майданчики зможуть коректно показати іконку.
Розмір
Стандартний розмір фавікона — 16х16 пікселів. Перед використанням перевірте, як виглядатиме іконка в зменшеному розмірі: вона повинна бути читабельна і впізнаваною, відповідати стилістиці бренду.
Рекомендації, які потрібно враховувати:
- робити квадратний значок;
- відкрити доступ для пошукових роботів, які сканують фавікон;
- не можна використовувати заборонені знаки (наприклад, свастику) або значки інших компаній.
Дизайн
Не варто вигадувати складний дизайн, навпаки, чим простіше фавікон, тим легше його запам’ятати і розпізнати серед інших. Загальна формула вдалого фавікон для сайту — це простота, чіткість і запам’ятовуваність. Перед створенням, поставте собі такі питання:
- Як фавікон вирізняється серед конкурентів? Зробіть міні-дослідження та проаналізуйте favicon інших компаній у ніші у пошуковій видачі. Акцентуйте увагу на формі, кольорі та змісті.
- Які асоціації фавікон викликає? Як ці асоціації пов’язані із вашим брендом? Тут можна провести експеримент та запитати знайомих, які думки виникають у них при першому погляді на іконку.
- Ви розумієте, що зображено на картинці? Фавікон крихітного розміру, тому багато дрібних деталей користувач просто не побачить.
- Які емоції викликає? При створенні рухомого фавікона у форматі GIF можуть виникати неоднозначні емоції. Деякі подібні активні зображення дратують та відволікають від змісту. Так же діють і надто яскраві кольори. Тому будьте обережні і спершу протестуйте свій фавікон для сайту.
Як зробити фавікон онлайн? Генератори для створення
Ми розібралися із загальними параметрами favicon, але залишається питання, як саме зробити фавікон для сайту? Є кілька доступних способів:
- Зробити фавікон за допомогою графічного редактора (photoshop як варіант), додавши спеціальний плагін Favicon.ico.
- Скористайтеся онлайн-сервісом для малювання фавікана (favicon.cc наприклад). Далі завантажити його у потрібному форматі.
- Завантажити готовий фавікон для сайту із банку іконок (Findicons).
- Створити фавікон за допомогою онлайн-генератора.
Якщо неправильно зробити фавікон, він відображатиметься у браузері як помилка.
Найпростіший спосіб — скористатися онлайн-сервісом для створення фавіконки. Для цього знадобиться зображення, наприклад, лого, яке необхідно завантажити в онлайн-генератор. Можна скористатися такими інструментами:
Realfavicongenerator
У сервіс потрібно завантажити вихідний розмір 260х260 пікселів. На наступному етапі можна змінити налаштування: змінити фон або колір, додати відступи. В результаті у вас буде пакет для скачування та код для вбудовування на сайт.
Favic-o-matic
Генератор також вимагає вихідник у розмірі 310х310 пікселів. Тут параметри недоступні, завантаження відбувається автоматично.
Favicon.ico & App Icon Generator
Сервіс не вказує вимоги, але попереджає, якщо ви намагаєтеся завантажити неквадратне зображення.
Favicon.io
Тут ви можете створити фавікон за допомогою картинки, тексту або емодзі. Є можливість підібрати колір та фон.
Як додати favicon на сайт?
Коли ви згенерували або створили фавікон, у вас має бути сам файл та код для додавання на сайт. Щоб значок відображався та правильно працював, слід помістити код у кореневу папку сайту, якщо у вас є доступ до нього на хостингу. Завантажити файл можна через панель керування або використовувати менеджер файлу.
Наступний крок — вставити отриманий код між тегами head/head. Після цього пошукові роботи зможуть проіндексувати елемент.
Чому може виникати помилка у відображенні favicon?
Перевірити коректне зображення фавікону можна за допомогою пошукової видачі або браузера, вписавши назву в рядку. Якщо favicon не відображається, може бути кілька причин:
- неправильний формат або розмір іконки, низька якість;
- помилка у розміщенні коду;
- пошукові роботи не встигли просканувати фавікон;
- значок містить неприпустимі елементи;
- фавікон неунікальний;
- у вас є фільтри на сайті.
Насамперед, коли ви бачите помилку у відображенні фавікона, потрібно почистити кеш та оновити сторінку. Якщо ця дія не допомогла, тоді шукайте одну із проблем, зазначених вище.
Резюме
Незважаючи на те, що favicon — дрібна деталь, на перший погляд не дуже примітна, слід приділити їй увагу. Створити фавікон правильно та в стилістиці сайту означає підвищити довіру з боку цільової аудиторії, гарантувати високу якість.
Наразі фавікон є невід’ємною частиною сайту. При цьому іконка потрібна не просто для галочки, вона впливає на впізнаваність бренду та клікабельність. Фавікон для сайту робить його більш впізнаваним серед тисяч конкурентів, викликає позитивні емоції, нагадує про компанію.