Фавікон — це маленька квадратна іконка сайту, яку браузер показує у вкладці, у списку закладок, в історії та в мобільній видачі Google поруч із заголовком. Технічно це зображення розміром від 16×16 до 512×512 пікселів у форматі ICO, PNG або SVG, яке лежить у корені сайту й підключається в секції head тегом link rel=icon.
Назва походить від favorite icon: у 1999 році Internet Explorer 5 почав показувати іконку сайту в списку «Обране». Сьогодні це єдиний елемент бренду, який видно навіть тоді, коли вкладка стиснута до двадцяти пікселів і від заголовка лишилися дві літери.
Простими словами
Уявіть полицю з двадцятьма однаковими білими коробками. Фавікон — це наліпка, за якою людина знаходить свою коробку, не читаючи підписів. У браузері з двома десятками вкладок текст обрізається до кількох літер, і впізнаваною лишається тільки іконка. Тому головна вимога до фавікона — не «красиво», а «впізнавано при розмірі нігтя»: тут виграє не деталізація, а контраст і одна проста форма.
Де користувач бачить фавікон
- Вкладка браузера — основне місце. Чим більше вкладок відкрито, тим важливіша іконка для повернення на ваш сайт.
- Закладки та історія — у списках із десятків рядків око знаходить іконку швидше, ніж читає заголовок.
- Мобільна видача Google — пошуковик показує фавікон ліворуч від заголовка результату на смартфонах. Сніпет із чіткою іконкою виглядає солідніше за сніпет із порожнім кружком, і це впливає на клікабельність.
- Домашній екран смартфона — якщо сайт додали «на робочий стіл», іконкою стає apple-touch-icon на iOS або зображення з веб-маніфесту на Android.
- Месенджери й сервіси — Telegram, Slack, RSS-читалки й закладкові сервіси тягнуть фавікон для превʼю посилання.
Мобільна видача — найнедооціненіший пункт списку. Ви платите за просування, доводите сторінку до топ-5, а поруч із вашим заголовком стоїть сірий глобус, тоді як у конкурента — впізнаваний знак.
Які розміри і формати потрібні
Один файл «на всі випадки» не працює: iOS ігнорує ICO, Android бере іконку з маніфесту, а Google вимагає, щоб сторона зображення була кратна 48 пікселям. Робочий набір виглядає так:
| Розмір | Формат | Де використовується | Обовʼязково |
|---|---|---|---|
| 16×16 | ICO або PNG | Вкладка браузера, історія, закладки | Так |
| 32×32 | ICO або PNG | Вкладка на екранах Retina, панель завдань Windows | Так |
| 48×48 і кратні | PNG або ICO в корені | Мобільна видача Google | Так |
| 180×180 | PNG, apple-touch-icon | Домашній екран iPhone та iPad | Так |
| 192×192 | PNG у веб-маніфесті | Домашній екран Android, PWA | Так |
| 512×512 | PNG у веб-маніфесті | Сплеш-екран PWA, встановлення застосунку | Так |
| Векторний | SVG | Сучасні браузери, автоперемикання під темну тему | Бажано |
Мінімальний комплект на 2026 рік: favicon.ico з розмірами 16 і 32 всередині одного файлу, apple-touch-icon.png на 180 пікселів, icon-192.png та icon-512.png у маніфесті. SVG — бонус, а не заміна растру.
Як зробити фавікон із логотипа
Найпоширеніша помилка — узяти готовий логотип і механічно зменшити його до 32 пікселів. Лок-ап із назвою, слоганом і тонкими лініями перетворюється на сіру пляму. Тренди приходять і йдуть — ми розбирали їх у матеріалі про тренди веб-дизайну 2026 — а вимога впізнаваності на 16 пікселях не змінюється з 1999 року.
- Візьміть один елемент. Монограму, першу літеру назви або знак із логотипа. Не весь блок із текстом.
- Приберіть деталі. Тонкі обведення, градієнти й тіні на малому розмірі зникають або бруднять зображення. Залишайте суцільні форми й високий контраст.
- Перевірте в реальному масштабі. Не в макеті на 400%, а у вкладці браузера поруч з іншими сайтами. Якщо не впізнаєте свій сайт за півсекунди — спрощуйте далі.
- Додайте фон. Іконка з непрозорим фоном фірмового кольору поводиться передбачувано і в світлій, і в темній темі.
Якщо логотипа ще немає, підійде літера у фірмовому кольорі на суцільній плашці — це помітно краще за дефолтний глобус.
Темна і світла тема браузера
Браузер малює вкладки на світлому або темному тлі залежно від теми системи. Чорна монограма з прозорим фоном ідеально виглядає у світлій темі й повністю зникає в темній. Робочих рішень два: непрозора плашка фірмового кольору, яка тримається на будь-якому тлі, або SVG-фавікон із медіазапитом prefers-color-scheme усередині файлу — тоді іконка перемикає колір сама. Логіка та сама, що й у виборі теми для всього сайту: ми розбирали її в статті темна чи світла тема сайту.
Як підключити фавікон
Файли кладуть у корінь сайту, а посилання на них — у head кожної сторінки. Мінімальний набір тегів:
- link rel=icon href=/favicon.ico sizes=any — базова іконка для всіх браузерів;
- link rel=icon type=image/svg+xml href=/icon.svg — векторна версія для сучасних браузерів;
- link rel=apple-touch-icon href=/apple-touch-icon.png — іконка 180×180 для iOS;
- link rel=manifest href=/site.webmanifest — маніфест, у якому перелічені icons 192 і 512 для Android та PWA.
Файл favicon.ico має лежати саме в корені: браузери й краулер Google звертаються за адресою /favicon.ico напряму, навіть якщо тега в коді немає. Після заміни іконки не поспішайте з висновками — фавікони кешуються агресивно, і стара картинка може висіти тижнями. Перевіряйте в режимі інкогніто.
Типові помилки
- Тільки 16×16. Іконка розмивається на екранах з високою щільністю пікселів і не проходить у видачу Google, якій потрібен розмір, кратний 48.
- Прозорий фон при темному знаку. У темній темі браузера іконка зникає повністю.
- Забутий apple-touch-icon. Коли користувач додає сайт на домашній екран iPhone, iOS підставляє зменшений скріншот сторінки замість іконки.
- Зменшений логотип цілком. Текст і тонкі елементи зливаються в нерозбірливу пляму.
- Іконка недоступна краулеру. Файл на піддомені, закритий у robots.txt або віддається з помилкою — Google просто не покаже нічого.
- Редизайн без оновлення іконки. Сайт уже новий, а в корені лежить фавікон із логотипом п'ятирічної давності.
Скільки це коштує
Окремої ціни на фавікон у нас немає: він входить у будь-який пакет — і в лендінг, і в корпоративний сайт, і в магазин. Дизайнер готує набір іконок під час роботи над макетом, розробник підключає файли й маніфест при складанні. Це частина нормальної здачі проєкту — так само, як адаптивна верстка. Що ще входить у пакети, видно на сторінці цін.
Якщо сайт уже працює й питання тільки в іконці — це півгодини в межах підтримки.
Фавікон, мета-теги й інші дрібниці, які роблять сайт впізнаваним у видачі, ми перевіряємо під час аудиту сайту.
