Піктограма сайту (favicon)

Деталі: Категорія: Словник термінів; Опубліковано: 29 жовтня 2018

Піктограма сайту або favicon — це невелике зображення, яке відображається поряд із назвою сторінки у вкладці браузера, у закладках, пошуковій видачі Google та мобільних пристроях. Незважаючи на свій невеликий розмір, favicon відіграє важливу роль у впізнаваності бренду, юзабіліті та SEO-оптимізації.

У цій статті розглянемо:

що таке піктограма сайту;
які формати та розміри використовувати;
як вона впливає на SEO та довіру користувачів;
як правильно її створити та встановити.

🧠 Що таке піктограма сайту?

Favicon (від англ. favorite icon) — це графічний елемент розміром 16x16, 32x32 або 48x48 пікселів, який відображається у:

вкладці браузера;
результатах пошуку Google (на мобільних пристроях);
списку закладок;
історії відвідувань;
ярликах на головному екрані смартфонів.

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

📷 Приклад відображення favicon

Де показується	Що бачить користувач
У вкладці браузера
У закладках
У мобільному пошуку	Піктограма поруч з URL
На головному екрані телефону	Ярлик із favicon

🛠️ Як створити favicon?

1. Розміри

Стандарт: 16x16, 32x32, 48x48, 64x64
Для мобільних та PWA — краще використовувати 180x180 або 512x512

2. Формати

.ico — найуніверсальніший (підтримується всіма браузерами)
.png — сучасний формат з прозорістю
.svg — масштабований формат, але не всі платформи підтримують

3. Інструменти для створення

favicon.io
realfavicongenerator.net
Adobe Illustrator / Photoshop

📎 Як встановити favicon на сайт?

HTML-код у `<head>`:

Або, для PNG:

WordPress

– У розділі «Зовнішній вигляд → Налаштування → Ідентифікація сайту»

OpenCart, Joomla, Shopify

– Через налаштування теми або завантаження у кореневу папку сайту.

🔍 Як піктограма впливає на SEO?

✅ Покращення CTR у мобільному Google

Google відображає favicon поруч із URL в результатах мобільного пошуку. Стильна, впізнавана піктограма підвищує клікабельність (CTR).

✅ Посилення брендингу

У закладках, історії браузера, вкладках — favicon допомагає впізнати саме ваш сайт серед багатьох.

✅ Професійність

Сайт без favicon виглядає “недоробленим”. Це знижує довіру користувача та може викликати відчуття тимчасовості.

✅ Вплив на юзабіліті

Коли відкрито багато вкладок, саме favicon допомагає швидко знайти потрібну сторінку.

❗ Favicon не є прямим фактором ранжування у Google, але опосередковано впливає на поведінкові фактори: час перебування, кількість повернень, клікабельність.

📉 Помилки, яких варто уникати

❌ Відсутність favicon взагалі
❌ Погана якість (розмита, темна)
❌ Некоректне відображення в мобільному Google
❌ Важкий файл (наприклад, favicon.png 200KB!)
❌ Неунікальний значок (схожий на інші сайти)

📱 Адаптація favicon для мобільних і PWA

Додайте apple-touch-icon для iOS:

Використовуйте manifest.json для Android-додатків і PWA:

🧩 Висновок

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

🚀 Gototop допоможе:

створити favicon для вашого сайту;
впровадити всі SEO-теги;
покращити вигляд у Google;
оптимізувати брендинг під мобільний пошук.

👉 Залишити заявку