Favicon UX: Какво прави един favicon отличен

Отличният favicon е прост знак с висок контраст, обикновено вашият логотип-символ или една-две букви, който остава четим на 16x16 пиксела както върху светли, така и върху тъмни табове на браузъра, отговаря на марката ви и рядко се променя. Всичко останало в това ръководство (подравняване по пиксели, цвят, отстояния, прозрачност, размер на файла) служи на тези цели: да направи сайта ви лесен за намиране сред десетки отворени табове.

Favicon-ът е мъничък, но се появява на много места: в табовете на браузъра, в лентите с отметки, в историята, в менюто за търсене в табове, в резултатите от търсене в Google на мобилни и настолни устройства и на началните екрани на телефоните. При потребители с много отворени табове заглавието често се скъсява до нищо и иконата е единственият останал ориентир. Това я прави реален навигационен елемент, а не декорация.

1. Четимост на 16x16

Класическият размер на favicon е 16x16 CSS пиксела. На стандартен дисплей това са буквално 256 пиксела; на 2x retina дисплей браузърът обикновено избира изображение 32x32 за същото място. Каквото и да проектирате, то трябва да издържи това намаляване.

Запазете го просто

• Една форма или една до две букви. Работят една плътна буква, кръг със символ или проста геометрична фигура. Три букви или дума ще се превърнат в шум.
• Една фокусна точка. Ако не можете да опишете иконата с пет думи, тя е прекалено сложна.
• Без градиенти, сенки или фини текстури. При малки размери те се превръщат в размазани петна.

Подравнете към пикселната мрежа

На 16x16 линия, поставена на половин пиксел встрани от мрежата, се заглажда (anti-aliasing) върху два реда пиксели и изглежда сива и размазана. Поставяйте краищата върху цели пикселни граници и използвайте четни ширини там, където формата е симетрична. Ако експортирате от векторен инструмент, включете залепването към пиксели (pixel snapping) или проверете намаления резултат и го коригирайте на ръка.

Избягвайте тънки линии

Щрихи, по-тънки от 2 пиксела на 16x16 (около 12 процента от ширината на иконата), са склонни да изчезват или да примигват между различните размери. Удебелете щрихите, махнете вътрешните детайли и обединете малките пролуки. Плътен, леко тежък знак обикновено се чете по-добре от вярна миниатюра на детайлно лого.

Донастройте на ръка

ICO и PNG файловете нямат шрифтов hinting, така че ръчното редактиране на пиксели е неговият еквивалент: нагласяте отделни пиксели, така че кривите, диагоналите и вътрешните отвори (дупките в букви като „а“ или „е“) да останат ясни. Автоматичното намаляване е добра първа чернова, но няколко ръчно поставени пиксела често правят разликата между петно и разпознаваема буква. Пиксел редакторът на MakeFav е създаден за това: отворете платното 16x16, поправете проблемните пиксели и експортирайте.

2. Контраст върху светли и тъмни табове

Браузърите вече често работят в тъмен режим, а много потребители имат ленти с табове, различни от темата на страницата. Тъмносиня икона с прозрачен фон може да е идеална върху бял таб и почти невидима върху тъмносив. Винаги тествайте и двата варианта.

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

• Добавете фонова форма. Плътен заоблен квадрат или кръг във фирмен цвят гарантира, че знакът има собствен контраст независимо от таба.
• Използвайте тънък контур или ореол. По-светъл ръб от 1 px около тъмен знак (или обратното) запазва силуета видим и в двете теми, но на 16x16 трябва да остане ясен, затова го тествайте.
• Изберете фирмени цветове със среден тон. Цветове като наситено синьо, оранжево, зелено или маджента обикновено работят както на бели, така и на почти черни повърхности. Рисковите са много светложълтото и много тъмносиньото.
• Използвайте адаптивен SVG favicon. 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 favicon също варира: Chrome и Firefox ги поддържат, докато Safari исторически изостава, затова винаги дръжте резервни PNG или ICO файлове. Дизайнът с плътен фон е най-надеждният вариант, защото изобщо не се нуждае от логика за темите.

3. Разпознаваемост и последователност на марката

Използвайте логотипа-символ (символа или монограма), а не пълния логотип с надписа. Текстът в икона 16x16 е нечетим, а широко хоризонтално лого, смачкано в квадрат, оставя само малка ивица по средата.

• Ако марката ви има символ, опростете го за малки размери, вместо просто да го намалявате. „Favicon версия“ с по-малко детайли е стандартна практика.
• Ако марката ви е само надпис, вземете първата буква или отличителна двойка букви и ги изпишете с фирмения си шрифт в тежко начертание.
• Поддържайте цветовете в съответствие с логото, иконата на приложението и социалните аватари, така че потребителят да разпознава една и съща марка навсякъде.

Отличителността е толкова важна, колкото и вярността към оригинала. Погледнете редица от табове: ако още три сайта също използват син кръг, вашият няма да се откроява. Различна форма или цвят са по-полезни от напълно вярно умаление.

4. Цвят: ограничена, наситена палитра

При толкова малко пиксели всеки допълнителен цвят добавя хаос. Стремете се към един или два цвята плюс най-много бяло или черно. Наситените цветове се виждат по-добре при малки размери от пастелните, които се сливат с фона на таба.

Вземете малко от мисленето за достъпност. WCAG изисква поне 3:1 контраст за значими графични обекти (критерий за успех 1.4.11, Non-text Contrast). Favicon формално не попада в обхвата, тъй като е част от интерфейса на браузъра, а не от съдържанието на страницата, но 3:1 между знака и фона му, както и между иконата и таба, е разумна цел. Избягвайте също да предавате информация само чрез нюанс: червени и зелени варианти на една и съща икона са неразличими за много хора с цветна слепота, затова променяйте формата или добавяйте символ.

5. Форма, отстояния и безопасни зони

Запълнете квадрата

Табовете на браузъра показват favicon с фиксиран малък размер, така че допълнителният margin само смалява знака ви. За стандартните икони на табове използвайте по-голямата част от платното, с само един-два пиксела свободно място, така че знакът да е възможно най-голям.

Заоблена или квадратна?

Браузърите по принцип не изрязват favicon в табовете, така че формата, която нарисувате, е формата, която потребителите виждат. Квадрат с леко заоблени ъгли изглежда подредено и дава последователен фон; свободен знак или кръг върху прозрачност може да изглежда по-леко и по-отличително. И двата варианта са добри. Изберете един и поддържайте целия си набор от икони последователен.

Apple touch икони

iOS добавя собствени заоблени ъгли към apple-touch-icon (обичайният размер е 180x180). Подайте квадрат на цяла площ (full-bleed) без предварително заоблени ъгли, иначе може да се получат видими тъмни или бели ивици в ъглите.

Maskable икони за Android и PWA

Maskable иконите се изрязват от операционната система в кръгове, суперелипси или други форми. Дръжте цялото важно съдържание в безопасната зона: кръг, центриран в иконата, с радиус 40 процента от ширината на иконата. Разпънете фоновия цвят чак до краищата, така че всяка маска да изглежда правилно. Не използвайте повторно плътно запълнена от край до край favicon за табове като maskable икона, защото маската ще я отреже.

6. Прозрачност

Прозрачността е наред при favicon за табове и именно тя позволява на икона само със знак да стои чисто върху всеки цвят на таба. Проблем е при Apple touch иконите: iOS запълва прозрачните области с плътен цвят (обикновено черен), което може да съсипе дизайна. Винаги давайте на apple-touch-icon непрозрачен фон във фирмения ви цвят. Същото важи за maskable иконите и повечето случаи на употреба върху началния екран на Android, където непрозрачният фон дава предвидими резултати.

7. Стабилност: не го сменяйте твърде често

Favicon изгражда разпознаваемост чрез повторение. Честата му смяна принуждава потребителите да научават отново кой таб е вашият, а също създава технически главоболия. Браузърите кешират favicon агресивно, а Google ги извлича и съхранява отделно от страниците ви, така че новата икона може да отнеме дни или седмици, докато се покаже в резултатите от търсенето. Google също изисква стабилен URL адрес на favicon, икона с размер, кратен на 48 пиксела (48x48, 96x96 и т.н.), и файл, който може да бъде обходен (не е блокиран от robots.txt). Третирайте смяната на favicon като решение на ниво ребрандиране, а не като сезонна украса.

8. Състояния на известия и динамични favicon

Някои уеб приложения променят favicon, за да покажат непрочетени съобщения, състояние на запис или грешка. Ако е направено добре, е полезно; ако е прекалено, дразни.

• Използвайте малка значка (точка или кратък брояч) в ъгъл, а не пълен редизайн. Базовата икона трябва да остане разпознаваема.
• Бъдете пестеливи. Запазете значките за събития, които изискват действие от потребителя. Не анимирайте иконата непрекъснато.
• Ограничавайте числата. На 16x16 са четими само една или две цифри; показвайте „9+“ или обикновена точка вместо „137“.
• Нулирайте веднага, когато потребителят се е справил с елемента, и възстановете иконата по подразбиране.
• Не разчитайте само на цвета. Червената точка трябва да се подкрепя и от заглавието на страницата, например „(3) Входящи“, така че информацията да е достъпна за всички.

Динамичните favicon обикновено се рисуват върху canvas и се подменят чрез обновяване на href на елемента link за иконата. Ограничавайте честотата на обновяване, защото постоянната смяна на favicon може да натоварва процесора и да разсейва потребителите.

9. Производителност

Favicon са малки, но все пак са заявки, които могат да бъдат реализирани зле.

• Дръжте файловете малки. PNG favicon обикновено е от няколкостотин байта до няколко килобайта. Простият SVG може да е под 1 KB.
• Избягвайте раздути 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'>

Ако искате да генерирате всички тези файлове от едно изходно изображение, генераторът на favicon MakeFav създава стандартния набор, а страницата за разработчици описва възможностите за интеграция.

10. Достъпност

Favicon няма алтернативен текст и екранните четци не го обявяват, така че традиционните инструменти за достъпност като атрибутите alt не се прилагат. Какво има значение:

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

Чеклист за favicon UX

Чеклист за тестване

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

1. Няколко браузъра. Проверете Chrome, Firefox, Safari и Edge, тъй като всеки избира икони и размери малко по различен начин.
2. Светъл и тъмен режим. Сменяйте темата на ОС и на браузъра и всеки път гледайте лентата с табове.
3. Retina и стандартни дисплеи. Проверете на монитор 1x и на екран 2x или 3x и увеличете мащаба в браузъра.
4. Лента с отметки. Добавете страницата в отметки и вижте дали иконата все още е четима до други сайтове.
5. Много табове. Отворете 20 таба и вижте дали можете да намерите вашия с един поглед.
6. Преглед в Google SERP. Проверете мобилен резултат от търсене, след като иконата е била обходена отново. Не забравяйте, че обновяването може да отнеме време.
7. Начален екран. Добавете сайта на началния екран на iOS и Android и се уверете, че иконата не е отрязана, няма черни ъгли и не е твърде малка в рамките на маската си.
8. Техническа проверка. Прекарайте домейна си през проверката за favicon на MakeFav, за да потвърдите, че файловете съществуват, връщат статус 200, имат правилните размери и са декларирани коректно във вашия HTML.

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

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

Favicon е един от най-малките ресурси на сайта ви и един от най-често вижданите. Няколко внимателни решения относно контраста, простотата и последователността го карат да работи във всеки таб, тема и устройство.

Често задавани въпроси

Какъв размер трябва да има favicon?

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

Трябва ли да използвам пълното си лого като favicon?

Обикновено не. Пълните лога с надписи са прекалено детайлни и прекалено широки за квадратна икона 16x16. Използвайте логотипа-символ или монограм от една-две букви и го опростете, така че да остане разпознаваем, когато е мъничък.

Как да накарам favicon да работи в тъмен режим?

Най-сигурният подход е да дадете на иконата собствена плътна фонова форма или контрастен контур, така че да не зависи от цвета на таба. Като алтернатива използвайте SVG favicon с медийна заявка prefers-color-scheme за смяна на цветовете и дръжте резервни PNG или ICO файлове за браузъри, които не поддържат SVG икони. Винаги тествайте и в светла, и в тъмна тема.

Защо новият ми favicon не се показва?

Браузърите кешират favicon за дълго време, а Google съхранява собствено копие, което обновява по свой график, често отнемащ дни или седмици. Направете принудително опресняване на страницата (hard refresh), изчистете кеша на браузъра, използвайте ново версионирано име на файла и се уверете, че link таговете и коренният /favicon.ico сочат към правилния файл. Можете да проверите настройката с проверката на MakeFav.

Добра идея ли е да се показват значки за известия върху favicon?

Да, ако се използват пестеливо. Малка точка или брояч с една или две цифри помага на потребителите да забележат нещо, което изисква действие, но постоянната анимация или големите числа вредят на четимостта и вниманието. Винаги отразявайте състоянието в заглавието на страницата, възстановявайте иконата по подразбиране, когато елементът е обработен, и не разчитайте само на цвета.