Što je favicon i zašto je važan za vašu web stranicu?

Favicon (skraćeno od „favorite icon”, tj. omiljena ikona) mala je kvadratna slika koja predstavlja web stranicu u karticama preglednika, oznakama, popisima povijesti, Googleovim rezultatima pretraživanja, na početnim zaslonima telefona i u instaliranim web aplikacijama. Važan je jer vašoj stranici daje prepoznatljivo lice na prvi pogled, olakšava njezino pronalaženje među mnogo otvorenih kartica, signalizira da je stranica profesionalna i pouzdana te se danas prikazuje pokraj naziva vaše stranice u Googleovim rezultatima. Bez njega posjetitelji vide generičku ikonu globusa ili prazne stranice, a vaš poslužitelj puni zapise pogreškama 404. Potpuni set favicona možete besplatno izraditi pomoću MakeFav generatora favicona.

Što je favicon?

Favicon je sićušna grafika s prepoznatljivim izgledom brenda, obično pojednostavljena verzija logotipa ili jedno slovo ili simbol, koju preglednici i drugi programi preuzimaju s vaše web stranice i prikazuju gdje god im treba sažet vizualni identifikator. U desktop pregledniku obično se crta u veličini 16 sa 16 CSS piksela, no sama datoteka trebala bi biti veća kako bi ostala oštra na zaslonima visoke gustoće piksela.

Tehnički gledano, favicon je samo slikovna datoteka na koju upućuje vaš HTML (ili se nalazi na zadanoj lokaciji) i koju korisnički agenti preuzimaju zasebno od sadržaja stranice. Danas „favicon” rijetko znači samo jednu datoteku. Moderna stranica obično isporučuje nekoliko verzija iste ikone kako bi preglednici, tražilice, iOS i Android dobili format i veličinu koji im odgovaraju.

Kratka povijest favicona

Favicon datira iz ožujka 1999., kada je Microsoft izdao Internet Explorer 5. Preglednik je omogućavao spremanje stranica na popis „Favorites”, a u korijenu stranice tražio je i malu datoteku ikone pod nazivom favicon.ico kako bi je prikazao uz svaki spremljeni unos. Ideja je bila jednostavna: ako stranica ponudi /favicon.ico, ikona će se pojaviti pokraj oznake.

Ostali preglednici ubrzo su preuzeli tu značajku, a pregledavanje putem kartica učinilo ju je mnogo korisnijom. Kako su kartice postale glavni način navigacije, favicon je od ukrasa oznaka postao ključno navigacijsko pomagalo. S godinama se pristup razvijao:

• Početak 2000-ih: element <link rel="icon"> omogućio je stranicama da upućuju na ikonu na bilo kojem URL-u, a ne samo u korijenu, a preglednici koji nisu IE počeli su prihvaćati PNG i GIF datoteke.
• 2010-e: Apple je uveo apple-touch-icon za početne zaslone iOS-a, a Android i Windows dodali su vlastite konvencije poput ikona u manifestu i slika pločica.
• Danas: SVG faviconi, manifesti web aplikacija, ikone prilagođene tamnom načinu rada i Googleovi zahtjevi za faviconima u rezultatima pretraživanja učinili su favicon malim, ali stvarnim dijelom tehničke postave stranice.

Gdje se faviconi danas prikazuju

Vaš se favicon prikazuje na mnogo više mjesta od same kartice preglednika. Glavna su:

• Kartice preglednika: najvidljivije mjesto, gdje je ikona često jedino što vidite kada je otvoreno mnogo kartica.
• Oznake i favoriti: ikona se nalazi pokraj naslova stranice u trakama i izbornicima oznaka.
• Povijest i najposjećenije stranice: preglednici prikazuju favicone na popisima povijesti i na stranicama nove kartice.
• Googleovi rezultati pretraživanja: i na mobilnim uređajima i na računalima Google prikazuje favicon stranice pokraj njezina naziva i URL-a.
• Početni zasloni: kada posjetitelj doda vašu stranicu na početni zaslon na iOS-u ili Androidu, touch ikona ili ikona iz manifesta postaje prečac nalik aplikaciji.
• Instalirani PWA-ovi: progresivna web aplikacija koristi ikone iz svojeg manifesta za ikonu u pokretaču, uvodni zaslon i izmjenjivač zadataka.
• Windows pločice i prikvačene stranice: starije verzije sustava Windows i preglednika Edge koristile su slike pločica definirane za prikvačene stranice; novije uglavnom ponovno koriste vaše standardne ikone.
• Pretpregledi poveznica u nekim aplikacijama: određeni alati za razgovor i produktivnost (Slack je dobro poznat primjer) prikazuju favicon stranice pokraj proširene poveznice. Većina pretpregleda uglavnom se oslanja na Open Graph slike, no favicon često daje mali znak brenda.

Zašto je favicon važan za vašu web stranicu

Prepoznatljivost brenda

Ljudi boje i oblike prepoznaju brže nego što čitaju tekst. Dosljedna ikona koja se ponavlja u karticama, oznakama i rezultatima pretraživanja gradi poznatost svaki put kad je netko vidi, a to je besplatna izloženost brenda pri svakom posjetu.

Povjerenje i vjerodostojnost

Nedostatak favicona čini da stranica izgleda nedovršeno. Uredna, ispravno prikazana ikona mali je znak da je nekome stalo do detalja, što podupire dojam da je stranica legitimna. Nije sigurnosna značajka, a phishing stranice mogu kopirati ikone, ali prazna zadana ikona rijetko pomaže tvrtki da izgleda etablirano.

Stopa klikanja u rezultatima pretraživanja

Budući da Google prikazuje favicon pokraj vašeg unosa, on postaje dio izgleda vašeg rezultata uz konkurente. Google ne objavljuje nikakav utjecaj favicona na rangiranje i ne biste trebali očekivati poboljšanje pozicije. Korist je u vizualnom prepoznavanju: korisnici koji poznaju vašu ikonu vjerojatnije će primijetiti i odabrati vaš rezultat, osobito na mobilnim uređajima gdje su rezultati sažeti.

Upotrebljivost uz mnogo otvorenih kartica

Kad preglednik ima dvadeset otvorenih kartica, naslovi se skrate do nestanka i ostaje samo favicon. Upečatljiva ikona omogućuje ljudima da odmah pronađu vašu karticu i vrate se na nju umjesto da otvaraju duplikat ili je zaborave.

Profesionalan dojam

Dobro dizajniran favicon pokazuje istu pažnju prema detaljima kao i ostatak vaše stranice. Bilo da je riječ o stranicama proizvoda, dokumentaciji, blogovima ili web aplikacijama, to je jedan od najjeftinijih dodataka za dotjerivanje izgleda.

Pristupačnost pri pronalaženju kartica

Ikone pomažu korisnicima koji pretražuju vizualno, a ne čitanjem, uključujući osobe s disleksijom ili kognitivnim razlikama te sve koji brzo prelaze s jednog zadatka na drugi. Ikonu visokog kontrasta i jednostavnog oblika lakše je uočiti. No imajte na umu da je favicon dopuna: ne zamjenjuje jasan naslov stranice na koji se oslanjaju čitači zaslona i pomoćne tehnologije.

Što se događa ako nemate favicon

Preglednici automatski traže /favicon.ico u korijenu vaše domene, čak i ako ga vaš HTML ne spominje. Ako datoteka ne postoji, događa se nekoliko stvari:

• Generička ikona: posjetitelji u kartici i oznakama vide zadanu ikonu globusa, dokumenta ili praznu ikonu, što djeluje anonimno.
• Pogreške 404 u zapisima: svaki preglednik koji zatraži datoteku generira neuspješan zahtjev. Na prometnim stranicama to dodaje šum u zapise pristupa, praćenje pogrešaka i analitiku te može sakriti stvarne probleme.
• Nema ikone u Googleovim rezultatima: bez valjanog favicona koji se može indeksirati Google pokraj vašeg unosa prikazuje svoj zadani rezervirani simbol.
• Uzaludni zahtjevi: preglednici mogu ponavljati zahtjev, čime dodaju malo, ali besmisleno opterećenje vašem poslužitelju.

Čak je i vrlo jednostavna ikona bolja od nikakve jer uklanja pogreške 404 i korisnicima daje nešto prepoznatljivo.

Formati favicona objašnjeni

Nijedan format ne pokriva sve platforme, pa većina stranica koristi mali skup datoteka.

Stare slike Windows pločica (konfigurirane putem browserconfig.xml) bile su potrebne za Internet Explorer 11 i stari Edge. Danas su rijetko potrebne, osim ako morate podržavati ta okruženja.

Googleove smjernice za favicone u rezultatima pretraživanja

Ako želite da se vaša ikona prikazuje u Google pretraživanju, slijedite Googleove objavljene zahtjeve:

• Veličina: slika mora biti kvadratna (1:1) i višekratnik od 48 piksela, primjerice 48x48, 96x96 ili 144x144. Google je zatim smanji na 16x16 za prikaz. Minimalna podržana veličina je 8x8, no preporučuje se 48x48 ili veća.
• Formati: radi svaki format koji preglednici podržavaju, uključujući ICO, PNG i SVG.
• Stabilan URL: nemojte često mijenjati URL favicona. Stabilna adresa pomaže Googleu da vašu ikonu održava ažurnom.
• Dostupnost za indeksiranje: i datoteka favicona i vaša početna stranica moraju biti dostupne Googlebotu. Nemojte ih blokirati u robots.txt ili iza prijave.
• Jedna deklaracija po stranici: ikona je vezana uz početnu stranicu web mjesta, stoga oznaku <link> stavite u head početne stranice.
• Reprezentativna i prikladna: ikona bi trebala odražavati vaš brend, a Google može zamijeniti uvredljivu ili zavaravajuću ikonu svojom zadanom.

Nakon što objavite ili promijenite favicon, Googleu može trebati od nekoliko dana do nekoliko tjedana da ga ponovno indeksira i ažurira, pa ne očekujte trenutnu promjenu.

Kako brzo izraditi favicon pomoću MakeFava

Ne trebaju vam softver za dizajn ni naredbeni redak. MakeFav generator pretvara jednu izvornu sliku u gore opisane datoteke.

1. Pripremite grafiku. Koristite kvadratni logotip ili simbol veličine 512 x 512 px ili veći. Jednostavni oblici najbolje funkcioniraju jer će se ikona vidjeti u veličini od 16 px.
2. Učitajte je na početnoj stranici MakeFava ili otvorite uređivač kako biste prije izvoza prilagodili sliku, pozadinu i razmak.
3. Pregledajte rezultat u malim veličinama te na svijetloj i tamnoj pozadini kako biste bili sigurni da ostaje čitljiv.
4. Preuzmite paket. Sadrži ICO, PNG veličine, Apple touch ikonu, ikone za manifest i HTML isječak za lijepljenje.
5. Učitajte datoteke u korijen svoje web stranice kako bi bile dostupne na putanjama poput /favicon.ico.
6. Dodajte HTML u <head> svake stranice ili u zajednički layout odnosno predložak.
7. Provjerite pomoću provjere favicona, zatim očistite predmemoriju preglednika i ponovno učitajte stranicu da vidite novu ikonu.

Primjer HTML isječka

<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 ICO poveznici pomaže preglednicima da preferiraju SVG kada ga podržavaju, dok ICO ostaje kao zamjena. PNG od 96 px zadovoljava Googleovo pravilo o višekratniku broja 48.

Primjer manifesta web 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"
}

Ako radite s build procesima ili želite automatizirati izradu ikona, pogledajte resurse za programere.

Savjeti za dizajn favicona koji funkcionira

• Neka bude jednostavan. Jedan oblik, jedno slovo ili jasan monogram bolji su od detaljnog logotipa koji se pri 16 px pretvori u mrlju.
• Koristite jak kontrast. Pobrinite se da je ikona vidljiva i na svijetloj i na tamnoj temi preglednika. Obojena pozadinska pločica pomaže.
• Izbjegavajte tekst. Jedan inicijal je u redu; riječi su u ovoj veličini nečitljive.
• Ostavite malo razmaka za maskable ikone i ikone sa zaobljenim rubovima kako ništa važno ne bi bilo odrezano.
• Budite dosljedni s logotipom i bojama brenda kako bi favicon učvrstio prepoznatljivost.
• Testirajte na stvarnim uređajima i provjerite kako izgleda u kartici, oznaci i Googleovu rezultatu.

Česti problemi s faviconom

Ako se vaša ikona ne prikazuje, uobičajeni uzroci su predmemorija, pogrešne putanje i blokirane datoteke. Preglednici agresivno spremaju favicone u predmemoriju, pa je za prikaz promjena često dovoljno tvrdo osvježavanje ili novi privatni prozor. Provjerite vraća li URL datoteke status 200 i ispravan tip sadržaja te nalazi li se oznaka <link> unutar <head>. Za pretraživanje pobrinite se da robots.txt ne blokira ikonu ni početnu stranicu. MakeFav provjera može vam pomoći da brzo uočite te probleme.

Često postavljana pitanja

Što znači favicon?

Favicon je skraćenica od „favorite icon” (omiljena ikona). Naziv potječe iz Internet Explorera 5, koji je 1999. prvi koristio malu datoteku ikone za ukrašavanje unosa na popisu favorita preglednika. Izraz se zadržao iako se ikona danas prikazuje na mnogo drugih mjesta.

Pomaže li favicon SEO-u?

Favicon nije izravan čimbenik rangiranja. Ipak, prikazuje se pokraj naziva vaše stranice u Googleovim rezultatima na mobilnim uređajima i računalima, pa može poboljšati prepoznatljivost brenda i vizualnu privlačnost vašeg unosa, što može neizravno potaknuti klikove. Poštivanje Googleovih smjernica ono je što ikonu čini podobnom za prikaz.

Koje veličine treba biti favicon?

Za Google pretraživanje koristite kvadratnu sliku koja je višekratnik od 48 piksela, primjerice 48x48 ili 96x96. Za širu pokrivenost dodajte i ICO datoteku, Apple touch ikonu od 180x180 te ikone manifesta od 192x192 i 512x512. SVG je dobar dodatak zbog skalabilnosti.

Treba li mi još uvijek favicon.ico ako koristim PNG ili SVG?

I dalje je dobra ideja. Preglednici i neki alati prema zadanim postavkama traže /favicon.ico, a stariji se softver na njega oslanja. Zadržavanje ICO datoteke u korijenu stranice sprječava pogreške 404 i daje vam sigurnu zamjenu kada SVG ili PNG nisu podržani.

Zašto se moj favicon ne ažurira?

Preglednici i tražilice dugo drže favicone u predmemoriji. Pokušajte tvrdo osvježavanje, privatni prozor ili brisanje predmemorije. Provjerite je li putanja datoteke ispravna i poslužuje li se nova datoteka. U Google pretraživanju promijenjenoj ikoni može trebati nekoliko dana ili tjedana da bude ponovno indeksirana i ažurirana.