UX фавікона: що робить фавікон чудовим

Чудовий фавікон — це простий контрастний знак, зазвичай ваш логознак або одна-дві літери, який залишається читабельним у 16x16 пікселів як на світлих, так і на темних вкладках браузера, відповідає вашому бренду та рідко змінюється. Усе інше в цьому посібнику (вирівнювання за пікселями, колір, відступи, прозорість, розмір файлу) працює на ці цілі: зробити ваш сайт миттєво впізнаваним серед десятків відкритих вкладок.

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

1. Читабельність у 16x16

Класичний розмір фавікона — 16x16 CSS-пікселів. На стандартному екрані це буквально 256 пікселів; на retina-екрані 2x браузер зазвичай бере для цього самого місця зображення 32x32. Те, що ви створюєте, має пережити таке зменшення.

Робіть просто

• Одна форма або одна-дві літери. Підійде одна жирна літера, коло із символом або проста геометрична фігура. Три літери чи слово перетворяться на шум.
• Одна точка уваги. Якщо ви не можете описати значок п’ятьма словами, він надто складний.
• Жодних градієнтів, тіней чи дрібних текстур. У малих розмірах вони перетворюються на розмиті плями.

Вирівнюйте за піксельною сіткою

У 16x16 лінія, зміщена на пів пікселя від сітки, згладжується на два ряди пікселів і виглядає сірою та м’якою. Розташовуйте межі по цілих пікселях і використовуйте парну ширину там, де форма симетрична. Якщо ви експортуєте з векторного інструмента, увімкніть прив’язку до пікселів або перевірте зменшений результат і виправте його вручну.

Уникайте тонких ліній

Штрихи тонші за 2 пікселі в 16x16 (близько 12 відсотків ширини значка) схильні зникати або мерехтіти між розмірами. Робіть штрихи товстішими, прибирайте внутрішні деталі та зливайте маленькі проміжки. Жирний, трохи важкий гліф зазвичай читається краще, ніж точна мініатюра деталізованого логотипу.

Хінтинг уручну

Файли ICO і PNG не мають хінтингу, як шрифти, тому його аналог — ручне редагування пікселів: ви коригуєте окремі пікселі, щоб криві, діагоналі та контрформи (отвори в літерах на кшталт "a" чи "e") залишалися чіткими. Автоматичне зменшення — гарна чернетка, але кілька пікселів, розставлених уручну, часто відрізняють пляму від впізнаваної літери. Піксельний редактор MakeFav створений саме для цього: відкрийте полотно 16x16, виправте проблемні пікселі та експортуйте.

2. Контраст на світлих і темних вкладках

Браузери тепер часто працюють у темному режимі, а в багатьох користувачів панель вкладок відрізняється від теми сторінки. Темно-синій значок із прозорим тлом може ідеально виглядати на білій вкладці й майже зникати на темно-сірій. Завжди тестуйте обидва варіанти.

Практичні рішення

• Додайте фонову форму. Суцільний скруглений квадрат або коло в кольорі бренду гарантує, що знак має власний контраст незалежно від вкладки.
• Використайте тонкий контур або ореол. Світліша межа завтовшки 1 px навколо темного гліфа (або навпаки) зберігає силует видимим в обох темах, але в 16x16 вона має лишатися чіткою, тож протестуйте її.
• Обирайте середні тони бренду. Такі кольори, як насичений синій, помаранчевий, зелений чи пурпуровий, зазвичай добре працюють і на білому, і на майже чорному тлі. Ризиковані — дуже світло-жовтий і дуже темно-синій.
• Використайте адаптивний SVG-фавікон. SVG може містити медіазапит prefers-color-scheme, тож значок змінюватиметься разом із системною темою.

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

Зауважте, що медіазапит відображає тему операційної системи або браузера, якої зазвичай дотримується й панель вкладок, але не завжди. Підтримка SVG-фавіконів також різниться: Chrome і Firefox їх обробляють, тоді як Safari історично відставав, тож завжди залишайте резервні PNG або ICO. Дизайн із суцільним фоном — найнадійніший варіант, оскільки йому не потрібна жодна логіка тем.

3. Впізнаваність і послідовність бренду

Використовуйте логознак (символ або монограму), а не повний логотип із текстовою частиною. Текст усередині значка 16x16 нечитабельний, а широкий горизонтальний логотип, стиснутий у квадрат, залишає лише крихітну смужку посередині.

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

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

4. Колір: обмежена насичена палітра

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

Запозичте дещо з мислення про доступність. WCAG вимагає контрасту щонайменше 3:1 для значущих графічних об’єктів (критерій успішності 1.4.11, Non-text Contrast). Фавікон формально під це не підпадає, оскільки це елемент інтерфейсу браузера, а не вміст сторінки, але 3:1 між гліфом і його тлом, а також між значком і вкладкою — розумна мета. Також не передавайте жодну інформацію лише відтінком: червоний і зелений варіанти того самого значка невиразні для багатьох людей із порушенням кольоросприйняття, тож змінюйте форму або додавайте символ.

5. Форма, відступи та безпечні зони

Заповнюйте квадрат

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

Скруглений чи квадратний?

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

Apple touch icons

iOS додає власні скруглені кути до apple-touch-icon (зазвичай 180x180). Надайте квадрат без полів, без заздалегідь скруглених кутів, інакше в кутах можуть з’явитися помітні темні чи білі смужки.

Maskable-іконки для Android і PWA

Maskable-іконки операційна система обрізає до кіл, «сквірклів» чи інших форм. Тримайте весь важливий вміст усередині безпечної зони: кола в центрі значка з радіусом 40 відсотків ширини значка. Розтягніть колір фону до самих країв, щоб будь-яка маска виглядала правильно. Не використовуйте щільний фавікон вкладки «від краю до краю» як maskable-іконку, бо маска його обріже.

6. Прозорість

Прозорість допустима для фавіконів вкладок, і саме вона дозволяє значку лише з гліфом чисто виглядати на будь-якому кольорі вкладки. Але вона є проблемою для Apple touch icons: iOS заповнює прозорі ділянки суцільним кольором (зазвичай чорним), що може зіпсувати дизайн. Завжди давайте apple-touch-icon непрозорий фон у кольорі бренду. Те саме стосується maskable-іконок і більшості сценаріїв для домашнього екрана Android, де непрозорий фон дає передбачуваний результат.

7. Стабільність: не змінюйте його надто часто

Фавікон формує впізнаваність через повторення. Часта зміна змушує користувачів заново вчитися, яка вкладка ваша, а ще створює технічні клопоти. Браузери агресивно кешують фавікони, а Google отримує та зберігає їх окремо від ваших сторінок, тож новий значок може з’явитися в пошуковій видачі лише через дні чи тижні. Google також вимагає стабільної URL-адреси фавікона, значка, розмір якого кратний 48 пікселям (48x48, 96x96 тощо), і файлу, доступного для сканування (не заблокованого в robots.txt). Ставтеся до зміни фавікона як до рішення рівня ребрендингу, а не сезонної прикраси.

8. Стани сповіщень і динамічні фавікони

Деякі вебзастосунки змінюють фавікон, щоб показати непрочитані повідомлення, стан запису чи помилку. Якщо зроблено добре, це корисно; якщо переборщити — дратує.

• Використовуйте невеликий бейдж (крапку або коротке число) у куті, а не повністю змінений дизайн. Базовий значок має залишатися впізнаваним.
• Не зловживайте. Залишайте бейджі для подій, що потребують дії користувача. Не анімуйте значок безперервно.
• Обмежуйте числа. У 16x16 читабельні лише одна-дві цифри; показуйте "9+" або просто крапку замість "137".
• Швидко скидайте бейдж, коли користувач опрацював елемент, і відновлюйте стандартний значок.
• Не покладайтеся лише на колір. Червону крапку слід підкріплювати заголовком сторінки, наприклад "(3) Вхідні", щоб інформація була доступна кожному.

Динамічні фавікони зазвичай малюють на canvas і підміняють, оновлюючи href елемента link зі значком. Обмежуйте частоту оновлень, адже постійна зміна фавікона може навантажувати процесор і відволікати користувачів.

9. Продуктивність

Фавікони невеликі, але це все одно запити, які можна зробити погано.

• Тримайте файли малими. PNG-фавікон зазвичай важить від кількох сотень байтів до кількох кілобайтів. Простий SVG може бути менш ніж 1 КБ.
• Уникайте роздутих ICO-файлів. Багаторозмірного ICO із зображеннями 16, 32 і 48 пікселів достатньо. Вбудовування зображення 256x256 багаторазово збільшує розмір файлу без помітної користі у вкладках браузера.
• Налаштуйте заголовки кешування. Віддавайте значки з тривалим терміном Cache-Control, наприклад public, max-age=31536000, immutable, і використовуйте версійне або хешоване ім’я файлу, коли ви їх змінюєте.
• Оголошуйте значки явно. Браузери за замовчуванням запитують /favicon.ico, тож надайте його, навіть якщо оголошуєте інші значки, щоб уникнути шуму 404 у журналах.
• Стискайте. Пропускайте PNG через оптимізатор без втрат і мініфікуйте SVG.

<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='/manifest.webmanifest'>

Якщо ви хочете згенерувати всі ці файли з одного вихідного зображення, генератор фавіконів MakeFav створює стандартний набір, а сторінка для розробників описує варіанти інтеграції.

10. Доступність

Фавікон не має альтернативного тексту, а скрінрідери його не озвучують, тож традиційні інструменти доступності, як-от атрибути alt, тут не застосовні. Що справді важливо:

• Зміст передає заголовок сторінки. Пишіть унікальні, змістовні елементи <title>. Ніколи не покладайтеся на значок для передачі стану; дублюйте будь-який бейдж у заголовку.
• Видимість для людей зі слабким зором. Високий контраст, жирна форма та великий знак допомагають користувачам, які візуально переглядають вкладки.
• Незалежність від кольору. Переконайтеся, що стани розрізняються формою чи літерами, а не лише відтінком.
• Менше відволікань. Уникайте блимальних чи анімованих фавіконів, які можуть бути проблемою для користувачів, чутливих до руху.

Чекліст UX фавікона

Чекліст тестування

Не довіряйте великому попередньому перегляду у вашому дизайнерському інструменті. Тестуйте справжній значок у реальних умовах:

1. Кілька браузерів. Перевірте Chrome, Firefox, Safari та Edge, адже кожен вибирає значки й розміри трохи по-різному.
2. Світлий і темний режими. Перемикайте тему ОС і браузера та щоразу дивіться на панель вкладок.
3. Retina та стандартні екрани. Перевірте на моніторі 1x та екрані 2x чи 3x, а також масштабуйте сторінку в браузері.
4. Панель закладок. Додайте сторінку в закладки та подивіться, чи значок залишається читабельним поруч з іншими сайтами.
5. Багато вкладок. Відкрийте 20 вкладок і перевірте, чи можете знайти свою з першого погляду.
6. Попередній перегляд у Google SERP. Перевірте мобільний результат пошуку після повторного сканування значка. Пам’ятайте, що оновлення може зайняти час.
7. Домашній екран. Додайте сайт на домашній екран iOS і Android та переконайтеся, що значок не обрізаний, не має чорних кутів і не надто малий усередині своєї маски.
8. Технічна перевірка. Прогоніть свій домен через перевірку фавіконів MakeFav, щоб підтвердити, що файли існують, повертають статус 200, мають потрібні розміри та правильно оголошені у вашому HTML.

Практичний робочий процес

1. Почніть зі свого логознака та спростіть його до однієї форми або літери.
2. Створіть квадратне полотно із суцільним або фігурним фоном, що працює в обох темах.
3. Експортуйте розміри 32x32 і 16x16 та доопрацюйте малу версію вручну в піксельному редакторі.
4. Згенеруйте повний набір (ICO, PNG, apple-touch-icon, іконки маніфесту) за допомогою генератора.
5. Додайте теги link, налаштуйте заголовки кешування, розгорніть і перевірте за допомогою перевірки.

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

Поширені запитання

Якого розміру має бути фавікон?

Проєктуйте для 16x16 і 32x32 для вкладок браузера (на екранах з високою щільністю браузер використовує 32x32), надайте apple-touch-icon 180x180 для iOS і PNG 192x192 та 512x512 для Android і PWA. Для результатів пошуку Google використовуйте квадратний значок, розмір якого кратний 48 пікселям, наприклад 48x48 або 96x96. Вихідний SVG масштабується до всіх цих розмірів.

Чи варто використовувати повний логотип як фавікон?

Зазвичай ні. Повні логотипи з текстовою частиною надто деталізовані та надто широкі для квадратного значка 16x16. Використовуйте логознак або монограму з однієї-двох літер і спростіть її, щоб вона залишалася впізнаваною в мініатюрі.

Як зробити, щоб фавікон працював у темному режимі?

Найнадійніший підхід — дати значку власну суцільну фонову форму або контрастний контур, щоб він не залежав від кольору вкладки. Крім того, можна використати SVG-фавікон із медіазапитом prefers-color-scheme для зміни кольорів і залишити резервні PNG або ICO для браузерів, які не підтримують SVG-значки. Завжди тестуйте і у світлій, і в темній темах.

Чому мій новий фавікон не відображається?

Браузери кешують фавікони надовго, а Google зберігає власну копію, яку оновлює за своїм розкладом, часто це займає дні чи тижні. Виконайте жорстке оновлення сторінки, очистіть кеш браузера, використайте нове версійне ім’я файлу та переконайтеся, що теги link і кореневий /favicon.ico вказують на правильний файл. Налаштування можна перевірити за допомогою перевірки MakeFav.

Чи варто показувати бейджі сповіщень на фавіконі?

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