EN Favicon — це невелика іконка, яка допомагає швидко впізнати сайт серед відкритих вкладок, закладок і результатів пошуку. Зазвичай вона містить спрощений логотип, першу літеру назви бренду або окремий фірмовий символ.
Попри малий розмір, favicon впливає на цілісність дизайну, впізнаваність бренду та сприйняття сайту користувачами. Стандартна іконка браузера або порожній значок часто створюють враження незавершеного проєкту.
Де відображається favicon
Іконка сайту може з’являтися:
- у вкладках браузера;
- у списку закладок;
- у браузерній історії;
- біля адреси сторінки;
- на головному екрані смартфона;
- у ярликах вебзастосунків;
- у результатах пошуку Google.
Точне відображення залежить від браузера, операційної системи та формату файлу. Тому одного зображення розміром 16 × 16 px недостатньо для всіх пристроїв.
Чи впливає favicon на SEO
Favicon не є прямим фактором ранжування. Його наявність не підвищить позиції сайту автоматично.
Проте іконка може опосередковано впливати на ефективність органічного пошуку:
- допомагає впізнати бренд у видачі;
- відрізняє результат від конкурентів;
- підсилює довіру до сайту;
- робить сніпет візуально завершеним;
- може позитивно впливати на клікабельність результату.
Google самостійно вирішує, чи показувати favicon у пошуковій видачі. Навіть технічно правильне налаштування не гарантує його відображення. Водночас дотримання офіційних вимог Google робить сайт придатним для показу іконки.
Яким має бути правильний favicon
Favicon повинен залишатися зрозумілим у дуже малому масштабі. Деталізований логотип, слоган або кілька дрібних елементів на іконці перетворяться на нерозбірливу пляму.
Для favicon краще використовувати:
- одну літеру або монограму;
- простий графічний знак;
- скорочену версію логотипу;
- контрастний фірмовий колір;
- чітку геометричну форму.
Важливо перевірити, як іконка виглядає на світлому й темному фоні. Якщо символ чорний і не має контрастної підкладки, він може бути майже непомітним у темній темі браузера.
Технічні вимоги Google
Для відображення в пошуку favicon має відповідати таким умовам:
| Параметр | Рекомендація |
|---|---|
| Пропорції | Квадрат 1:1 |
| Мінімальний розмір | 8 × 8 px |
| Рекомендований розмір | Понад 48 × 48 px |
| Оптимальна базова версія | 48 × 48 або 96 × 96 px |
| Доступність | Файл не закритий від Googlebot-Image |
| URL | Постійний, без регулярної зміни адреси |
| Розташування коду | У секції <head> головної сторінки |
| Підтримувані Google формати | ICO, PNG, GIF, JPEG, BMP, TIFF, PPM |
Розмір бажано робити кратним 48: 48 × 48, 96 × 96 або 144 × 144 px. Окремо варто підготувати іконки для браузерів, пристроїв Apple та вебзастосунків.
Який формат favicon обрати
ICO
ICO — традиційний формат іконки сайту. Один файл може містити кілька розмірів, наприклад 16 × 16, 32 × 32 і 48 × 48 px.
Основна перевага ICO — широка сумісність, зокрема зі старими браузерами та системами. Його доцільно залишати як резервний варіант за адресою:
/favicon.icoPNG
PNG підтримує прозорий фон і добре підходить для точного відображення растрової графіки. Це зручний варіант для Google, Apple Touch Icon та іконок вебзастосунку.
Варто підготувати щонайменше такі файли:
favicon-48x48.png;apple-touch-icon.pngрозміром 180 × 180 px;icon-192.png;icon-512.png.
SVG
SVG масштабується без втрати якості та може адаптувати кольори під світлу або темну тему браузера. Це хороший формат для сучасних браузерів, але його не варто використовувати як єдину версію.
У переліку форматів favicon для пошукової видачі Google SVG наразі не зазначений. Тому разом із ним потрібно залишити PNG або ICO.
Як зробити favicon
1. Спростіть логотип
Повний логотип із назвою компанії майже завжди погано читається на вкладці браузера. Залиште один впізнаваний елемент: знак, першу літеру або монограму.
2. Створіть квадратний макет
Працюйте з полотном 512 × 512 px. Це дасть змогу підготувати всі менші версії без помітної втрати якості.
Не розміщуйте знак впритул до країв. Залиште безпечний відступ приблизно 10–15% від розміру полотна, щоб символ не обрізався на різних пристроях.
3. Перевірте іконку в малому розмірі
Зменште зображення до 16 × 16 і 32 × 32 px. Якщо основний символ неможливо розпізнати, потрібно:
- прибрати дрібні деталі;
- збільшити товщину ліній;
- посилити контраст;
- скоротити кількість кольорів;
- збільшити основний знак.
4. Експортуйте потрібні формати
Практичний набір для більшості корпоративних сайтів:
| Файл | Розмір | Призначення |
|---|---|---|
favicon.ico | 16, 32 і 48 px | Резервна сумісність |
favicon.svg | Векторний | Сучасні браузери |
favicon-48x48.png | 48 × 48 px | Пошук і браузери |
apple-touch-icon.png | 180 × 180 px | Пристрої Apple |
icon-192.png | 192 × 192 px | Android і PWA |
icon-512.png | 512 × 512 px | PWA та великі ярлики |
5. Використайте favicon generator за потреби
Favicon generator може автоматично створити набір файлів із завантаженого логотипу. Після генерації обов’язково перевірте результат вручну: автоматичне зменшення іноді робить знак розмитим, обрізає краї або додає невдалий фон.
Генератор вирішує технічне завдання, але не замінює підготовку окремої спрощеної іконки дизайнером.
Як додати favicon на сайт
Файли завантажують на сервер, а посилання на них розміщують усередині секції <head>.
Базовий сучасний варіант:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-48x48.png" type="image/png" sizes="48x48">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Значення sizes="any" для ICO означає, що файл може містити кілька розмірів. Для PNG потрібно вказувати фактичні розміри зображення.
Використання rel="shortcut icon" досі підтримується з історичних причин, але для сучасного сайту достатньо стандартного rel="icon".
Як налаштувати web app manifest
Файл site.webmanifest потрібен насамперед для сайтів, які користувач може встановити на смартфон або комп’ютер як вебзастосунок.
Приклад:
{
"name": "Назва сайту",
"short_name": "Назва",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}Manifest не замінює звичайний favicon. Він доповнює набір іконок і передає браузеру параметри встановлюваного вебзастосунку.
Як додати favicon у WordPress
У більшості сучасних тем WordPress іконку можна встановити через панель керування:
- Відкрийте розділ зовнішнього вигляду.
- Перейдіть до налаштувань теми.
- Знайдіть параметр «Іконка сайту».
- Завантажте квадратне зображення.
- Збережіть зміни та очистьте кеш.
WordPress зазвичай генерує кілька розмірів автоматично. Проте варто перевірити вихідний код сторінки та переконатися, що посилання на favicon справді додані в <head>.
У темах із власною панеллю, конструкторах сторінок або кешувальних плагінах налаштування може бути розташоване в іншому розділі.
Як перевірити favicon після встановлення
Спочатку відкрийте адресу кожного файла безпосередньо в браузері:
https://example.com/favicon.ico
https://example.com/favicon-48x48.png
https://example.com/apple-touch-icon.pngСервер має повертати файл із кодом відповіді 200 OK, без переадресації на сторінку помилки.
Потім перевірте:
- наявність тегів
<link>у вихідному коді; - правильність шляхів і назв файлів;
- відображення у Chrome, Safari та Firefox;
- вигляд на світлому й темному фоні;
- доступність файлів для пошукових роботів;
- відсутність заборони в
robots.txt; - правильність MIME-типів;
- роботу після очищення кешу браузера та сайту.
Для перевірки запиту можна також відкрити інструменти розробника, перейти до вкладки Network і відфільтрувати файли за словом favicon.
Чому favicon не відображається
Браузер показує стару іконку
Favicon активно кешується. Навіть після заміни файла браузер може продовжувати показувати стару версію.
Можливі рішення:
- очистити кеш браузера;
- перевірити сайт у приватному режимі;
- очистити кеш WordPress, сервера або CDN;
- тимчасово змінити назву файла в HTML.
Для Google краще не змінювати адресу favicon без потреби. Після оновлення файла за стабільною URL-адресою потрібно дочекатися повторного сканування.
Неправильно вказаний шлях
Відносний шлях /favicon.ico веде до кореня домену. Шлях favicon.ico без початкового слеша може оброблятися відносно поточної сторінки, через що іконка не завантажуватиметься в окремих розділах сайту.
Файл закритий від індексації
Googlebot має отримати доступ і до головної сторінки, і до самої іконки. Перевірте правила robots.txt, захист від ботів, налаштування CDN та коди відповіді сервера.
Іконка є у браузері, але відсутня в Google
Це не обов’язково помилка. Пошуковій системі потрібен час, щоб повторно просканувати головну сторінку та обробити файл. Процес може тривати від кількох днів до кількох тижнів.
Щоб пришвидшити перевірку, можна запросити індексацію головної сторінки через інструмент перевірки URL у Google Search Console.
Типові помилки
Найчастіше проблеми виникають через:
- використання повного логотипу з дрібним текстом;
- прямокутне зображення замість квадратного;
- низьку контрастність;
- favicon розміром лише 16 × 16 px;
- відсутність PNG або ICO як резервного формату;
- неправильні шляхи до файлів;
- закриття зображення в
robots.txt; - часту зміну URL іконки;
- однаковий колір символу та фону браузера;
- заміну лише файла без очищення кешу.
Окрема помилка — намагатися встановити різні favicon для сторінок у підкаталогах. Google підтримує одну іконку для одного hostname. Піддомен може мати окремий favicon, а звичайний підрозділ сайту — ні.
Короткий чекліст перед публікацією
Правильно налаштований favicon:
- відповідає стилю бренду;
- має квадратні пропорції;
- читається у розмірі 16 × 16 px;
- містить мінімум дрібних деталей;
- має версії ICO, PNG і за потреби SVG;
- включає Apple Touch Icon;
- доступний пошуковим роботам;
- підключений у
<head>; - має стабільну URL-адресу;
- протестований у різних браузерах і темах.
Favicon — невелика, але обов’язкова частина професійного сайту. Її варто готувати разом із логотипом, адаптивним дизайном, метаданими та іншими елементами цифрової айдентики.
