UX фавикона: Шта чини одличан фавикон

Одличан фавикон је једноставан, високо контрастан знак, обично ваш логомарк или једно или два слова, који остаје читљив на 16x16 пиксела и на светлим и на тамним картицама прегледача, одговара вашем бренду и ретко се мења. Све остало у овом водичу (поравнање по пикселима, боје, маргине, провидност, величина фајла) служи тим циљевима: да ваш сајт буде одмах уочљив међу десетинама отворених картица.

Фавикон је sићушан, али се појављује на много места: на картицама прегледача, у тракама са обележивачима, у историји, у менију за претрагу картица, у Google резултатима претраге на мобилним уређајима и рачунарима, као и на почетним екранима телефона. Корисницима који имају отворено много картица наслов је често скраћен до непостојања, а иконица је једини траг који им је остао. Зато је она прави навигациони елемент, а не украс.

1. Читљивост на 16x16

Класична величина фавикона је 16x16 CSS пиксела. На стандардном екрану то је буквално 256 пиксела; на ретина екрану са густином 2x прегледач за исти простор обично бира слику 32x32. Шта год да дизајнирате, мора да издржи ово смањење.

Нека буде једноставно

• Један облик или једно до два слова. Функционише једно подебљано слово, круг са симболом или једноставан геометријски знак. Три слова или реч претвориће се у шум.
• Једна жижна тачка. Ако иконицу не можете да опишете у пет речи, превише је сложена.
• Без градијената, сенки и ситних текстура. На малим величинама претварају се у замагљене мрље.

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

На 16x16 линија која је за пола пиксела померена са мреже сглађује се преко два реда пиксела и изгледа сиво и мекано. Поставите ивице на целе границе пиксела и користите парне ширине тамо где је облик симетричан. Ако извозите из векторског алата, укључите прилепљивање на пикселе или проверите смањени резултат и поправите га ручно.

Избегавајте танке линије

Потези тањи од 2 пиксела на 16x16 (око 12 процената ширине иконице) обично нестану или трепере између величина. Задебљајте потезе, уклоните унутрашње детаље и спојите мале размаке. Подебљан, помало тежак глиф обично се чита боље од верне минијатуре детаљног логотипа.

Дотерајте ручно

ICO и PNG фајлови немају хинтинг као фонтови, па је ручна измена пиксела његов еквивалент: подешавате појединачне пикселе тако да кривине, дијагонале и унутрашњости (рупе у словима као што су „a“ или „e“) остану оштре. Аутоматско смањивање је добра прва верзија, али неколико ручно постављених пиксела често прави разлику између мрље и препознатљивог слова. MakeFav пиксел едитор направљен је управо за то: отворите платно 16x16, исправите проблематичне пикселе и извезите.

2. Контраст на светлим и тамним картицама

Прегледачи се данас често користе у тамном режиму, а многи корисници имају траку са картицама која се разликује од теме странице. Тамноплава иконица са провидном позадином може бити савршена на белој картици, а готово невидљива на тамносивој. Увек тестирајте обе.

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

• Додајте облик у позадини. Пуно заобљено поље или круг у боји бренда гарантује да знак има сопствени контраст, без обзира на картицу.
• Користите танак обрис или ореол. Светлија ивица од 1px око тамног глифа (или обрнуто) одржава силуету видљивом на обе теме, али на 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. Боје: ограничена, засићена палета

Са толико мало пиксела, свака додатна боја додаје нered. Циљајте на једну или две боје плус, највише, белу или црну. Засићене боје боље се виде на малим величинама од пастелних, које се обично стопе са позадином картице.

Позајмите мало из размишљања о приступачности. WCAG тражи контраст од најмање 3:1 за значајне графичке објекте (критеријум успеха 1.4.11, Контраст нетекстуалних елемената). Фавикон формално није обухваћен, пошто је део интерфејса прегледача, а не садржаја странице, али 3:1 између глифа и његове позадине, као и између иконице и картице, добар је циљ. Такође избегавајте да било шта преносите само нијансом: црвена и зелена варијанта исте иконице неразлучиве су многим особама са поремећајем вида за боје, зато мењајте облик или додајте симбол.

5. Облик, маргине и безбедне зоне

Испуните квадрат

Картице прегледача приказују фавикон у фиксној малој величини, па вам додатна маргина само смањује знак. За стандардне иконице картица искористите већину платна, са само пикселом или два простора, да знак буде што већи.

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

Прегледачи углавном не опсецају фавиконе на картицама, па је облик који нацртате облик који корисници виде. Квадрат са благо заобљеним угловима изгледа уредно и даје доследну позадину; глиф слободног облика или круг на провидној позадини може деловати лакше и особеније. Обоје је у реду. Изаберите једно и држите цео сет иконица доследним.

Apple touch иконице

iOS сам додаје заобљене углове на apple-touch-icon (уобичајена величина је 180x180). Доставите квадрат до ивица без унапред заобљених углова, иначе у угловима можете добити видљиве тамне или беле траке.

Маскирајуће иконице за Android и PWA

Маскирајуће иконице оперативни систем опсеца у кругове, скруглове или друге облике. Држите сав важан садржај унутар безбедне зоне: круга центрираног у иконици са полупречником од 40 процената ширине иконице. Проширите боју позадине до самих ивица да би свака маска изгледала исправно. Немојте поново користити збијени фавикон картице од ивице до ивице као маскирајућу иконицу, јер ће га маска опсећи.

6. Провидност

Провидност је у реду за фавиконе на картицама и управо она омогућава да иконица само са глифом чисто стоји на било којој боји картице. Проблем је за Apple touch иконице: iOS попуњава провидна подручја једнобојном бојом (обично црном), што може да уништи дизајн. Увек дајте apple-touch-icon-у непровидну позадину у боји вашег бренда. Исто важи и за маскирајуће иконице и већину случајева употребе на почетном екрану Androida, где непровидна позадина даје предвидив резултат.

7. Стабилност: немојте га мењати пречесто

Фавикон гради препознатљивост понављањем. Често мењање приморава кориснике да изнова уче која је картица ваша, а изазива и техничке главобоље. Прегледачи агресивно кеширају фавиконе, а Google их преузима и чува одвојено од ваших страница, па нова иконица може да се појави у резултатима претраге тек након неколико дана или недеља. Google такође тражи стабилан URL фавикона, иконицу чија је величина умножак од 48 пиксела (48x48, 96x96 итд.) и фајл који може да прегледа (који није блокиран у robots.txt). Промену фавикона третирајте као одлуку нивоа редизајна бренда, а не као сезонску декорацију.

8. Стања обавештења и динамички фавиконе

Неке веб апликације мењају фавикон да би указале на непрочитане поруке, статус снимања или грешку. Добро урађено, то је корисно; претерано, иритантно је.

• Користите малу значку (тачку или кратак број) у углу, а не потпуни редизајн. Основна иконица треба да остане препознатљива.
• Будите уздржани. Значке резервишите за догађаје који захтевају радњу корисника. Немојте непрекидно анимирати иконицу.
• Ограничите бројеве. На 16x16 читљива су само једна или две цифре; прикажите „9+“ или обичну тачку уместо „137“.
• Одмах ресетујте када корисник обради ставку и вратите подразумевану иконицу.
• Не ослањајте се само на боју. Црвену тачку треба да поткрепи и наслов странице, на пример „(3) Пријемно сандуче“, да би информација била доступна свима.

Динамички фавиконе обично се цртају на canvas-у и замењују ажурирањем атрибута href елемента link за иконицу. Ограничите учесталост ажурирања, јер стално мењање фавикона може да троши CPU и омета кориснике.

9. Перформансе

Фавиконе су мали, али су и даље захтеви који могу бити лоше изведени.

• Држите фајлове малим. PNG фавикон обично има од неколико стотина бајтова до неколико килобајта. Једноставан SVG може бити мањи од 1 KB.
• Избегавајте надуване ICO фајлове. Довољан је ICO са више величина, са сликама од 16, 32 и 48 пиксела. Уметање слике 256x256 вишеструко повећава величину фајла без видљиве користи на картицама прегледача.
• Поставите заглавља за кеширање. Сервирајте иконице са дугим веком Cache-Control, на пример public, max-age=31536000, immutable, и користите верзионисано или хеширано име фајла када их мењате.
• Експлицитно декларишите иконице. Прегледачи подразумевано траже /favicon.ico, па га обезбедите чак и ако декларишете друге иконице, да избегнете 404 шум у логовима.
• Компресујте. Пропустите PNG-ове кроз optimizer без губитака и минификујте 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. Ретина и стандардни екрани. Проверите на монитору 1x и на екрану 2x или 3x и зумирајте у прегледачу.
4. Трака са обележивачима. Додајте страницу у обележиваче и погледајте да ли је иконица и даље читљива поред других сајтова.
5. Много картица. Отворите 20 картица и видите можете ли да пронађете своју на први поглед.
6. Преглед у Google SERP-у. Проверите мобилни резултат претраге пошто се иконица поново прегледа. Запамтите да ажурирање може потрајати.
7. Почетни екран. Додајте сајт на почетне екране iOS-а и Androida и проверите да иконица није опсечена, нема црне углове и није премала унутар своје маске.
8. Техничка провера. Пропустите свој домен кроз MakeFav проверу фавикона да потврдите да фајлови постоје, враћају статус 200, имају праве величине и исправно су декларисани у вашем HTML-у.

Практичан радни ток

1. Почните од свог логомарка и поједноставите га на један облик или слово.
2. Направите квадратно платно са пуном или обликованом позадином која ради у обе теме.
3. Извезите величине 32x32 и 16x16 и ручно дотерајте малу верзију у пиксел едитору.
4. Генеришите цео сет (ICO, PNG, apple-touch-icon, иконице за manifest) помоћу генератора.
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 провере.

Да ли је добра идеја приказивати значке обавештења на фавикону?

Да, ако се користе штедљиво. Мала тачка или број са једном или две цифре помаже корисницима да примете нешто што захтева радњу, али стална анимација или велики бројеви штете читљивости и пажњи. Увек одразите стање у наслову странице, вратите подразумевану иконицу када је ставка обрађена и не ослањајте се само на боју.