Kako napraviti favikon
Veličine, formati i kod koji su vam potrebni za favikon koji se prikazuje svuda.
Favikon je mala ikona na kartici pretraživača, u obeleživačima i pored vašeg sajta u Google rezultatima pretrage na telefonu. Sajt bez favikona izgleda nedovršeno, a sa mutnim favikonom izgleda još gore. Pravljenje dobrog favikona traje nekoliko minuta.
Počnite od prave grafike
Favikon se prikazuje i u veličini od samo 16 puta 16 piksela, pa pun logotip sa ispisanim nazivom neće biti čitljiv. Koristite jednostavan znak: simbol iz logotipa, jedno početno slovo ili upečatljiv oblik u boji vašeg brenda. Isprobajte ga tako što ćete ga na ekranu smanjiti na četvrtinu veličine: ako i dalje prepoznajete šta je, funkcionisaće.
Krenite od kvadratne slike od najmanje 512 puta 512 piksela, najbolje PNG sa providnom pozadinom. Ako vaš logotip nije kvadratan, isecite ga u kvadrat sa odnosom zaključanim na 1:1.
Fajlovi koji su vam potrebni
| Fajl | Veličina | Koristi ga |
|---|---|---|
| favicon.ico | Sadrži verzije od 16, 32 i 48 piksela | Pretraživači, stariji sistemi, podrazumevani zahtev za /favicon.ico |
| PNG ikona | 32 puta 32 i 192 puta 192 | Moderni pretraživači, početni ekrani na Androidu |
| apple-touch-icon.png | 180 puta 180 | Prečice na početnom ekranu iPhonea i iPada |
Google pretraga koristi vaš favikon i u rezultatima. On mora biti kvadrat od najmanje 48 puta 48 piksela i mora biti dostupan za indeksiranje na vašem sajtu.
Pravljenje ICO fajla
Ubacite svoj kvadratni PNG u konverter PNG u ICO. On pravi pravi .ico fajl sa malim veličinama koje pretraživači traže. Za PNG verzije, promenite veličinu iste kvadratne slike na 180, 192 i 32 piksela.
Dodavanje na sajt
Otpremite favicon.ico u osnovni folder sajta, tako da bude dostupan na vassajt.com/favicon.ico, i dodajte sledeće redove u head deo svojih stranica:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/sr/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/sr/apple-touch-icon.png">
U WordPressu idite na Appearance, Customize, Site Identity i otpremite kvadratnu sliku kao Site Icon; WordPress sam pravi potrebne veličine. Shopify, Wix i Squarespace imaju podešavanje za favikon u podešavanjima sajta ili teme.
Kada se novi favikon ne prikazuje
Pretraživači tvrdoglavo keširaju favikone. Otvorite sajt u privatnom prozoru ili direktno posetite vassajt.com/favicon.ico i osvežite stranicu. Googleu mogu biti potrebni dani ili nedelje da ažurira ikonu u rezultatima pretrage, nakon što ponovo indeksira vašu početnu stranicu.
Česte greške
- Korišćenje punog logotipa sa sitnim tekstom, koji se na 16 piksela pretvara u mrlju.
- Bela ikona na providnoj pozadini, koja nestaje na svetlim karticama pretraživača.
- Samo jedan sićušni fajl od 16 piksela, koji izgleda mutno na ekranima visoke rezolucije.
- Zaboravljen fajl na adresi /favicon.ico, koji neki pretraživači i botovi traže bez obzira na to šta piše na stranici.