Перевірити фавікон сайту онлайн

Як перевірити фавікон сайту онлайн і прочитати результат

Щоб перевірити фавікон сайту, введіть у форму вище адресу головної сторінки (наприклад, example.com), а не внутрішній URL: пошукові системи беруть іконку саме з головної. Інструмент завантажує HTML, знаходить усі теги <link>, у яких у rel є слово icon (icon, shortcut icon, apple-touch-icon, apple-touch-icon-precomposed), читає іконки з web-manifest і, якщо файл .ico у коді не оголошено, окремо перевіряє, чи відповідає /favicon.ico у корені кодом 200.

Кожна знайдена іконка показується карткою. Як її читати:

• Синій бейдж — значення rel. manifest icon означає, що іконку взято з файлу маніфесту; shortcut icon з адресою /favicon.ico без тегу в HTML — що файл знайшовся лише за стандартним шляхом.
• Сірий бейдж — атрибут sizes, як його оголошено в коді. Це заявлений розмір, а не виміряний: якщо в тезі написано 32x32, а файл насправді 16×16, браузер і Google побачать 16×16. Відкрийте файл кнопкою «Завантажити» й перевірте реальні пікселі.
• Тип під бейджами — атрибут type (image/png, image/svg+xml, image/x-icon).
• Знак «?» замість зображення — браузер не зміг завантажити файл за вказаною адресою: 404, редирект на HTML-сторінку, хибний шлях або захист від гарячих посилань. Перевірте цей URL у перевірці HTTP-статусу.

Якщо інструмент пише, що favicon не знайдено, у HTML немає жодного icon-тегу, а /favicon.ico не відповідає кодом 200. Часта причина — іконку додає JavaScript уже після завантаження: такий тег не бачать ні наш інструмент, ні частина пошукових роботів. Іконку треба віддавати у вихідному HTML.

Чому Google не показує фавікон у пошуку

Якщо в результатах пошуку замість вашої іконки сірий глобус, звіртеся з вимогами Google до фавікона. Головне:

1. Тег на головній. На головній сторінці хоста має бути <link rel="icon"> (або shortcut icon, apple-touch-icon). Google показує одну іконку на хост: у shop.example.com може бути своя, у розділу example.com/blog/ — ні.
2. Квадрат, кратний 48 пікселям. 48×48, 96×96, 144×144, 192×192. Іконка 16×16 чи 32×32 годиться для вкладки браузера, але для видачі Google її замало. Для SVG обмежень за розміром немає.
3. Файл доступний роботам. Googlebot-Image має отримати доступ до файлу іконки, Googlebot — до головної. Рядки на кшталт Disallow: /*.ico або заборона теки з іконкою (/wp-content/uploads/, /assets/) ламають показ. Перевірте файл в аналізаторі robots.txt.
4. Стабільний URL. Не змінюйте адресу іконки під час кожного деплою (хеш в імені файлу) — Google не встигає за нею.
5. Іконка відповідає бренду й не містить неприйнятних зображень — інакше Google замінить її стандартним значком.

Скільки чекати і як пришвидшити

Фавікон оновлюється не за кожного сканування: зазвичай від кількох днів до кількох тижнів. Пришвидшити можна так: виправте теги, переконайтеся, що іконка відповідає кодом 200 і не закрита в robots.txt, потім у Search Console відкрийте «Перевірка URL» для головної й натисніть «Надіслати запит на індексування». Повторні запити нічого не пришвидшують. Як виглядатиме сніпет, можна оцінити в превʼю сніпета.

Повний набір тегів favicon у 2026 році

Двадцять варіантів іконок більше не потрібні. Достатньо такого набору в <head> головної (і всіх шаблонів):

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" sizes="96x96" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0f172a">

Файл site.webmanifest:

{
  "name": "Example",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#0f172a",
  "background_color": "#ffffff",
  "display": "standalone"
}

ICO — для старих браузерів і програм, які запитують /favicon.ico напряму. SVG — чітка іконка на будь-якому екрані (усередині SVG можна додати @media (prefers-color-scheme: dark) для темної теми). PNG 96×96 закриває вимогу Google щодо кратності 48. Apple Touch Icon 180×180 без прозорості — іконка на головному екрані iPhone. Маніфест із 192 і 512 потрібен Android і PWA. Якщо іконки з маніфесту не зʼявилися в результатах перевірки, переконайтеся, що маніфест — валідний JSON, а в тезі <link> атрибут rel="manifest" стоїть перед href.

Розміри фавікона: таблиця

Як додати фавікон у WordPress, Tilda, Shopify і Хорошоп

WordPress

Використовуйте штатну «Іконку сайту» (Site Icon): «Зовнішній вигляд → Налаштувати → Властивості сайту», у блокових темах — «Налаштування → Загальні». Завантажте квадратний PNG від 512×512 — WordPress сам наріже 32×32, 180×180, 192×192 і 270×270 та виведе теги в <head>. Не дублюйте іконку SEO-плагіном і вставкою в header.php: два набори тегів із різними файлами — часта причина «не тієї» іконки.

Tilda

Іконка завантажується в налаштуваннях сайту, у розділі з іконкою сайту (favicon). Завантажуйте квадрат із запасом за розміром і після публікації перевірте головну тут: іконка має зʼявитися в результатах, а її URL — відкриватися.

Shopify

«Online Store → Themes → Customize → Theme settings → Logo/Favicon». Багато тем виводять іконку, зменшену до 32×32. Для видачі Google цього замало — додайте в theme.liquid ще тег на PNG 96×96 або 192×192.

Інші CMS і власні сайти

У конструкторах шукайте поле «Favicon» або «Іконка сайту» в загальних налаштуваннях. На власному рушії покладіть favicon.ico і PNG у корінь, а теги з прикладу вище — у спільний шаблон шапки. Для nginx корисно не засмічувати логи й задати кеш:

location = /favicon.ico {
    access_log off;
    log_not_found off;
    expires 7d;
}

Чому браузер показує стару іконку

Браузери кешують фавікони окремо від сторінок, і звичайне оновлення (Ctrl+F5) часто не допомагає. Що робити:

• Відкрийте файл іконки напряму (example.com/favicon.ico) і оновіть його — так перезапишеться кеш саме цього файлу.
• Додайте версію до адреси: /favicon.ico?v=2, або перейменуйте файл. Змінюйте адресу лише під час зміни дизайну, а не на кожному деплої.
• Перевірте результат у вікні інкогніто або тут: інструмент запитує сторінку із сервера й не залежить від кешу вашого браузера.
• Якщо стара іконка лишилася на CDN, скиньте кеш CDN для файлу іконки.

Кеш Google — окрема історія: нова іконка зʼявиться у видачі після повторного обходу головної, незалежно від того, що бачите ви в браузері. Зображення, яке підтягують соцмережі й месенджери під час репосту, перевіряйте в OG-налагоджувачі — там використовується og:image, а не favicon. Докладніше про роботу інструмента — в документації.