Što je Favicon: Kako ga izraditi s primjerima [Vodič za početnike]

Koristite li favicon na svom web stranica ?

Jeste li se ikada zapitali zašto vidite malene logotipe ili simbole pored naslova web stranica u svom pregledniku? 

Kao što je ovo:

Ove slatke male ikone nazivaju se favikoni i predstavljaju web stranica u web preglednicima. 

Pitate se kako ga stvoriti? Na pravom ste mjestu.

U ovom članku ćemo otkriti;

• Što je zapravo favicon i gdje se nalazi u vašem pregledniku?
• Kako ove male ikone koriste i vlasnicima i korisnicima web stranica?
• Što čini dobar favicon i kako možete stvoriti onaj koji će se razlikovati od ostalih?

Jeste li znatiželjni? Prijeđimo na detalje.

Sadržaj ☰

Što je favicon?

Favicon je mala, jedinstvena slika koja se pojavljuje u kartici preglednika pored naslova vašeg web stranica.

GLAVNA svrha WordPress favicona je pomoći korisnicima da brzo prepoznaju vašu stranicu među svim ostalim otvorenim karticama u njihovom pregledniku.

Evo primjera kako favicon izgleda:

Evo nekih dodatnih favicon popularnih web stranica prikazanih na Chromeovoj traci oznaka.

Koje su prednosti dodavanja Favicona na vašu stranicu?

Favicon vaše web stranice predstavlja identitet stranice. Potreban vam je atraktivan favicon ako želite izgraditi osobni brend ili učiniti svoju web stranicu nezaboravnijom.

Evo nekoliko glavnih prednosti dodavanja WordPress favicona na vašu web stranicu u 2024.

• Profesionalizam: Najveća prednost korištenja favicona je ta što vaša web stranica izgleda profesionalnije i vizualno privlačnije.
• Bolje korisničko iskustvo: Većina online korisnika obično ima više otvorenih kartica u web pregledniku. Jedinstven i atraktivan favicon pomaže vam da lakše prepoznate svoje web mjesto. Razmislite o Amazonu, Twitteru (X), YouTubeu itd. Te stranice možete lako prepoznati gledajući favikone.
• Prednosti od SEO : Gotovo sve tražilice, uključujući Google i Bing, prikazuju favikone u rezultatima pretraživanja, što može pomoći vašoj web stranici da se istakne.
• Prepoznatljivost marke: Što više ljudi vidi favicon vaše web stranice, lakše će prepoznati vaš brend.
• favoriti: mnogi ljudi često označe stranicu (ili web stranicu) kada pronađu nešto zanimljivo. Favicon ističe vaše web mjesto na popisima favorita, potičući korisnike da ga ponovno posjete.

Kako dodati favicon na svoj WordPress blog?

Morate izraditi favicon prije nego što naučite kako dodati favicon na svoju stranicu. Ako već imate logotip za svoju web stranicu, možete ga koristiti kao favicon. 

Ako ga nemate, na mreži postoji mnogo besplatnih generatora favicona koji vam mogu pomoći u stvaranju favicona profesionalnog izgleda za vaše web mjesto.

Na primjer, možete koristiti favicon.io generator . Možete upotrijebiti ovu stranicu da pretvorite svoj postojeći logotip web stranice u favicon ili ga izradite ispočetka.

Kada se nađete na njihovoj web stranici, unesite tekst koji se odnosi na naziv vaše tvrtke ili web stranice i automatski će se prikazati pretpregled favicon, kao što je prikazano u nastavku.

Kao što vidite, možete urediti svoj favicon kako želite mijenjajući njegov tekst, pozadinu, veličinu fonta, boju fonta, boju pozadine itd. 

Kada završite, možete kliknuti na gumb "Preuzmi" da biste ga preuzeli.

Nakon što je slika favicona spremna, dodajte novi favicon na svoju WordPress stranicu pomoću jedne od sljedećih metoda.

Metoda 1: Koristite WordPress alat za prilagodbu (najjednostavniji)

Da biste dodali favicon na svoju WordPress stranicu, idite na Izgled > Prilagodi na nadzornoj ploči WordPressa.

Pritisnite Identitet stranice. 

Pomaknite se malo prema dolje i pronaći ćete "ikonu stranice".

Odaberite sliku iz svoje medijske biblioteke ili prenesite novu. Za najbolje rezultate provjerite je li kvadratna i ima najmanje 512 × 512 piksela.

Izrežite sliku po želji i kliknite Odaberi. Pritisnite Objavi da biste spremili promjene. To je to, gotovi ste.

Metoda 2: Koristite dodatak Favicon

Možete koristiti i WordPress plugin da dodate favicon na svoju WordPress stranicu.

Instalirajte dodatak poput Favicon iz RealFaviconGeneratora , koji je besplatni dodatak koji vam pomaže generirati i dodati favicon različitih veličina, uključujući:

• Desktop preglednici
• iPhone / iPad
• Android uređaji
• Windows 8 tableti i noviji

Aktivirajte dodatak i slijedite njegove upute.

Morat ćete odabrati svoju sliku i dodatak će generirati sve potrebne datoteke i kodove.

Ovako to izgleda;

Metoda 3: Ručno dodavanje Favicona (za iskusne korisnike)

Stvorite svoju favicon datoteku pomoću jednog od gore spomenutih besplatnih favicon generatora. 

Provjerite je li favicon kvadratna slika spremljena u .ico formatu datoteke.

Prijavite se na svoju web stranicu pomoću FTP klijenta (kao što je FileZilla) i prenesite favicon datoteku u korijenski direktorij vaše web stranice.

Posljednji dio je dodavanje HTML koda.

Uredite datoteke tema svoje web stranice (obično header.php) i dodajte sljedeći isječak koda, zamjenjujući "favicon.ico" stvarnim nazivom datoteke vašeg favicona:

To je to, gotovi ste.

Važna nota : Obavezno testirajte svoj favicon na različitim uređajima i preglednicima kako biste bili sigurni da se ispravno prikazuje. Također pokušajte koristiti prozirnu pozadinu za svoj favicon za najbolje rezultate.

Uobičajeni formati favicona

Postoje TRI najčešća formata datoteka za favikone, naime:

• ICO (ikona Windows)
• PNG (prijenosna mrežna grafika)
• SVG (skalabilna vektorska grafika)

ICO je najpopularniji i najoriginalniji format favicona koji je razvio Microsoft. Glavni razlog za korištenje ovog formata je taj što je kompatibilan sa svim glavnim preglednicima, uključujući starije verzije poput Internet Explorera.

PNG format naširoko koriste profesionalni dizajneri. Ovaj format podržava prozirne pozadine i njegova je veličina datoteke često manja od ICO.

SVG je preporučeni format ako želite koristiti i skalirati favicon bez gubitka kvalitete. Međutim, ovaj format favicon NIJE toliko široko podržan kao ICO ili PNG, osobito na starijim uređajima ili preglednicima.

Brzi savjeti za izradu WordPress Favicona

Evo nekoliko korisnih savjeta za stvaranje jedinstvenog favicona za vašu WordPress stranicu.

• Neka bude jednostavno: Favikoni su vrlo male slike, stoga izbjegavajte korištenje previše teksta ili teksta koji je premalen. Pokušajte koristiti podebljane oblike, jednostavna slova i jednostavne logotipe. Ako je moguće, razmislite o korištenju pojednostavljene verzije vašeg logotipa.
• Inspirirajte se: inspirirajte se najvećim brendovima kao što su Amazon, Google, Tesla, Apple itd. Ili pregledajte najbolja web-mjesta u svojoj industriji za inspiraciju i izradite favicon.
• Koristite svoju fotografiju: Ako pogledate favicon našeg bloga, koristimo sliku osnivača. Ako želite stvoriti osobni brend, upotrijebite svoju fotografiju kao favicon. Puno je jednostavnije i jedinstvenije.
• Koristite prozirnu pozadinu: uvijek koristite prozirnu pozadinu. Možete koristiti PNG format s prozirnošću za bolju vidljivost. Također, ovo omogućuje da se favicon neprimjetno uklopi u različite pozadine preglednika. Spremite svoj favicon u PNG ili ICO formatu.
• Ne budi fensi: ne morate koristiti sve dostupne boje. Držite se ograničene palete boja. Najbolje je koristiti samo jednu ili dvije boje za maksimalnu vidljivost.
• Koristite ispravnu veličinu: koristite kvadratnu sliku preporučene veličine 512 × 512 piksela. Najbolji dio WordPressa je što automatski generira manje verzije za različite uređaje, poput mobilnih uređaja i tableta. 
• Koristite alate: Možete koristiti besplatne mrežne alate kao što su Favicon.io ili RealFaviconGenerator.net za jednostavnu izradu i optimizaciju vašeg favicona.

Favicons FAQ

Evo nekih često postavljanih pitanja o favikonima. 

Završne misli o tome što je favicon slika

Upamtite da je veličina bitna kada se radi o stvaranju favicona. Idealna veličina je 512 × 512 piksela, ali trebala bi biti skalabilna do 16 × 16 piksela za optimalnu kompatibilnost (na različitim preglednicima i uređajima).

Također razmislite o korištenju svog logotipa, simbola robne marke ili bilo koje slike koja odražava sadržaj vaše web stranice.

Dakle, što mislite o korištenju favicona? Imate li kakvih pitanja ? Javite nam u komentarima.