Фавікон (favicon) — це маленька іконка сайту, яку видно у вкладках браузера, закладках, на екранах смартфонів і в результатах пошуку. Попри свій невеликий розмір, фавікон — важлива частина брендування. Щоб він відображався правильно на всіх пристроях і у всіх браузерах, треба знати актуальні вимоги до розміру.
Стандартні розміри фавіконів
Один розмір не підходить для всіх випадків. Сучасні пристрої використовують різні роздільності, тому краще створювати фавікони кількох розмірів:
| Розмір | Де використовується |
|---|---|
| 16×16 | Вкладки браузера, адресна строка |
| 32×32 | Закладки, панель завдань Windows |
| 48×48 | Панель керування Windows |
| 57×57 | Старі iOS-пристрої |
| 72×72 | iPad (1-2 покоління) |
| 96×96 | Android-пристрої |
| 114×114 | Retina-дисплеї iPhone |
| 192×192 | Android Chrome, іконки на головному екрані |
| 512×512 | Підтримка PWA (Progressive Web App) |
Який формат краще використовувати
- ICO — обов’язковий для підтримки старих браузерів (наприклад, Internet Explorer). Файл .ico може містити одразу кілька розмірів.
- PNG — сучасний, зручний для мобільних пристроїв, має кращу якість.
- SVG — підтримується не скрізь, але дає найкращу масштабованість (рекомендований як доповнення).
Як правильно підключити фавікон
У <head> HTML-документа вставте відповідні теги:
<linkrel=”icon”href=”/favicon.ico”sizes=”any”> <linkrel=”icon”type=”image/png”sizes=”32×32″href=”/favicon.png”> <linkrel=”icon”type=”image/png”sizes=”16×16″href=”/favicon.png”> <linkrel=”apple-touch-icon”sizes=”180×180″href=”/apple-touch-icon.png”> <linkrel=”manifest”href=”/site.webmanifest”>
Як створити фавікон
Використайте генератори на кшталт RealFaviconGenerator.net або Favicon.io. Вони створюють усі потрібні формати і навіть генерують HTML-код для вставки.
Порада: Не ігноруйте фавікон. Він — деталь, яку користувач бачить постійно. Якісний фавікон — ознака акуратного і продуманого сайту.