Izrada favikona s podrškom za sve moderne uređaje

Pregled sadržaja

Što je favikona

Favikona je mala ikona koju možemo vidjeti na tabu (kartici stranice) u pregledniku a povezuje se sa web stranicom. Vizualna je reprezentacija brenda kako bi se korisnici istog trena identificirali a korisne je kada imamo jako puno otvorenih tabova jer nam pomaže prepoznati stranicu koju tražimo.

Prednosti favikona možemo dakle definirati kao:

  • jednostavna i brza identifikacija
  • dobar način za privlačenje pažnju korisnika
  • osnažuje brend
  • jača dojam profesionalizma web stranice

Povijest favikone i standardizacija

Microsoft je 1999. objavio tada revolucionarni preglednik Internet Explorer 5 koji je prvi uveo podršku za favikonu. Favikona se nije prikazivala unutar taba već joj je namjena bila da se prikaže kada je bilokoja stranica unutar domene dodana kao omiljeni link (bookmark). Zbog istog razloga favikona je i dobila ime, složenica je Favorites Icon.

Prema standardima W3C objavljenima 1999. osnovna implementacija je pomoću rel atributa unutar <head> sekcije dokumenta web stranice. Jedina veličina ikone bila je 16×16 piksela a podržani format je bio ICO.

<link rel="shortcut icon" href="https://webstranica.hr/favicon.ico">

Zanimljiva činjenica je da su developeri mogli znati koliko je korisnika dodalo stranicu u favorite prema tome koliko puta se favikona učitala sa servera. Danas više tu informaciju ne možemo imati jer svaki moderni preglednik uvijek učitava ikonu ako se nalazi u glavnom direktoriju projekta.

Favikone u današnje vrijeme

Pojavom modernih uređaja različitih modela i brendova (Apple iPhone, Android…), pojavile su se nove razne implementacije raznih veličina formata ovisno o modelu. Danas te ikonice imaju dodatnu svrhu, ako imamo omiljene stranice koje često posjećujemo na mobilnim i tablet uređajima, možemo te stranice dodati na početni zaslon kao prečac. Tada ne trebamo otvarati preglednik pa tražiti u opcijama favorita link da ih otvorimo jer nam su nam one dostupne na samom početku. Prikazat će se upravo prikladna veličina favikone ovisno o veličini uređaja i njihovim postavkama.

Ako nemamo postavljenu favikonu za taj uređaj ili veličinu, prikazat će se snimka zaslona (screenshot) postavljenog URL-a.

Favikona u rezultatima pretraga

Google i Bing mogu povremeno prikazati rezultate pretrage dodavanjem favikona s lijeve strane URL-a. Vjerojatno testiraju korisničko iskustvo ali Duckduckgo ih uvijek prikazuje. Ako se kod drugih favikona ne prikaže dok vama da, može vam povećati stopu klika (CTR) što se pozitivno odrazuje na SEO optimizaciju.

Postojanje favikone ipak nije garancija da se ona prikaže u rezultatima pretraga. Na istoj stranici pretraživanja jedna stranica može imati prikazanu favikonu dok druga ne.

Podržane formati i veličine favikona

Podržani formati

Danas su podržani formati favikona: ICO, PNG, GIF, JPG, SVG ali i tu postoje određene razlike. Trenutno samo Chrome, Firefox i Opera podržavaju SVG format a samo Firefox i Opera dodatno podržavaju još animirani GIF i animirani PNG (APNG).

SVG format

SVG datoteke su dvodimenzionalne vektorske grafike pisane pomoću XML sintakse. Zapravo je SVG obična tekstualna datoteka koju možemo uređivati u bilo kojem uređivaču teksta. Idealan su format za favikonu jer su vektori beskonačno rastezljivi bez da uopće gube kvalitetu.

Podrška preglednika za SVG nije još idealna ali podržavaju ga ipak svi moderni i popularni preglednici. Preglednici koji ga ne podržavaju ignorirat će deklaraciju jer ju ne mogu razumijeti te za njih možemo definirati podržane formate u različitim veličinama.

Novi uređaji dolaze na tržište konstantno a korištenjem SVG formata nećemo morati naknadno implementirati veličine i uvijek će nam ikona biti oštra i kvalitetna. Još jedna prednost je da su SVG datoteke jako malene u usporedbi sa rasterskim slikama što nam pomaže u optimizaciji brzine web stranica.

Podržane veličine

Za rasterske ikone veličine favikona bi trebale biti višekratnik od 48 piksela, na primjer: 48×48 piksela, 96×96, 144×144 itd. Iznimka su SVG datoteke kojima ne treba određivati veličinu jer, kao što smo već spomenuli, one su definirane vektorima te su zbog toga beskonačno rastezljive bez gubitka kvalitete.

Kreiranje favikona

Za favikon možemo odabrati nešto od narednoga poredano prema redoslijedu važnosti:

  • unikatni simbol koji prezentira brend
  • manji isječak logotipa
  • slovo brenda
  • neka druga grafika koja služi za reprezentaciju stranice

Pogledajmo koje osobine bi još favikone trebale imati.

Vedre i žive boje jače se ističu

Slika govori više od tisuću riječi. Nije svejedno imati bilokakvu ikonu koja će nas prezentirati. Baš kao i posebno izrađen logotip prikrojen po mjeri tvrtke, favikona nas izdvaja od drugih i pomaže nam da se istaknemo u gomili. Žive, vedre boje bit će uspješnije nego ikone zagasitih ili sivkastih boja koje se neće moći lako uočiti ako se uklope u sivilo preglednika.

Mali broj korisnika ima u pregledniku podešen dark mode kojim se pozadinska boja preglednika promijeni u tamnu boju. U tom modu preglednika zagasita ikona ima smisao međutim ne možemo se pouzdati u njega jer ga koristi znatno mali broj korisnika. Izuzetak je jedino ako koristimo SVG format. Narednim dijelom kôda moći ćemo prikazati crnu zvjezdicu u normalnom modu dok u tamnom modu zvjezdica postaje bijela.

<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg">
  <style>
    path { fill: #000000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d="M111.904 52.937a1.95 1.95 0 00-1.555-1.314l-30.835-4.502-13.786-28.136c-.653-1.313-2.803-1.313-3.456 0L48.486 47.121l-30.835 4.502a1.95 1.95 0 00-1.555 1.314 1.952 1.952 0 00.48 1.99l22.33 21.894-5.28 30.918c-.115.715.173 1.45.768 1.894a1.904 1.904 0 002.016.135L64 95.178l27.59 14.59c.269.155.576.232.883.232a1.98 1.98 0 001.133-.367 1.974 1.974 0 00.768-1.894l-5.28-30.918 22.33-21.893c.518-.522.71-1.276.48-1.99z" fill-rule="nonzero"/>
</svg>

Jednostavnost, bez suvišnih detalja

Favikone su veoma male sličice pa je potrebno izbjegavati previše detalja. Klasična favikona u tabu dugačka je i široka tek 16 piksela. Te piksele trebamo iskoristiti najbolje što možemo. Ako radimo prilagođene ikone za druge ekrane ručno, možemo si dati veću slobodu kod njihove izrade te kod ikona većeg formata možemo ići u detalje.

Jedinstveno prepoznatljive ikone

Brend treba biti prepoznatljiv. Za izradu favikone koristimo simbol koji je reprezentativan, ako ga nema možemo koristiti prvo slovo naziva tvrtke. Ako se radi o osobi možemo koristiti inicijale. Ikona se postavi u primarnim i sekundarnima bojama koje se koriste u vizualnom identitetu brenda.

Kako implementirati favikone

Razne potrebne veličine favikona možemo generirati automatizirano prema odabranoj slici. Ako ne želimo da nam sličica bude kvadratasta potrebno je paziti na transparentnost pozadine jer će u suprotnom ona postati bijela. Transparentne ikone spremamo kao PNG format.

Izostanak prikazivanja favikone

Favikona se neće prikazati ako je web preglednik iz nekog razloga smatra neprikladnim, kao što je u slučaju simbola mržnje (npr. svastika) ili pornografije.

Ako nema favikone ponekad se neće prikazati ništa ali može se prikazati favikona hosting tvrtke ovisno o njihovim postavkama, što pogotovo želite izbjeći.

Također, ako stranica nema favikonu u primarnom direktoriju stranice a ubacimo je među omiljene linkove, ovisno o pregledniku koji se koristi može se generirati statusna greška 404 koju neće vidjeti korisnici ali se može uočiti prilikom analize log datoteka na serveru.

Generiranje različitih veličina favikona

Na webu se može pronaći jako puno alata koji mogu generirati favikone u svim veličinama. Jedan od njih je realfavicongenerator.net koji nudi puno opcija za naknadne korekcije ikone dok drugi alat Favic-o-Matic nudi brzo generiranje svih veličina na jedan klik.

Kada generiramo ikone dobimo i HTML kod za njihovu brzu implementaciju.

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

Potrebno je samo podesiti putanje datoteke da pravilno upućuju na ikone i ažurirati te podatke na našoj stranici uz upload ikona.

Sažetak

Imaju li vaše web stranice podršku za favikonu svih popularnih veličina za moderne uređaje?