Kako napraviti favicon za sajt

Favicon je mala ikonica koja se prikazuje u tabu pregledaca pored naziva vaše stranice. Svaki profesionalan sajt na kvalitetnom hostingu treba imati favicon. Iako deluje kao sitan detalj, favicon je zapravo veoma važan element vašeg brenda na internetu. Bez njega, vaš sajt deluje neprofesionalno, a posjetitelji teže prepoznaju vaš tab među desetinama otvorenih stranica.

Šta je favicon i zašto je važan?

Favicon (skraćenica od "favorites icon") je mala ikonica koja se prikazuje na više mjesta: u tabu pregledaca, u listi bookmark-ova, u istoriji pregledanja, na home screen-u mobilnih uređaja i čak u rezultatima Google pretrage. Ova ikonica pomaze korisnicima da brzo identifikuju vaš sajt i doprinosi profesionalnom izgledu vašeg online prisustva.

Sa stanovista korisničkog iskustva, favicon je ključan. Uz dobar favicon i kvalitetan naziv sajta, vaš sajt će biti prepoznatljiv. Kada korisnik ima otvoreno 15 tabova, favicon je jedini način da vizuelno prepozna koji tab pripada vašem sajtu. Bez favicona, pregledac prikazuje generičnu ikonu globusa ili praznog dokumenta, što odmah ostavlja utisak neprofesionalnosti.

Koje veličine favicona su potrebne?

Moderni pregledaci i uređaji zahtijevaju favicone u različitim veličinama. Evo najvažnijih:

16x16 piksela - Klasična veličina za tab pregledaca. Ovo je minimalna veličina koju svaki sajt treba da ima.

32x32 piksela - Koristi se za bookmark-ove i taskbar u Windows-u. Veoma česta veličina.

48x48 piksela - Windows sajt ikonica. Koristi se kada korisnik doda precicu na desktop.

180x180 piksela (apple-touch-icon) - Za iOS uređaje kada korisnik doda sajt na home screen. Apple koristi ovu veličinu za sve iPhone i iPad uređaje.

192x192 i 512x512 piksela - Za Android uređaje i Progressive Web Apps (PWA). Ove veličine se definisu u web app manifest fajlu.

Pored standardnog .ico formata koji podržava više veličina u jednom fajlu, danas se koriste i .png i .svg formati. SVG format je posebno praktični jer se skalira bez gubitka kvaliteta.

Kako napraviti favicon - alati

Postoji više načina za kreiranje favicona, od potpuno besplatnih do profesionalnih alata:

RealFaviconGenerator.net - Ovo je najbolji besplatni alat za generisanje favicona. Upload-ujete jednu sliku (preporučena veličina 512x512 ili veća) i alat automatski generira sve potrebne veličine, uključujući apple-touch-icon, Android ikone i tile ikone za Windows. Također generira HTML kod koji samo treba da kopirate u header vašeg sajta.

Favicon.io - Jednostavan alat koji vam omogućava da kreirate favicon od teksta, emojija ili upload-ovane slike. Posebno je koristan ako želite favicon koji sadrži inicijale vašeg brenda - samo unesete slova, izaberete font i boju, i alat generira sve potrebne fajlove.

Canva - Ako želite više kontrole nad dizajnom, možete koristiti Canva-u za kreiranje ikone u veličini 512x512, a zatim koristiti RealFaviconGenerator za generisanje svih veličina.

Adobe Illustrator ili Figma - Za profesionalne dizajnere koji žele potpunu kontrolu. Kreirajte SVG ikonu i eksportujte je u potrebnim veličinama.

Savjeti za dobar dizajn favicona

Favicon je izuzetno mali, tako da dizajn mora biti jednostavan i prepoznatljiv. Evo ključnih savjeta:

Koristite jednostavne oblike - slova, geometrijske forme ili stilizovane simbole. Detaljni logotipi se ne vide dobro u 16x16 piksela. Ako vaš logo ima tekst, koristite samo inicijale ili ikonografski element.

Izaberite kontrastne boje koje se dobro vide i na svetloj i na tamnoj pozadini. Mnogi pregledaci imaju dark mode, pa testirajte kako vaš favicon izgleda na obe pozadine.

Izbegavajte previše detalja. U 16x16 piksela, svaki piksel se vidi. Manje je više kada je favicon u pitanju.

Kako dodati favicon na WordPress sajt

WordPress okruženje ima ugrađen sistem za postavljanje favicona koji se zove "Site Icon". Evo koraka:

1. Idite na Izgled > Prilagodi (Appearance > Customize) u WordPress admin panelu.

2. Kliknite na Identitet sajta (Site Identity).

3. U sekciji Ikona sajta (Site Icon), kliknite na "Izaberi sliku" i upload-ujte vašu ikonu. WordPress preporučuje sliku od najmanje 512x512 piksela.

4. WordPress će automatski generisati sve potrebne veličine i dodati odgovarajuce meta tagove u header vašeg sajta.

Ovo je najjednostavniji način i radi sa svim modernim WordPress temama. Ne trebaju vam nikakvi dodaci ili ručno editovanje koda.

Kako dodati favicon na HTML sajt

Za staticke HTML sajtove, potrebno je ručno dodati link tagove u <head> sekciju vašeg HTML-a. Nakon što generišete sve veličine favicona koristeći RealFaviconGenerator, dobit ćete kod slican ovom:

Stavite favicon.ico fajl u root direktorijum vašeg sajta (pored index.html). Zatim dodajte link tagove za različite veličine u head sekciju: link rel="icon" za standardni favicon, link rel="apple-touch-icon" za iOS uređaje, i link rel="manifest" za PWA podršku.

Važno je da fajlovi budu dostupni na putanjama koje ste naveli u HTML-u. Preporučuje se da favicon.ico bude u root direktorijumu jer mnogi pregledaci automatski traže taj fajl na toj lokaciji.

Testiranje favicona

Nakon postavljanja, testirajte favicon na sljedeći način: otvorite sajt u različitim pregledacima (Chrome, Firefox, Safari, Edge), dodajte sajt u bookmark-ove i provjerite da li se ikonica prikazuje, testirajte na mobilnom uređaju, i koristite RealFaviconGenerator Checker alat koji proverava da li su sve veličine pravilno implementirane.

Imajte na umu da pregledaci agresivno kesiraju favicone. Ako ste promijenili favicon i ne vidite promijenu, pokušajte sa hard refresh (Ctrl+Shift+R) ili očistite kes pregledaca. Također možete dodati query string parametar na putanju favicona da forsirate osvezavanje.

Zaključak

Favicon je mali ali važan detalj koji doprinosi profesionalnom izgledu vašeg sajta. Sa besplatnim alatima poput RealFaviconGenerator-a, kreiranje i implementacija favicona je posao od svega 10 minuta. Ne zanemarujte ovaj element - on je dio prvog utiska koji vaš sajt ostavlja na posjetitelje.