Здавалося б, favicon — це просто маленька іконка сайту у вкладці браузера. Але щоб вона коректно відображалась у всіх контекстах — вкладки, закладки, домашній екран iOS, плитка Windows — потрібен цілий набір файлів різних розмірів і форматів.
Чому одного favicon.ico вже не досить
Класичний favicon.ico покриває лише базовий випадок відображення у вкладці браузера. Сучасні платформи вимагають власних форматів: Apple Touch Icon для іконки на домашньому екрані iOS, PNG різних розмірів для Android Chrome, та окремі маніфести для прогресивних веб-застосунків.
Роль тегів <link> у <head>
Кожен формат іконки підключається окремим тегом <link rel="icon"> чи <link rel="apple-touch-icon"> з атрибутом sizes, що вказує розмір. Браузер обирає найбільш підходящий варіант із запропонованого набору залежно від контексту показу.
Web App Manifest для PWA
Для прогресивних веб-застосунків додатково потрібен файл site.webmanifest з переліком іконок різних розмірів у форматі JSON — саме звідти Android бере іконку для плитки на домашньому екрані при встановленні сайту як застосунку.
Навіщо це потрібно
- Згенерувати повний набір іконок потрібних розмірів з одного вихідного зображення.
- Отримати готовий HTML-код тегів <link> для вставки в <head>.
- Переконатися, що сайт коректно виглядає при додаванні на домашній екран мобільного пристрою.
SVG-фавікон і підтримка темної теми
Сучасні браузери на базі Chromium і Firefox підтримують <link rel="icon" type="image/svg+xml" href="favicon.svg"> — векторний формат, що лишається чітким на екранах з будь-якою щільністю пікселів без потреби генерувати окремі растрові розміри. SVG-фавікон навіть може реагувати на системну тему користувача через медіа-запит prefers-color-scheme прямо всередині самого файлу, автоматично змінюючи кольори іконки в темному режимі.