Kaj je favicon in zakaj je pomemben za vašo spletno stran?

Favicon (okrajšava za „favorite icon“, torej priljubljena ikona) je majhna kvadratna slika, ki predstavlja spletno mesto v zavihkih brskalnika, zaznamkih, seznamih zgodovine, Googlovih rezultatih iskanja, na domačih zaslonih telefonov in v nameščenih spletnih aplikacijah. Pomemben je, ker daje vašemu spletnemu mestu prepoznaven obraz na prvi pogled, olajša iskanje med številnimi odprtimi zavihki, daje vtis profesionalnosti in zaupanja vrednosti, zdaj pa se v Googlovih rezultatih prikazuje tudi ob imenu vašega mesta. Brez njega obiskovalci vidijo splošno ikono globusa ali prazne strani, vaš strežnik pa v dnevnike zapisuje napake 404. Celoten komplet faviconov lahko brezplačno ustvarite z generatorjem faviconov MakeFav.

Kaj je favicon?

Favicon je drobna grafika z elementi blagovne znamke, običajno poenostavljena različica logotipa ali ena sama črka ali simbol, ki jo brskalniki in druga programska oprema prenesejo z vašega spletnega mesta in prikažejo povsod, kjer potrebujejo strnjeno vizualno oznako. V namiznem brskalniku se običajno izriše v velikosti 16 × 16 CSS-slikovnih pik, vendar mora biti sama datoteka večja, da ostane ostra na zaslonih z visoko gostoto.

Tehnično je favicon le slikovna datoteka, na katero se sklicuje vaš HTML (ali pa je na privzeti lokaciji) in jo uporabniški agenti prenesejo ločeno od vsebine strani. Danes „favicon“ redko pomeni eno samo datoteko. Sodobno spletno mesto običajno vsebuje več različic iste ikone, da brskalniki, iskalniki, iOS in Android dobijo format in velikost, ki jim ustreza.

Kratka zgodovina faviconov

Favicon sega v marec 1999, ko je Microsoft izdal Internet Explorer 5. Brskalnik je uporabnikom omogočal shranjevanje strani na seznam „Priljubljene“ in poleg tega v korenu spletnega mesta iskal majhno datoteko z ikono z imenom favicon.ico, da jo je prikazal ob vsakem shranjenem vnosu. Zamisel je bila preprosta: če je spletno mesto ponujalo /favicon.ico, se je ikona prikazala ob zaznamku.

Druga brskalnika sta funkcijo kmalu prevzela, brskanje z zavihki pa jo je naredilo veliko bolj uporabno. Ko so zavihki postali glavni način navigacije, se je favicon iz okrasa zaznamkov spremenil v ključno navigacijsko pomagalo. Skozi leta se je pristop razvijal:

• Zgodnja leta 2000: element <link rel="icon"> je spletnim mestom omogočil, da kažejo na ikono na poljubnem naslovu URL in ne le v korenu, brskalniki, ki niso IE, pa so začeli sprejemati tudi datoteke PNG in GIF.
• 2010-a: Apple je uvedel apple-touch-icon za domače zaslone iOS, Android in Windows pa sta dodala lastne konvencije, kot so ikone v manifestu in slike ploščic.
• Danes: favicon SVG, manifesti spletnih aplikacij, ikone, prilagojene temnemu načinu, in Googlove zahteve za favicone v rezultatih iskanja so naredili favicon majhen, a resničen del tehnične postavitve spletnega mesta.

Kje se favicon danes prikaže

Vaš favicon se prikazuje na veliko več mestih kot le v zavihku brskalnika. Glavna so:

• Zavihki brskalnika: najbolj vidno mesto, kjer je ikona pogosto edino, kar vidite, ko je odprtih veliko zavihkov.
• Zaznamki in priljubljene: ikona stoji ob naslovu strani v vrsticah in menijih zaznamkov.
• Zgodovina in najpogosteje obiskane strani: brskalniki prikazujejo favicone na seznamih zgodovine in na straneh novih zavihkov.
• Googlovi rezultati iskanja: Google na mobilnih napravah in računalnikih prikaže favicon spletnega mesta ob imenu mesta in naslovu URL.
• Domači zasloni: ko obiskovalec doda vaše spletno mesto na domači zaslon v iOS ali Androidu, ikona za dotik ali ikona iz manifesta postane bližnjica v slogu aplikacije.
• Nameščene PWA: progresivna spletna aplikacija uporablja ikone iz svojega manifesta za ikono v zaganjalniku, uvodni zaslon in preklopnik opravil.
• Ploščice Windows in pripeta mesta: starejše različice Windows in Edge so uporabljale slike ploščic, določene za pripeta mesta; sodobne večinoma znova uporabijo vaše standardne ikone.
• Predogledi povezav v nekaterih aplikacijah: nekatera klepetalna in produktivnostna orodja (Slack je znan primer) prikažejo favicon spletnega mesta ob razširjeni povezavi. Večina predogledov se opira predvsem na slike Open Graph, vendar favicon pogosto prispeva majhen znak blagovne znamke.

Zakaj je favicon pomemben za vaše spletno mesto

Prepoznavnost blagovne znamke

Ljudje barve in oblike prepoznajo hitreje, kot preberejo besedilo. Dosledna ikona, ki se ponavlja v zavihkih, zaznamkih in rezultatih iskanja, ob vsakem pogledu krepi domačnost, kar je brezplačna izpostavljenost blagovne znamke ob vsakem obisku.

Zaupanje in verodostojnost

Manjkajoč favicon naredi spletno mesto videti nedokončano. Čista, pravilno prikazana ikona je majhen znak, da je nekomu mar za podrobnosti, kar podpira vtis, da je spletno mesto legitimno. Ni varnostna funkcija in lažna spletna mesta lahko ikone kopirajo, vendar prazna privzeta ikona podjetju redko pomaga, da bi delovalo uveljavljeno.

Delež klikov v rezultatih iskanja

Ker Google prikaže favicon ob vašem zadetku, postane del tega, kako vaš rezultat izgleda ob konkurenčnih. Google ne objavlja nobenega vpliva faviconov na uvrstitev in ne smete pričakovati dviga uvrstitev. Korist je v vizualni prepoznavnosti: uporabniki, ki poznajo vašo ikono, bodo vaš rezultat verjetneje opazili in izbrali, zlasti na mobilnih napravah, kjer so rezultati strnjeni.

Uporabnost pri številnih odprtih zavihkih

Ko ima brskalnik odprtih dvajset zavihkov, so naslovi skrajšani do nerazpoznavnosti in ostane le favicon. Značilna ikona omogoča, da ljudje takoj najdejo vaš zavihek in se vanj vrnejo, namesto da odprejo dvojnik ali ga pozabijo.

Profesionalen vtis

Dobro oblikovan favicon kaže enako skrb za podrobnosti kot preostanek vašega spletnega mesta. Za strani izdelkov, dokumentacijo, bloge in spletne aplikacije je to eden najcenejših načinov za dodaten lesk.

Dostopnost pri iskanju zavihkov

Ikone pomagajo uporabnikom, ki strani pregledujejo vizualno in ne berejo, vključno z ljudmi z disleksijo ali kognitivnimi razlikami ter vsemi, ki hitro preklapljajo med opravili. Ikono z visokim kontrastom in preprosto obliko je lažje izluščiti. Ne pozabite pa, da je favicon dopolnilo: ne nadomešča jasnega naslova strani, na katerega se zanašajo bralniki zaslona in podporne tehnologije.

Kaj se zgodi, če nimate faviconov

Brskalniki samodejno zahtevajo /favicon.ico iz korena vaše domene, tudi če ga vaš HTML ne omenja. Če datoteka ne obstaja, se zgodi več stvari:

• Splošna ikona: obiskovalci v zavihku in zaznamkih vidijo privzeto ikono globusa, dokumenta ali prazno ikono, kar učinkuje anonimno.
• Napake 404 v dnevnikih: vsak brskalnik, ki zahteva datoteko, ustvari neuspešno zahtevo. Na obiskanih spletnih mestih to doda šum v dnevnike dostopa, spremljanje napak in analitiko ter lahko prikrije prave težave.
• Brez ikone v Googlovih rezultatih: brez veljavnega favicona, ki ga je mogoče preiskati, Google ob vašem zadetku prikaže privzeto nadomestno ikono.
• Zapravljene zahteve: brskalniki lahko poskusijo znova, kar strežniku doda majhno, a nesmiselno obremenitev.

Tudi zelo preprosta ikona je boljša od nobene, saj odpravi napake 404 in uporabnikom ponudi nekaj prepoznavnega.

Formati faviconov na kratko

Noben format ne pokrije vseh platform, zato večina spletnih mest uporablja majhen nabor datotek.

Starejše slike ploščic Windows (nastavljene prek browserconfig.xml) so bile potrebne za Internet Explorer 11 in stari Edge. Danes so redko potrebne, razen če morate podpirati ta okolja.

Googlove smernice za favicone v rezultatih iskanja

Če želite, da se vaša ikona prikaže v Googlovem iskanju, upoštevajte Googlove objavljene zahteve:

• Velikost: slika mora biti kvadratna (1:1) in večkratnik 48 slikovnih pik, na primer 48x48, 96x96 ali 144x144. Google jo nato za prikaz zmanjša na 16x16. Najmanjša podprta velikost je 8x8, priporočena pa je 48x48 ali večja.
• Formati: deluje vsak format, ki ga podpirajo brskalniki, vključno z ICO, PNG in SVG.
• Stabilen URL: naslova URL favicona ne spreminjajte pogosto. Stabilen naslov Googlu pomaga, da vašo ikono ohrani posodobljeno.
• Dostopno za iskanje: tako datoteka favicona kot vaša domača stran morata biti dostopni Googlebotu. Ne blokirajte ju v robots.txt ali za prijavo.
• Ena deklaracija na spletno mesto: ikona je vezana na domačo stran spletnega mesta, zato oznako <link> postavite v glavo domače strani.
• Reprezentativen in primeren: ikona naj odraža vašo blagovno znamko, Google pa lahko žaljivo ali zavajajočo ikono zamenja s privzeto.

Ko objavite ali spremenite favicon, lahko Googlu traja od nekaj dni do nekaj tednov, da ga znova preišče in posodobi, zato ne pričakujte takojšnje spremembe.

Kako hitro ustvariti favicon z MakeFav

Ne potrebujete programa za oblikovanje ali ukazne vrstice. Generator MakeFav iz ene izvorne slike ustvari zgoraj opisane datoteke.

1. Pripravite svojo grafiko. Uporabite kvadraten logotip ali simbol velikosti 512 x 512 px ali več. Najbolje delujejo preproste oblike, saj bo ikona vidna pri 16 px.
2. Naložite jo na domači strani MakeFav ali odprite urejevalnik, da pred izvozom prilagodite sliko, ozadje in odmik.
3. Preglejte rezultat pri majhnih velikostih ter na svetlem in temnem ozadju, da zagotovite berljivost.
4. Prenesite paket. Vsebuje ICO, velikosti PNG, Apple touch icon, ikone za manifest in izsek HTML za prilepitev.
5. Naložite datoteke v koren svojega spletnega mesta, da so dosegljive na poteh, kot je /favicon.ico.
6. Dodajte HTML v <head> vsake strani ali v skupno postavitev oziroma predlogo.
7. Preverite s preverjevalnikom faviconov, nato počistite predpomnilnik brskalnika in osvežite stran, da vidite novo ikono.

Primer izseka HTML

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Atribut sizes="48x48" na povezavi ICO pomaga brskalnikom, da dajo prednost SVG, kadar ga podpirajo, ICO pa ostane kot rezerva. PNG velikosti 96 px izpolnjuje Googlovo pravilo večkratnika 48.

Primer manifesta spletne aplikacije

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Če delate z izdelovalnimi cevovodi ali želite samodejno ustvarjati ikone, si oglejte vire za razvijalce.

Nasveti za oblikovanje favicona, ki deluje

• Naj bo preprost. Ena oblika, ena črka ali krepek monogram je boljši od podrobnega logotipa, ki se pri 16 px sprevrže v kašo.
• Uporabite močan kontrast. Poskrbite, da je ikona vidna v svetli in temni temi brskalnika. Pomaga barvna ploščica v ozadju.
• Izogibajte se besedilu. Ena sama začetnica je v redu; besede pri tej velikosti niso berljive.
• Pustite nekaj odmika za ikone maskable in z zaobljenimi robovi, da nič pomembnega ni odrezano.
• Ostanite dosledni z logotipom in barvami blagovne znamke, da favicon krepi prepoznavnost.
• Preizkusite na pravih napravah in preverite, kako izgleda v zavihku, zaznamku in Googlovem rezultatu.

Pogoste težave s favicon

Če se vaša ikona ne prikaže, so običajni vzroki predpomnjenje, napačne poti in blokirane datoteke. Brskalniki favicone agresivno predpomnijo, zato je za ogled posodobitev pogosto dovolj trdo osveževanje ali novo zasebno okno. Preverite, ali naslov URL datoteke vrne status 200 in pravilen tip vsebine ter ali je oznaka <link> v <head>. Za iskanje poskrbite, da robots.txt ne blokira ikone ali domače strani. Preverjevalnik MakeFav vam lahko pomaga hitro odkriti te težave.

Pogosta vprašanja

Kaj pomeni favicon?

Favicon je okrajšava za „favorite icon“ (priljubljena ikona). Ime izvira iz Internet Explorerja 5, ki je leta 1999 prvi uporabil majhno datoteko z ikono za okrasitev vnosov na seznamu Priljubljene v brskalniku. Izraz se je obdržal, čeprav se ikona zdaj prikazuje na številnih drugih mestih.

Ali favicon pomaga pri SEO?

Favicon ni neposreden dejavnik uvrstitve. Vendar se prikaže ob imenu vašega spletnega mesta v Googlovih rezultatih na mobilnih napravah in računalnikih, zato lahko izboljša prepoznavnost blagovne znamke in vizualno privlačnost vašega zadetka, kar lahko posredno podpre klike. Upoštevanje Googlovih smernic je tisto, zaradi česar je ikona upravičena do prikaza.

Kako velik mora biti favicon?

Za Googlovo iskanje uporabite kvadratno sliko, ki je večkratnik 48 slikovnih pik, na primer 48x48 ali 96x96. Za širšo pokritost zagotovite tudi datoteko ICO, Apple touch icon velikosti 180x180 ter ikoni manifesta velikosti 192x192 in 512x512. SVG je dobra dodatna izbira zaradi prilagodljive velikosti.

Ali še potrebujem favicon.ico, če uporabljam PNG ali SVG?

Še vedno je dobra zamisel. Brskalniki in nekatera orodja privzeto zahtevajo /favicon.ico, starejša programska oprema pa se nanj zanaša. Datoteka ICO v korenu spletnega mesta prepreči napake 404 in vam daje varno rezervo, kadar SVG ali PNG nista podprta.

Zakaj se moj favicon ne posodobi?

Brskalniki in iskalniki favicone predpomnijo dolgo časa. Poskusite s trdim osveževanjem, zasebnim oknom ali čiščenjem predpomnilnika. Prepričajte se, da je pot do datoteke pravilna in da se streže nova datoteka. V Googlovem iskanju lahko traja od nekaj dni do nekaj tednov, da se spremenjena ikona znova preišče in posodobi.