Надійне підключення фавікона в HTML не зводиться до одного чарівного тега. Потрібен невеликий набір доступних файлів і посилань у head. Ця процедура охоплює сучасні вкладки, старіші клієнти та мобільні ярлики без безлічі застарілих варіантів.
Підготуйте файли
Почніть із квадратного символу, який залишається читабельним у дуже малому розмірі. Помістіть favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest і PNG-файли, указані в маніфесті, до публічної папки, що обслуговується з кореня домену.
Шлях, такий як /favicon.svg, є абсолютним із домену. Тому він залишається правильним у /products або /blog/article, на відміну від favicon.svg, який можна вирішити відносно сторінки.
Додайте елементи до head
Спершу оголосіть SVG з rel icon і type image/svg+xml, потім ICO з rel icon і sizes any. Додайте rel apple-touch-icon для iOS та rel manifest для встановлення вебзастосунку.
Тип має відповідати файлу, який фактично обслуговується. Не перейменовуйте PNG на .ico: вміст і заголовок мають використовувати формат ICO.
| Призначення | Відношення | Файл |
|---|---|---|
| Сучасний браузер | icon | /favicon.svg |
| Сумісність | icon | /favicon.ico |
| Домашній екран iOS | apple-touch-icon | /apple-touch-icon.png |
| Вебзастосунок | manifest | /site.webmanifest |
Розгортайте без розриву шляхів
Після розгортання відкрийте URL кожного файлу безпосередньо. У відповідь має надходити зображення або маніфест з успішним статусом, а не сторінка входу чи HTML-сторінка помилки 404, замаскована неправильним статусом.
Якщо сайт розташований у підкаталозі, скоригуйте шляхи або базову публічну адресу. Перевірте готову сторінку в інструментах розробника: браузер має запитувати очікувані URL без перенаправлення на інший хост.
Перевірте результат
Перезавантажте з вимкненим кешуванням і перевірте елементи посилань у створеному DOM. Потім перевірте вкладку, закладку та, якщо необхідно, додайте сайт на головний екран реального пристрою.
Фавікон у пошуковій видачі також залежить від правил пошукової системи та графіка сканування. Тому його наявність у браузері не гарантує негайного оновлення в результатах пошуку.
Першоджерела
Поширені запитання
Чи міститься елемент фавікон у body?
Ні. Елементи link, які описують іконки та маніфест, потрібно розміщувати в head документа.
Чи достатньо кореневого favicon.ico?
Це корисний запасний варіант, але він не описує Apple Touch icon або значки маніфесту, які можна встановити. Оголошіть формати для цих цілей.
Навіщо використовувати шлях, що починається з /?
Він починається з кореня домену та не дозволяє вкладеній сторінці шукати файл у власній папці.