Šta je favicon i kako ga dodati na sajt?
U svetu web dizajna i korisničkog iskustva, često se zanemaruju sitnice koje ostavljaju jak utisak.
Jedna od tih sitnica je upravo – favicon. Ako si se ikada pitao šta je favicon i zašto ga većina sajtova koristi, sada ćeš dobiti jasan odgovor.
U ovom blogu objasnićemo:
šta je favicon,
kako izgleda,
čemu služi,
i naravno kako da ga dodaš na svoj sajt, bez obzira da li koristiš WordPress, Webflow, ili običan HTML.
Šta je favicon?
Favicon (od „favorite icon“) je mala ikonica koja se prikazuje u tabu browsera, pored naslova stranice.
Takođe se prikazuje u listi sačuvanih stranica (bookmarkova), u istoriji pretraživača i na mobilnim uređajima kao prečica ka sajtu.
Kada posetiš, recimo, YouTube, vidiš crvenu ikonu sa belom strelicom. To je njihov favicon.
Zašto je važan?
✔️ Prepoznatljivost brenda – korisnik odmah zna gde se nalazi
✔️ Profesionalni utisak – sajt bez favicona deluje „nedovršeno“
✔️ Lakše snalaženje u otvorenim tabovima
✔️ Vidljivost na mobilnim uređajima i bookmark listama
Ako imaš sajt i ne znaš šta je favicon, velika je verovatnoća da ti fali jedan detalj koji pravi razliku u utisku kod posetioca.
Kako izgleda favicon?
Najčešće dimenzije:
16×16 px
32×32 px
48×48 px
Format:
.ico(najuniverzalniji).png(moderan i podržan u većini browsera).svg(skalabilan, za naprednije korisnike)
Boje treba da budu kontrastne i jednostavne jer se prikazuje u veoma malom formatu.
Kako da dizajniraš favicon čak i bez dizajnerskog znanja
Sada kada znaš šta je favicon i zašto je važan, vreme je da ga napraviš. Ne brini – ne moraš biti dizajner niti znati rad u Photoshopu.
Postoje besplatni i jednostavni alati koji ti omogućavaju da kreiraš kvalitetan favicon za nekoliko minuta.
Besplatni alati za kreiranje favicona
Favicon.io
Generiše favicon od teksta, slike ili emojija
Možeš odmah preuzeti.icofajl i kod za HTMLRealFaviconGenerator
.net
Kreira sve formate potrebne za desktop, iOS i Android
Idealno za naprednije favicon paketeCanva
Dizajniraš kvadratni logo → eksportuješ u.png→ konvertuješ u.ico
Kako da eksportuješ favicon?
Bez obzira koji alat koristiš, cilj je da dobiješ jedan ili više sledećih fajlova:
favicon.ico– univerzalna verzijafavicon.png– za modernije browsereapple-touch-icon.png– za prikaz na iOS uređajima
Preporučuje se da fajl bude nazvan tačno tako (favicon.ico) i smešten u root folder sajta.
Sada kad znaš šta je favicon, znaš i da bez njega sajt deluje nedovršeno – ali sa njim dobijaš kompletan vizuelni identitet.
Priprema pre dodavanja favicona na sajt
Pre nego što postaviš favicon, proveri sledeće:
✔️ Da li koristiš WordPress, Webflow, ili ručni HTML?
✔️ Da li želiš samo osnovnu verziju (desktop) ili i naprednu (mobilni uređaji)?
✔️ Da li si eksportovao fajl kao .ico ili .png?
Kada znaš šta je favicon, važno je da ga implementiraš pravilno jer nepravilno postavljen favicon browser često ignoriše.
Kako da dodaš favicon na svoj sajt, korak po korak
Sada kada znaš šta je favicon, imaš spreman dizajn i fajl u pravom formatu, vreme je da ga postaviš na svoj sajt.
U zavisnosti od platforme koju koristiš, postupak je malo drugačiji – ali ni u jednom slučaju nije komplikovan.
WordPress
Ako koristiš WordPress (sa Gutenberg editorom ili nekim page builderom kao Elementor), dodavanje favicona je brzo:
Idi u Podešavanja (Appearance) → Prilagodi (Customize)
Klikni na Identitet sajta (Site Identity)
Klikni na „Izaberi ikonicu sajta“ (Site Icon)
Učitaj svoj
favicon.png(preporučena dimenzija: 512×512 px)Sačuvaj izmene
WordPress automatski generiše sve potrebne formate. Ne moraš da brineš o .ico fajlu.
Webflow
Ako koristiš Webflow, postupak je sličan:
Otvori svoj projekat
Idi na Project Settings → General
U sekciji Favicon otpremi svoj
.pngili.icofajlObjavi sajt ponovo
Webflow automatski povezuje favicon i odmah ga prikazuje u tabu browsera.
Ručno (HTML sajt)
Ako praviš sajt ručno u HTML-u, moraš dodati sledeći kod u <head> sekciju:
Ako koristiš .ico, koristi:
Važno: fajl favicon.ico mora biti u glavnom folderu sajta (root folder), npr. public_html ili htdocs.
Kako da proveriš da li je favicon postavljen ispravno?
✔️ Otvori sajt u browseru i proveri da li se ikonica prikazuje u tabu
✔️ Očisti keš ako ne vidiš odmah
✔️ Poseti sajt sa drugog uređaja ili inkognito prozora
✔️ Možeš koristiti i RealFaviconGenerator Validator
Sada ne samo da znaš šta je favicon, već znaš i kako da ga dodaš, testiraš i učiniš svojim sajtom kompletnijim.
Najčešći problemi sa faviconom (i kako da ih rešiš)
Iako znaš šta je favicon i kako da ga postaviš, moguće je da neće odmah raditi kako očekuješ. Evo najčešćih problema i kako da ih rešiš:
Problemi i rešenja – lista
Najčešći problemi sa faviconom:
Problem: Favicon se ne prikazuje
Uzrok: Browser keš
✅ Rešenje: Očisti keš i probaj u inkognito modu
Problem: Ne vidi se na mobilnim uređajima
Uzrok: Nema apple-touch-icon.png
✅ Rešenje: Dodaj taj fajl u root folder
Problem: Nestaje nakon ažuriranja
Uzrok: Fajl se ne učitava iz ispravne putanje
✅ Rešenje: Proveri naziv fajla i link u <head>
Problem: Ne prikazuje se odmah
Uzrok: Browser kašnjenje
✅ Rešenje: Sačekaj 10 minuta i više puta osveži
Koliko favicona ti stvarno treba?
U teoriji ti je dovoljan jedan .ico fajl.
Ali ako želiš najbolju kompatibilnost i profesionalni utisak, preporučuje se da imaš sledeće formate:
favicon.ico– za većinu browserafavicon.png– moderni browseri, lakše za menjanjeapple-touch-icon.png– za iOS i Android uređajemanifest.json(opciono) – za progresivne web aplikacije
Kada znaš šta je favicon, onda znaš i da ne postoji „jedan idealan format“, već više verzija za različite uređaje.
Favicon, pokazatelj jedinstvenosti
Sada više nemaš dilemu šta je favicon.
Znaš kako izgleda, čemu služi, zašto je važan, kako se dizajnira i postavlja, i kako da rešiš eventualne probleme.
Dodavanjem favicona:
✔️ tvoje stranice izgledaju profesionalnije
✔️ tvoj brend postaje prepoznatljiv
✔️ korisnicima olakšavaš navigaciju i pamćenje sajta
Sitnica? Možda.
Ali sitnice prave razliku pogotovo u online svetu.
Korisni linkovi
Favicon.io – jednostavna favicon izrada
Real Favicon Generator – kompletni paketi + validator
Canva – dizajn favicona kao PNG
QR Code Generator – ako favicon koristiš kao deo brenda
Da li favicon mora biti .ico?
Ne – moderni browseri podržavaju i .png, ali .ico je najuniverzalniji.
Kolika treba da bude veličina favicona?
Najčešće: 16×16 px ili 32×32 px. Za Apple uređaje: 180×180 px.
