Објашњење favicon формата: ICO, PNG, SVG и шта је потребно прегледачима

Зашто су фавикони и даље необично компликовани

Фавикон изгледа као једна мала слика, али налази се на пресеку интерфејса прегледача, обележивача, картица, закачених пречица, резултата претраге, почетних екрана на мобилним уређајима и инсталација прогресивних веб апликација. Сваки контекст има мало другачија очекивања.

Зато савети о фавиконима често делују неуредно. Неки тимови испоручују само један favicon.ico јер је то некада било довољно. Други генеришу десетак датотека не знајући које се заправо користе. Разуман средњи пут је мањи: разумети у чему су ICO, PNG и SVG добри, па испоручити компактан скуп који покрива актуелне прегледаче и уобичајене контексте уређаја.

Фавикони нису место за демонстрацију система за обраду слика. Они су место где треба бити досадан, изричит и компатибилан.

ICO: стари формат који одбија да нестане

ICO је класичан Windows контејнер за иконе. Може да садржи више bitmap слика различитих величина, најчешће 16×16, 32×32 и 48×48 пиксела. То је важно јер се фавикон може приказивати веома мали у картици прегледача, већи у листи обележивача, а другачије поново у Windows пречицама.

Важан детаљ је да је ICO контејнер, а не само једна слика. Добар favicon.ico обично садржи више raster величина како би прегледач или оперативни систем могао да изабере најближе поклапање уместо да скалира један мали bitmap.

ICO је и даље користан из три разлога:

• Прегледачи могу аутоматски да затраже /favicon.ico, чак и ако га не повежете у HTML-у.
• Неки старији прегледачи и интеграције га очекују.
• Безбедна је резервна опција када се новије декларације иконица игноришу.

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

У пракси, поставите прави /favicon.ico у корен сајта. Немојте тамо служити 404 осим ако уживате у бучним логовима и непотребним поновним покушајима прегледача.

PNG: поуздани ослонац

PNG је и даље најпредвидљивији raster формат за фавиконе и touch иконице. Подржава провидност, широко је подржан и понаша се доследно у различитим прегледачима и платформама.

За фавиконе, PNG је користан када желите експлицитне иконице одређене величине у пикселима, као што су 32×32 или 48×48. За иконице на почетном екрану мобилних уређаја, PNG је у неким окружењима практично обавезан. Apple touch icons су, на пример, у уобичајеној продукционој употреби засноване на PNG-у.

Неколико практичних правила помаже:

• Извозите из векторског извора, не из bitmap слике која је већ мала.
• Учините иконицу читљивом на 16×16 пре него што бринете о већим величинама.
• Додајте довољно унутрашњег размака како знак не би деловао одсечено у заобљеним или маскираним контекстима.
• Избегавајте ситан текст, танке линије и детаљне илустрације.

PNG компресија обично није вредна опсесивног бављења када су у питању фавикони, јер су датотеке мале. Ипак, немојте испоручити touch иконицу од 500 KB само зато што је директно изашла из дизајнерског извоза. Ако већ преиспитујете шире изборе слика, исто дисциплиновано размишљање из одлука о форматима слика на модерном вебу важи и овде: бирајте формат за посао, не зато што је модеран.

SVG: модерна, флексибилна опција

SVG фавикони су привлачни јер не зависе од резолуције. Једна мала датотека може чисто да се прикаже у многим величинама, а може се уређивати директно у коду или извозити из дизајнерског софтвера.

Модерне верзије Chromium, Firefox и Safari подржавају SVG фавиконе. То SVG чини добрим примарним favicon форматом за многе сајтове, нарочито када је иконица једноставан логотип, глиф или геометријски знак.

Али 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 пиксела. Ако се ваш сајт понаша као апликација, вероватно јесу.

Уобичајени начини отказивања

Најчешћи проблеми са фавиконима нису уметнички. То су проблеми испоруке.

Један је агресивно кеширање. Прегледачи се тврдоглаво држе фавикона. Током тестирања, промењена иконица се можда неће појавити док не урадите hard refresh, очистите податке сајта, употребите ново име датотеке или тестирате у свежем профилу. За продукциона ребрендирања, промена /icon.svg?v=2 може помоћи у HTML-у, али је коренски /favicon.ico тежи јер га прегледачи траже директно. Замена датотеке и чекање да кешеви истекну често је део посла.

Други чест проблем је погрешан MIME тип. SVG треба да се служи као image/svg+xml, PNG као image/png, а ICO најчешће као image/x-icon или image/vnd.microsoft.icon. Многи прегледачи праштају грешке, али не сви контексти. Ако нешто не успева само у једном прегледачу, прегледајте network response пре него што поново цртате иконицу. Исте навике које се користе при отклањању грешака у редирекцијама и 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 иконицу 180×180.
6. Додајте PNG датотеке 192×192 и 512×512 ако користите манифест.
7. Поставите /favicon.ico у корен сајта.
8. Проверите статусне кодове, MIME типове и заглавља кеширања.
9. Тестирајте у најмање једном Chromium прегледачу, Firefox-у и Safari-ју ако ваша публика укључује Apple уређаје.

Фавикони су мали, али су и веома видљиви. Покварен фавикон чини да сајт делује недовршено. Добро направљен нестаје у интерфејсу, што је управо поента.