Kako narediti favicon
Velikosti, formati in koda, ki jih potrebujete za favicon, ki se prikaže povsod.
Favicon je majhna ikona v zavihku brskalnika, v zaznamkih in ob vašem spletnem mestu v Googlovih mobilnih rezultatih iskanja. Brez ikone je spletno mesto videti nedokončano, z zamegljenim pa še slabše. Dober favicon naredite v nekaj minutah.
Začnite s pravo grafiko
Favicon se prikaže tudi v velikosti le 16 × 16 slikovnih pik, zato bo celoten logotip z napisom neberljiv. Uporabite preprost znak: simbol iz logotipa, eno samo začetnico ali izrazito obliko v barvi vaše blagovne znamke. Preizkusite ga tako, da ga na zaslonu pomanjšate na četrtino velikosti: če še vedno prepoznate, kaj je, bo deloval.
Začnite s kvadratno sliko velikosti vsaj 512 × 512 slikovnih pik, najbolje v formatu PNG s prosojnim ozadjem. Če vaš logotip ni kvadraten, ga obrežite v kvadrat z razmerjem, zaklenjenim na 1:1.
Datoteke, ki jih potrebujete
| Datoteka | Velikost | Kdo jo uporablja |
|---|---|---|
| favicon.ico | Vsebuje različice s 16, 32 in 48 slikovnimi pikami | Brskalniki, starejši sistemi, privzeta zahteva za /favicon.ico |
| Ikona PNG | 32 × 32 in 192 × 192 | Sodobni brskalniki, začetni zasloni Android |
| apple-touch-icon.png | 180 × 180 | Zaznamki na začetnem zaslonu iPhona in iPada |
Google Iskanje vaš favicon uporablja tudi v rezultatih. Biti mora kvadraten, velik vsaj 48 × 48 slikovnih pik, iskalnik pa ga mora na vašem spletnem mestu lahko pregledati.
Izdelava datoteke ICO
Svojo kvadratno sliko PNG spustite v pretvornik PNG v ICO. Ustvari pravo datoteko .ico z majhnimi velikostmi, ki jih zahtevajo brskalniki. Za različice PNG isti kvadratni sliki spremenite velikost na 180, 192 in 32 slikovnih pik.
Dodajanje na spletno mesto
Datoteko favicon.ico naložite v korensko mapo spletnega mesta, da bo dostopna na naslovu vasastran.si/favicon.ico, in v glavo (head) svojih strani dodajte te vrstice:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/sl/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/sl/apple-touch-icon.png">
V WordPressu pojdite na Videz, Prilagodi, Identiteta spletnega mesta in kot ikono spletnega mesta naložite kvadratno sliko; WordPress velikosti ustvari namesto vas. Shopify, Wix in Squarespace imajo nastavitev za favicon v nastavitvah spletnega mesta ali teme.
Ko se novi favicon ne prikaže
Brskalniki ikone spletnih mest trdovratno hranijo v predpomnilniku. Spletno mesto odprite v zasebnem oknu ali neposredno obiščite vasastran.si/favicon.ico in osvežite stran. Google lahko ikono v rezultatih iskanja posodobi šele po nekaj dneh ali tednih, ko ponovno pregleda vašo domačo stran.
Pogoste napake
- Uporaba celotnega logotipa z drobnim besedilom, ki se pri 16 slikovnih pikah spremeni v packo.
- Bela ikona na prosojnem ozadju, ki na svetlih zavihkih brskalnika izgine.
- Samo drobna datoteka s 16 slikovnimi pikami, ki je na zaslonih z visoko ločljivostjo videti zamegljena.
- Pozabljena datoteka na naslovu /favicon.ico, ki jo nekateri brskalniki in iskalni pajki zahtevajo ne glede na to, kaj piše na strani.