Kako izraditi favicon
Veličine, formati i kod koji su vam potrebni za favicon koji se prikazuje posvuda.
Favicon je mala ikona na kartici preglednika, u oznakama i pokraj vaše stranice u Googleovim rezultatima pretraživanja na mobitelu. Stranica bez favicona izgleda nedovršeno, a ona s mutnim faviconom još gore. Izrada dobrog favicona traje nekoliko minuta.
Počnite s pravom grafikom
Favicon se prikazuje i u veličini od samo 16 × 16 piksela, pa cijeli logotip s nazivom neće biti čitljiv. Upotrijebite jednostavan znak: simbol iz logotipa, jedno početno slovo ili upečatljiv oblik u boji vašeg brenda. Isprobajte ga tako da ga na zaslonu smanjite na četvrtinu veličine. Ako i dalje možete prepoznati što je, funkcionirat će.
Krenite od kvadratne slike od najmanje 512 × 512 piksela, najbolje PNG s prozirnom pozadinom. Ako logotip nije kvadratan, obrežite ga u kvadrat sa zaključanim omjerom 1:1.
Datoteke koje su vam potrebne
| Datoteka | Veličina | Koristi ga |
|---|---|---|
| favicon.ico | Sadrži verzije od 16, 32 i 48 piksela | Preglednici, stariji sustavi, zadani zahtjev za /favicon.ico |
| PNG ikona | 32 × 32 i 192 × 192 | Moderni preglednici, početni zasloni Androida |
| apple-touch-icon.png | 180 × 180 | Oznake na početnom zaslonu iPhonea i iPada |
Google Search vaš favicon koristi i u rezultatima. Mora biti kvadrat od najmanje 48 × 48 piksela i dostupan alatu za indeksiranje na vašoj stranici.
Izrada ICO datoteke
Ubacite kvadratni PNG u pretvarač PNG u ICO. On stvara pravu .ico datoteku s malim veličinama koje preglednici traže. Za PNG verzije promijenite veličinu iste kvadratne slike na 180, 192 i 32 piksela.
Dodavanje na stranicu
Prenesite favicon.ico u korijensku mapu stranice tako da bude dostupan na adresi vasastranica.com/favicon.ico i dodajte ove retke unutar oznake head na svojim stranicama:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/hr/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/hr/apple-touch-icon.png">
U WordPressu idite na Appearance, Customize, Site Identity i prenesite kvadratnu sliku kao Site Icon, a WordPress će sam izraditi veličine. Shopify, Wix i Squarespace svaki imaju postavku za favicon u postavkama stranice ili teme.
Kada se novi favicon ne prikazuje
Preglednici tvrdoglavo pamte favicone u predmemoriji. Otvorite stranicu u privatnom prozoru ili izravno posjetite vasastranica.com/favicon.ico i osvježite. Googleu može trebati nekoliko dana ili tjedana da ažurira ikonu u rezultatima pretraživanja, nakon što ponovno indeksira vašu početnu stranicu.
Česte pogreške
- Korištenje cijelog logotipa sa sitnim tekstom, koji se na 16 piksela pretvori u mrlju.
- Bijela ikona na prozirnoj pozadini, koja nestaje na svijetlim karticama preglednika.
- Samo sićušna datoteka od 16 piksela, koja na zaslonima visoke rezolucije izgleda mutno.
- Zaboravljena datoteka na /favicon.ico, koju neki preglednici i alati za indeksiranje traže bez obzira na to što piše na stranici.