Фавікон, також відомий як «favicon», — це іконка, яка знаходиться перед назвою сторінки у вкладці браузера. Картинки зазвичай містять зображення, першу букву назви бренду або логотип, який відповідає тематиці ресурсу.

Фавікон — це зображення, яке служить значком веб-сторінки. З таким зображенням легше знайти потрібний сайт серед безлічі відкритих вкладок. Для цих зображень використовували назву FAVoritesICON, що означає «обраний значок», і звідси його скорочена форма — favicon.

Фавікон тепер доступний у всіх закладках браузера, історії закладок, панелі закладок, десктопній і мобільній видачі пошукових систем. Він привертає увагу користувачів і допомагає запам’ятати сайт.

Навіщо потрібен фавікон?

Фавікон допомагає виділити бренд і його сайт серед браузерних вкладок. Якщо на вкладці немає іконок, відображається зображення чорно-білої планети, по якій неможливо знайти сайт. Це може бути будь-який інший звичайний значок-заглушка, залежно від браузера. Уявіть, що десять-п’ятнадцять вкладок одночасно відкриті у вашому браузері. Коли так багато відкритих сторінок, текст заголовка просто не видно, і єдиним способом знайти потрібний сайт є дивитися на зображення.

При встановленні сайту на головний екран мобільних пристроїв також потрібні фавікони. Коли хтось виносить вкладку на робочий стіл для швидкого доступу, фавікон допоможе користувачам запам’ятати сайт і легко знайти його серед інших додатків.

Фавікон дає можливість зробити бренд більш відомим для споживачів і запам’ятати його. Картинка привертає увагу, залишається в пам’яті та пов’язана з брендом. Пізніше користувачі згадують про бренд, коли бачать ту ж іконку в закладках, рекламних оголошеннях або пошукових результатах.

Отже, важливість фавікона для сайту

Впізнаваність бренду

Фавікон, по суті, – ідентифікатор Вашого сайту. Якщо він оригінальний, помітний і зрозумілий – саме з цього ярлика користувач запам’ятає Ваш веб-ресурс під час перегляду кількох аналогічних проектів. Не має значення, що робить Ваш потенційний відвідувач – переглядає історію, шукає інформацію в пошуку або дивиться список закладок, — фавікон допоможе швидко розпізнати потрібний сайт. Жодного секрету в цьому немає: людина завжди краще сприймає та запам’ятовує графічні зображення, а не текст.

Довіра

Якщо на веб-сайті немає піктограми фавікона, веб-браузер відображає на вкладці стандартний символ (значок земної кулі або логотип WordPress), або взагалі нічого. А тепер уявіть: користувач відкрив Ваш проект та веб-ресурс конкурента. У Вас немає фавікона, а конкурент передбачив ярлик, що запам’ятовується. В очах клієнта сайт Вашого суперника буде більш професійно опрацьованим – а це означає, що довіри до нього буде більше. Доведеться дорого заплатити за недбалість: порівнюючи, аудиторія в більшості випадків вибере проекти з фавіконами. Подумайте самі, який сайт ви б відкрили першим, шукаючи для дитини костюм на прокат?

Повернення відвідувачів

Припустимо, відвідувачу сподобався ваш сайт, і він додав його до закладок, щоб якось повернутися. Або він не додавав проект, і тепер переглядає історію, щоб знайти посилання на нього. Як ми вже з’ясували, на візуальний контент людина реагує краще ніж на текстовий. Він може запам’ятати буквально заголовок сторінки. Але помітну картинку побачить одразу. А це означає – без проблем повернеться знову. Тоді як ресурс без ярличка (або з непоказним фавіконом) людина може навіть ненароком видалити із закладок та історії.

Економія часу користувачів

Ця перевага походить від попереднього: на пошуки сторінки вашого сайту користувач витрачає значно менше часу завдяки яскравому фавікону. Це полегшує життя ваших клієнтів і вони будуть вдячні, ставши прихильниками бренду.

Непрямий вплив на SEO

Можливо, ви вважаєте, що наявність фавікона на сторінках сайту не дає жодної переваги для просування? Ви маєте рацію, але тільки частково. Прямого впливу на просування веб-сайту значки не мають. Але все ж таки вони корисні для SEO — і користь ця непряма.

Йдеться про зручність для користувачів. Якщо пошукова система відображає фавікони, у природній видачі конкуренцію виграватимуть сайти з ярликами. Помітний фавікон дозволяє ідентифікувати сайт швидше та простіше: це незначно, але впливатиме на зростання кількості кліків, отже – на рейтинг ресурсу у пошуку.

Як створити дизайн фавікона?

Чіткість, простота та запам’ятовуваність — це три основні ознаки хорошого фавікону. Зображення має бути простим для розуміння та легко впізнаваним.

Щоб визначити якість готової іконки, слід відповісти на наступні питання:

Чи відрізняється фавікон від конкурентів? Вивчіть фавікони та перегляньте видачу пошуковика відповідно до ваших ключових запитів. Зверніть увагу на форму, колір і контент ваших конкурентів. Ви повинні придумати щось абсолютно нове.
Чи фавікон асоціюється з брендом, веб-сайтом чи видом бізнесу? При першому погляді хороша іконка допомагає запам’ятати категорію сайту або належність до бренду. Експериментом може бути демонстрація зображення стороннім особам, а потім запитання, які пов’язані думки у них виникають.
Чи зрозуміло, що на фавіконі? Буде важко розрізнити дрібні деталі на маленькому зображенні. Не використовуйте занадто яскраві кольори. Вони відволікатимуть користувачів від основного змісту сайту.

Специфічні онлайн-сервіси допоможуть вам уникнути помилок і створити правильну іконку для різних ситуацій. Наприклад, Realfavicongenerator можна використовувати, щоб побачити, як виглядає фавікон вашого сайту на різних веб-сайтах.

Сервіс пропонує рекомендації щодо покращення іконки, окрім перевірки та демонстрації відображення.
Важливо правильно підібрати розмір і формат зображення, щоб легко створити іконку.

Якого розміру та формату слід робити фавікон?

Фавікон — це растрове зображення у пікселях. Більшість браузерів і пристроїв підтримують стандартний розмір фавікону 16 на 16 пікселів у форматах ICO, PNG або JPG. Розміри варіюються від 24×24 до 32×32 і 64×64 пікселів, і залежать від операційної системи та версії браузера. Наприклад, Google пропонує створювати фавіконки розміром пропорційним до 48 на 48 пікселів: 48 на 48 пікселів, 96 на 96 пікселів, 144 на 144 пікселів тощо. Це дозволяє розширювати зображення в браузері без зниження якості.

У форматі SVG його також можна використовувати. Головне, щоб зображення було квадратним.

Існує широкий спектр моніторів, браузерів і пристроїв, які підтримують різні розміри фавікону. Кожна операційна система має стандартні розміри іконок. Наприклад, можна створити фавікон також у розширеннях JPG, GIF і APNG. Усі найновіші версії браузерів підтримують їх.

Якщо ви все ще сумніваєтеся, який розмір фавікону вибрати, використовуйте значки у форматі ICO або PNG розміром 16 на 16 пікселів або 32 на 32. Але врахуйте вимоги платформ щодо ідеальних розмірів, якщо ви хочете максимально подбати про UX/UI.

Тепер ми розглянемо, які сервіси можуть допомогти створити фавікон.

Генератор для розробки фавікону

Для пошуку за запитом favicon в Інтернеті можна знайти сервіси для створення фавіконів. Більшість цих інструментів виконують схожі завдання: ви завантажуєте фотографію, визначаєте формат і розмір, а потім сервіс видає іконку для скачування. Деякі генератори дозволяють створювати фавікони, вибираючи кольори, форми та інші параметри з нуля.

Рекомендуємо скористатися сервісом Favicon.io, доступним за адресою https://favicon.io/. На вкладці Converter можна створити фавікон з фотографії, а на вкладці Generate можна створити фавікон з тексту.

Ви можете вибрати колір фону та фавікону. Зберегти можна у форматах ICO та PNG різних розмірів. Можна скопіювати або завантажити іконку для вставки фавікону на сайт.

Як додати на сайт

Щоб додати фавікон на сайт, який не використовує CMS, вам потрібно:

1. Вставити фрагмент коду, який містить адресу значка та тип передаваних даних, між тегами <head>…</head> на головній сторінці сайту. Вам потрібно вказати URL місця зберігання іконки. Далі дайте назву файлу з іконкою та його формат, наприклад favicon.png.

<head> ... <link rel="icon" href="https://URL сайту/favicon.ico" type="image/x-icon"> ... </head>

2. Якщо ви редагуєте сторінку поза хостингом, завантажте файл редагованої сторінки на хостинг і замініть його існуючим файлом. Потім збережіть файл. Зручніше редагувати файл прямо на хостингу за допомогою редактора коду FTP. Наприклад, Notepad++.

3. Завантажте файл іконки в кореневу папку сайту або в папку з зображеннями. Використовуйте файловий менеджер в панелі управління хостингом або стороннього FTP-клієнта.

Після додавання коду перегляньте, як виглядає фавікон у популярних браузерах. Додайте адреси сервісів до URL-адреси вашого сайту, наприклад для Google: http://www.google.com/s2/favicons?domain=адреса вашого сайту.

Для сайтів CMS, таких як WordPress, Drupal і Joomla, фрагмент коду також додають у файл шаблону шапки сайту header.php між тегами head.

Завдання полегшується для сайтів, створених на конструкторі. Знайдіть розділ Favicon у налаштуваннях, завантажте зображення в потрібному розмірі і форматі, дозвольте використання й перепублікуйте сторінку.

Що робити, якщо не відображається фавікон?

Фавікон може не відображатися на вкладці браузера з різних причин. Ось лише деякі з них.

Кешування сторінок за допомогою браузера. Щоб вирішити проблему, очистіть кеш вашого браузера та оновіть сторінку. Щоб очистити кеш, залишаючись на сторінці, можна використовувати комбінацію клавіш CTRL+F5.
Неправильний розмір або формат іконки. Перевірте відповідність формату та наявність усіх необхідних атрибутів у коді фавікону.
Неправильне розміщення коду. Переконайтеся, що код фавікону знаходиться у блоці «head».
Пройшов занадто короткий проміжок часу. Пошукові системи можуть зажадати від двох тижнів до двох місяців, щоб індексувати фавікон.
Заборона індексації іконки у файлі robots.txt. Виправте запис Dissalow: favicon.ico на запис Allow: favicon.ico.
Неприйнятне зображення. Зверніть увагу, що зображення не містить заборонених елементів (образливі картинки, зображення віком від 18 років).
Фавікон має низьку якість. Іноді пошуковик не звертає уваги на іконки з низькою роздільною здатністю або скопійовані з інших ресурсів.
Фільтри сайту пошукових систем. Побічні ознаки фільтрів включають повідомлення про проблеми на сайті в Google Search Console, зниження відвідуваності без очевидних причин і зникнення значної частини сторінок з пошуку.

Якщо ви не можете знайти причину, перевірте фавікон на можливість відображення та валідність у спеціалізованих сервісах. Наприклад, Favicon Checker визначає проблеми з відображенням фавікону в різних браузерах.

Підсумуємо

Favicon — це значок сайту поруч із заголовком сторінки в браузері.
Фавікон допомагає збільшити впізнаваність сайту та зробити його унікальним серед інших ресурсів.
Найпоширенішими форматами зображень для фавікону є ICO, PNG і SVG.
Іконка може мати різні розміри, але стандартний — 16 на 16 пікселів.
У кореневому каталозі сайту іконку встановлюють у блоці «head».

Заповнити бриф

Bohdan Prytulyak( CEO )

Засновник та керівник веб студії PBB Design з 2005 року

Що таке фавікон, навіщо він потрібен?