Glavni problem vezan uz dodavanje favicona u HTML je to što zahtijeva dodatno kodiranje. Favicons su male ikone koje se pojavljuju na kartici preglednika ili adresnoj traci web stranice. Da biste dodali favicon na HTML stranicu, morate uključiti element veze s atributom rel postavljenim na "ikona prečaca" i atributom href postavljenim na lokaciju datoteke favicona. Ovo može biti dugotrajno i teško za one koji nisu upoznati s HTML kodiranjem. Osim toga, neki preglednici možda neće prepoznati određene vrste favikona, stoga je važno provjeriti je li vaš favicon kompatibilan sa svim preglednicima prije nego što ga dodate na svoju stranicu.
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
1. Ovaj redak koda stvara vezu na vanjsku datoteku, koja se koristi za prikaz male ikone pored naslova stranice na kartici preglednika.
2. Atribut “rel” specificira odnos između trenutnog dokumenta i povezanog dokumenta, koji je u ovom slučaju ikona prečaca.
3. Atribut “href” navodi lokaciju povezanog dokumenta, što je u ovom slučaju “favicon.ico”.
4. Atribut “type” određuje vrstu medija povezanog dokumenta, što je u ovom slučaju slika s formatom ikone x.
Što je favicon
Favicon (skraćeno od "ikona favorita") mala je slika veličine 16 × 16 koja je povezana s određenim web mjestom ili web stranicom. Prikazuje se u adresnoj traci preglednika, pored naslova stranice i na popisu oznaka. Favicons se najčešće koriste kako bi korisnicima omogućili jednostavan način prepoznavanja i kretanja između različitih web stranica.
Kako mogu dodati favicon u HTML
Favicon je mala ikona koja se pojavljuje na kartici preglednika web stranice. Koristi se za pomoć pri identifikaciji vaše web stranice i za njezinu prepoznatljivost posjetiteljima. Da biste dodali favicon u HTML, morat ćete uključiti sljedeći kod u odjeljak vašeg HTML dokumenta:
Zamijenite “path/to/favicon.ico” putem do mjesta gdje ste pohranili datoteku favicon. Datoteka treba biti u .ico formatu i veličine 16×16 piksela ili 32×32 piksela.
Kako dodati SVG favicon
1. Napravite SVG datoteku: Prvi korak je stvoriti SVG datoteku koju želite koristiti kao favicon. Možete ga izraditi sami pomoću uređivača vektorske grafike kao što je Adobe Illustrator ili Inkscape ili ga možete preuzeti s weba.
2. Pretvorite SVG u ICO format: Kada imate svoju SVG datoteku, morate je pretvoriti u ICO format. To se može učiniti pomoću besplatnog mrežnog pretvarača kao što je Convertio ili CloudConvert.
3. Dodajte oznaku veze favicon u HTML: Kada imate svoju ICO datoteku, dodajte sljedeći kod u odjeljak svog HTML dokumenta:
To će reći preglednicima da je ovo favicon za vašu web stranicu i da bi je trebali prikazati kada netko posjeti vašu web stranicu.
4. Testirajte i otklonite probleme: Na kraju, testirajte svoj novi favicon tako da posjetite svoje web mjesto u različitim preglednicima i na različitim uređajima i uvjerite se da posvuda izgleda dobro! Ako postoje bilo kakvi problemi, pokušajte ih riješiti pomoću alata kao što su Google Chrome DevTools ili Firefoxovi Web Developer Tools.
