Як створити та додати favicon на сайт

У цій статті команда Promodo пояснює, що таке favicon і надамо всю необхідну інформацію про те, як створити і додати його на сайт.

Про favicon

Favicon — це невелика іконка, що асоціюється з вашим сайтом. Цікавий факт, назва цієї іконки поєднує слова "favorite" та "icon,". Вперше favicon впровадили в Internet Explorer 5, розмір іконки був 16x16 пікселів, і розташовувалася поруч із сайтом у списку закладок. Метою іконки було полегшити користувачам розпізнавання ресурсів, додаючи зображення, яке виділяє сайт серед інших.

‍

Зараз іконка сайту відображається у:

‍

вкладках браузера поруч із назвою сторінки;
списках закладок;
пошуку;
історії браузера та інших місцях.

Фавікон сприяє швидкій ідентифікації сайту серед інших.

Переваги використання фавікона

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

Favicon та SEO

Favicon не мають прямого впливу на SEO, але можуть органічно покращити позиції вашого сайту в пошукових результатах:

‍

Ідентифікація сайту: Favicon допомагають Google та іншим пошуковим системам ідентифікувати сайт, використовуючи піктограму для відображення у результатах пошуку.
Запам'ятовування бренду: Кількість кліків на ресурс збільшиться, якщо користувачі впізнаватимуть іконку сайту.

Як створити фавікон

Фавікон – це адаптований і дещо спрощений логотип бренду. Його вигляд візуально відображає айдентику вашого бренду. Водночас радимо для іконки використовувати прості та зрозумілі елементи без дрібних деталей.

Перед тим як завантажити фавікон на ваш сайт, переконайтеся, що він відповідає наступним характеристикам:

‍

Основний розмір 16x16 пікселів. Фахівці вважають, цей розмір підхожим для звичайних моніторів, а ось для ретіни (це здебільшого у Macbook) рекомендується 32х32, бо ці екрани мають у два рази більшу щільність пікселів.
Картинка має бути квадратна.

Зберігайте у форматі .ico. Якщо графічний редактор не підтримує цей формат, збережіть у .jpg, .png, .gif, .bmp або .tif., а потім використайте плагін або онлайн-конвертер. Водночас такі ресурси, як WebFlow, дозволяють завантажувати фавікон і в інших форматах.

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

‍

Файл .ico потрібно завантажити в кореневий каталог вашого сайту. Це можна зробити через FTP-клієнт або через панель керування вашим хостингом.
Код до HTML. Згенерувати такий код можна на відповідному ресурсі, зокрема Realfavicongenerator.net. Додайте цей код у секцію <head> вашого HTML-файлу:

Щоб забезпечити сумісність з різними браузерами та пристроями, ми рекомендуємо завантажувати кілька форматів і розмірів favicon. Відповідні коди також можна згенерувати на сервісі. Ось коди, які згенерували ми:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

Перевіряємо відображення favicon

Після додавання favicon може знадобитися очищення кешу браузера, щоб побачити зміни на вашому сайті.

‍

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

Висновки

Отже, фавікон, будучи невеликим елементом дизайну, значно підвищує впізнаваність бренду і довіру до сайту, одночасно покращуючи користувацький досвід.

ТАКОЖ НА ЦЮ ТЕМУ:

‍