Формати фавіконів: ICO, PNG, SVG і що потрібно браузерам

Чому фавікони досі напрочуд складні

Фавікон виглядає як одне маленьке зображення, але він перебуває на перетині інтерфейсу браузера, закладок, вкладок, закріплених ярликів, результатів пошуку, головних екранів мобільних пристроїв і встановлень прогресивних вебзастосунків. У кожного контексту трохи різні очікування.

Саме тому поради щодо фавіконів часто здаються хаотичними. Деякі команди постачають лише один favicon.ico, бо колись цього було достатньо. Інші генерують десяток файлів, не знаючи, які з них насправді використовуються. Розумний компроміс менший: зрозуміти, у чому сильні сторони ICO, PNG і SVG, а потім постачати компактний набір, який покриває сучасні браузери та поширені контексти пристроїв.

Фавікони — не місце для демонстрації можливостей пайплайна зображень. Це місце, де варто бути нудними, явними й сумісними.

ICO: старий формат, який відмовляється зникати

ICO — це класичний контейнер іконок Windows. Він може містити кілька растрових зображень різного розміру, зазвичай 16×16, 32×32 і 48×48 пікселів. Це важливо, бо фавікон може відтворюватися дуже малим у вкладці браузера, більшим у списку закладок і ще інакше в ярликах Windows.

Важлива деталь: ICO — це контейнер, а не просто одне зображення. Хороший favicon.ico зазвичай містить кілька растрових розмірів, щоб браузер або операційна система могли вибрати найближчий відповідник замість масштабування одного крихітного бітмапа.

ICO досі корисний із трьох причин:

• Браузери можуть автоматично запитувати /favicon.ico, навіть якщо ви не вказали його в HTML.
• Деякі старіші браузери та інтеграції очікують саме його.
• Це безпечний запасний варіант, коли новіші оголошення іконок ігноруються.

Це не означає, що ICO має бути вашою єдиною іконкою. Його незручно редагувати, він не надто дружній до сучасних робочих процесів і погано підходить як джерело істини для брендового знака. Ставтеся до нього як до запасного варіанта для сумісності.

На практиці розмістіть справжній /favicon.ico у корені сайту. Не віддавайте там 404, якщо не любите шумні логи й зайві повторні запити браузерів.

PNG: надійна робоча конячка

PNG досі є найбільш передбачуваним растровим форматом для фавіконів та touch-іконок. Він підтримує прозорість, має широку підтримку й стабільно поводиться в різних браузерах і на різних платформах.

Для фавіконів PNG корисний, коли потрібні іконки з явно заданим піксельним розміром, наприклад 32×32 або 48×48. Для іконок на головному екрані мобільних пристроїв PNG у деяких середовищах фактично обов’язковий. Наприклад, Apple touch icons у звичайному продакшн-використанні базуються на PNG.

Допоможуть кілька практичних правил:

• Експортуйте з векторного джерела, а не з уже малого бітмапа.
• Зробіть іконку читабельною на 16×16, перш ніж думати про більші розміри.
• Додайте достатньо внутрішніх відступів, щоб знак не здавався обрізаним у заокруглених або маскованих контекстах.
• Уникайте дрібного тексту, тонких ліній і деталізованих ілюстрацій.

Над стисненням PNG для фавіконів зазвичай не варто надмірно перейматися, бо файли крихітні. Водночас не варто постачати touch-іконку на 500 KB лише тому, що вона щойно вийшла з дизайнерського експорту. Якщо ви вже переглядаєте ширший вибір зображень, тут також працює той самий дисциплінований підхід із рішень щодо форматів зображень у сучасному вебі: обирайте формат під задачу, а не тому, що він модний.

SVG: сучасний і гнучкий варіант

SVG-фавікони привабливі тим, що не залежать від роздільної здатності. Один невеликий файл може чітко відтворюватися в багатьох розмірах, а також його можна редагувати безпосередньо в коді або експортувати з дизайнерського ПЗ.

Сучасні версії Chromium, Firefox і Safari підтримують SVG-фавікони. Це робить SVG хорошим основним форматом фавікона для багатьох сайтів, особливо коли іконка — це простий логотип, гліф або геометричний знак.

Але SVG-фавікони мають застереження.

По-перше, SVG має бути самодостатнім. Не покладайтеся на зовнішні шрифти, віддалені зображення або скрипти. Браузери застосовують обмеження до SVG, який використовується як зображення, і навіть якщо щось працює в одному браузері, воно може не спрацювати в іншому.

По-друге, зберігайте візуальну простоту. SVG не розв’язує магічно проблему 16 пікселів. Деталізована векторна ілюстрація все одно перетвориться на розмиту пляму, коли її стиснути до вкладки.

По-третє, обережно з динамічним стилюванням. Деякі команди використовують prefers-color-scheme всередині SVG-фавікона, щоб іконка адаптувалася до темної та світлої тем браузера. Це може працювати, але поведінка браузерів і кешування можуть бути нерівномірними. Якщо впізнаваність бренду важлива, одна надійна іконка часто краща за розумну адаптивну.

SVG — хороше джерело й хороший сучасний формат доставки. Але це не причина відмовлятися від запасних файлів.

Що браузери насправді шукають

Браузери знаходять фавікони двома основними способами: через явні HTML-посилання та неявні запити до кореня.

Неявна поведінка — це старий підхід: якщо браузеру потрібна іконка і він її не знайшов, він може запросити /favicon.ico. Саме тому кореневий ICO-файл залишається корисним навіть на сучасних сайтах.

Явна поведінка використовує елементи <link> у head документа. Компактне сучасне налаштування виглядає так:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Потім маніфест може вказувати на більші PNG-іконки, які використовуються для встановлюваних вебзастосунків:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Це не єдине правильне налаштування, але це хороша базова лінія. Воно дає сучасним браузерам SVG, забезпечує традиційний запасний ICO, покриває збереження на головний екран iOS і підтримує контексти встановлення застосунків.

Набір фавіконів, який варто постачати більшості сайтів

Для звичайного маркетингового сайту, сайту документації, SaaS-застосунку або видання цього набору достатньо:

• /favicon.ico, що містить 16×16 і 32×32, за бажанням 48×48.
• /icon.svg як сучасний масштабований фавікон.
• /apple-touch-icon.png розміром 180×180.
• /icon-192.png і /icon-512.png, якщо у вас є маніфест вебзастосунку.

Ви можете додати більше розмірів, якщо платформа має конкретну вимогу, але не генеруйте десять файлів за звичкою. Кожен додатковий файл — це ще одна річ, яку треба кешувати, не забути, правильно назвати або не залишити застарілою після ребрендингу.

Якщо ваш сайт не є встановлюваним і не має маніфеста, іконки 192 і 512 пікселів можуть бути непотрібні. Якщо ваш сайт поводиться як застосунок, імовірно, вони потрібні.

Типові сценарії збоїв

Найпоширеніші помилки з фавіконами не художні. Це проблеми доставки.

Одна з них — агресивне кешування. Браузери вперто тримаються за фавікони. Під час тестування змінена іконка може не з’явитися, доки ви не виконаєте жорстке оновлення, не очистите дані сайту, не використаєте нове ім’я файлу або не протестуєте у свіжому профілі. Для продакшн-ребрендингів зміна /icon.svg?v=2 може допомогти в HTML, але з кореневим /favicon.ico складніше, бо браузери запитують його напряму. Заміна файлу й очікування завершення дії кешів часто є частиною роботи.

Інша поширена проблема — неправильний MIME-тип. SVG має віддаватися як image/svg+xml, PNG як image/png, а ICO зазвичай як image/x-icon або image/vnd.microsoft.icon. Багато браузерів поблажливі, але не всі контексти такі. Якщо щось ламається лише в одному браузері, перевірте мережеву відповідь, перш ніж перемальовувати іконку. Тут працюють ті самі звички, що й під час налагодження редиректів і HTTP-заголовків у продакшні: дивіться на фактичну відповідь, а не на те, що CMS нібито віддає.

Третя проблема — щільність дизайну. Логотипи, які чудово працюють у шапці сайту, часто провалюються як фавікони. Іконка вкладки — жорсткий тест. Приберіть слова, спростіть форми, підвищте контраст і тестуйте в реальних розмірах. Якщо іконка є змістовним контентом усередині сторінки, тоді питання доступності, як-от alt-текст, мають значення; для самого фавікона це декорація інтерфейсу браузера, а не контент сторінки. Про цю різницю читайте в нашому прагматичному посібнику з alt-тексту для зображень.

<!-- tool-cta:start -->

💡 Спробуйте: Згенеруйте варіанти ICO, PNG і SVG, яких очікують сучасні браузери, за один прохід за допомогою Ultimate Favicon Generator.

<!-- tool-cta:end -->

Простий чекліст впровадження

Скористайтеся цим чеклістом перед релізом:

1. Почніть із чистого векторного майстра.
2. Перевірте знак у розмірах 16×16 і 32×32.
3. Експортуйте самодостатній SVG-фавікон.
4. Згенеруйте багаторозмірний запасний ICO.
5. Експортуйте Apple touch icon 180×180.
6. Додайте PNG 192×192 і 512×512, якщо використовуєте маніфест.
7. Розмістіть /favicon.ico у корені сайту.
8. Перевірте коди статусу, MIME-типи та заголовки кешування.
9. Протестуйте принаймні в одному браузері Chromium, Firefox і Safari, якщо ваша аудиторія включає пристрої Apple.

Фавікони малі, але дуже помітні. Зламаний фавікон створює відчуття незавершеності сайту. Добре зроблений зникає в інтерфейсі — і саме в цьому сенс.