Kada otvorite više kartica u internet pregledaču, primetićete male ikonice pored naziva svakog sajta. Te male ikonice nazivaju se favicon.

Favicon je mali grafički simbol koji predstavlja identitet jednog web sajta ili aplikacije. Iako deluje kao sitan detalj, favicon ima veoma važnu ulogu u prepoznatljivosti, profesionalnom izgledu i korisničkom iskustvu sajta.

Šta znači reč “favicon”?

Naziv favicon nastao je od engleskih reči:

• favorite
• icon

Prvobitno je korišćen za ikonice koje su se prikazivale u Internet Explorer “Favorites” listi (današnji bookmarks/favoriti).

Kada je favicon nastao?

Favicon je prvi put predstavljen 1999. godine od strane kompanije:

Microsoft

u pregledaču:

Internet Explorer

Prva implementacija koristila je fajl:

/favicon.ico

koji se nalazio u root folderu sajta.

Kasnije su svi moderni browseri prihvatili favicon kao standard web razvoja.

Čemu služi favicon?

Favicon ima više funkcija nego što većina ljudi misli.

1. Prepoznatljivost sajta

Korisnici mnogo lakše pronalaze vaš sajt među više otvorenih tabova.

Bez favicon-a:

• browser prikazuje generičku ikonicu
• sajt izgleda nedovršeno
• teže se razlikuje od drugih

Sa favicon-om:

• brend je odmah prepoznatljiv
• korisnik brže pronalazi tab
• sajt izgleda profesionalnije

2. Branding i identitet

Favicon je zapravo mini-logo sajta.

Velike kompanije su postale prepoznatljive upravo po favicon ikonici:

• Google
• YouTube
• Facebook
• Instagram

Mnogi korisnici danas prepoznaju sajt samo po favicon-u.

Gde se favicon prikazuje?

Favicon se prikazuje na više mesta:

U browser tabu

Najpoznatija pozicija favicon-a.

U bookmark/favorites listi

Pomaže korisnicima da lakše pronađu sačuvane sajtove.

Na mobilnim uređajima

Kada korisnik doda sajt na Home Screen.

U istoriji pregledača

Browser prikazuje favicon pored URL adrese.

U rezultatima pretrage

Neki pretraživači prikazuju favicon uz rezultat sajta.

U progresivnim web aplikacijama (PWA)

Koristi se kao ikonica aplikacije.

Koji tipovi favicon fajlova postoje?

Danas postoji više formata favicon-a.

ICO

Najstariji i dugo najkorišćeniji format.

Primer:

favicon.ico

Prednosti:

• podržavaju ga svi browseri
• može sadržati više veličina u jednom fajlu

Mane:

• stariji format
• veća veličina fajla

PNG

Danas najpopularniji format.

Primer:

favicon-32x32.png

Prednosti:

• kvalitetnija slika
• transparentna pozadina
• manji fajl

SVG

Moderni vektorski favicon.

Primer:

favicon.svg

Prednosti:

• beskonačno skaliranje bez gubitka kvaliteta
• veoma mali fajl
• idealan za moderne sajtove

Mane:

• stariji browseri nemaju punu podršku

GIF

Ređe korišćen.

Može biti i animiran.

WebP

Modern format sa veoma malom veličinom fajla.

Podrška još nije univerzalna za favicon.

Koje veličine favicon-a postoje?

Favicon danas nije samo jedna ikonica.

Moderni sajtovi koriste više veličina za različite uređaje i sisteme.

Najčešće veličine

Da li sajt može bez favicon-a?

Može.

Ali:

• izgleda neprofesionalno
• browser prikazuje praznu ili generičku ikonu
• korisnici teže prepoznaju sajt
• slabiji je vizuelni identitet

Danas se favicon praktično smatra standardom.

Da li favicon utiče na SEO?

Direktno — veoma malo.

Ali indirektno može pomoći:

• bolji korisnički doživljaj
• veća prepoznatljivost
• bolji CTR
• profesionalniji izgled sajta

Google Search Central čak koristi favicon u mobilnim rezultatima pretrage.

Kako se favicon dodaje na sajt?

Najčešće preko HTML taga:

<link rel="icon" type="image/png" href="/favicon.png">

Za Apple uređaje:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Za SVG:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Šta čini dobar favicon?

Dobar favicon treba da bude:

• jednostavan
• jasan
• prepoznatljiv
• vidljiv i u malim dimenzijama
• bez sitnih detalja
• sa dobrim kontrastom

Najčešće se koristi:

• prvo slovo brenda
• simbol/logotip
• minimalistička forma

Najčešće greške kod favicon-a

Previše detalja

Sitni elementi se ne vide na 16×16 px.

Loš kontrast

Ikonica postaje nečitljiva.

Prevelik fajl

Usporava učitavanje.

Nedostatak mobilnih verzija

Ikonica izgleda loše na telefonima.

Neusklađen branding

Favicon ne prati vizuelni identitet sajta.

Favicon danas

Danas favicon nije samo “mala ikonica”.

On je deo:

• brendinga
• UX dizajna
• PWA aplikacija
• SEO prikaza
• identiteta sajta
• mobilnog iskustva

Praktično svaki ozbiljan web sajt danas koristi favicon.

Iako je veoma mali element, favicon ima veliku ulogu u profesionalnom izgledu i prepoznatljivosti sajta.

Dobar favicon:

• povećava poverenje korisnika
• poboljšava vizuelni identitet
• olakšava navigaciju
• doprinosi profesionalnom utisku

Bez njega sajt deluje nedovršeno, dok kvalitetan favicon daje utisak ozbiljnog i modernog web prisustva.