Kas üks favicon.ico fail on piisav?

Lauaarvuti brauserite jaoks tavaliselt jah, eeldusel et see sisaldab suurusi 16, 32 ja 48 px. iPhone'i avaekraan ja Androidi rakenduse käivitamine vajavad aga eraldi PNG-faile, seega on parem need samuti ette valmistada.

Miks minu uus favicon ei ilmu?

Enamasti on põhjuseks vahemälu. Ava leht privaatses aknas, tühjenda brauseri andmed või nimeta fail ümber või lisa parameeter ?v=2. Otsingumootoritel võib ikooni koopia värskendamine võtta mitu päeva või kauem.

Kas favicon võib olla JPG?

Mõned brauserid aktsepteerivad seda, kuid JPG-l ei ole läbipaistvust ja see ei ole tavapärane valik. Kasuta selle asemel PNG-d, ICO-d või SVG-d.

Kuidas teha favicon: suurused, vormingud ja HTML-kood

Favicon on väike saidiikoon, mida näidatakse brauseri kaartidel, järjehoidjates ja otsingutulemustes. See tundub pisiasi, kuid ilma selleta sait mõjub pooleli jäänuna ning vale suurus või vorming võib ikooni hägusaks muuta. See juhend selgitab, millised suurused on vaja, millise vormingu valida ja millise koodi lehele lisada.

Mis on favicon ja kus see ilmub

Favicon (lühend sõnadest favorite icon) on väike ruudukujuline pilt, mida brauserid näitavad lehe pealkirja kõrval kaardil, järjehoidjate loendis ja ajaloos. Mobiilis kuvab Google'i otsing aadressi kõrval samuti saidi ikooni, mistõttu aitab selge favicon inimestel sinu saiti ära tunda.

Kui sa ikooni ei deklareeri, proovivad brauserid tavaliselt saidi juurkataloogist laadida faili /favicon.ico. Kui seda ei ole, näitavad nad üldist gloobuse või tühja lehe sümbolit.

Millised suurused on vaja

Ühtset universaalset suurust ei ole, sest erinevad kohad kasutavad erinevaid faile. Praktikas piisab väikesest komplektist ning kogu selle saad valmis teha ühest ruudukujulisest PNG-st, mille külg on vähemalt 512 px.

Suurus	Kasutatakse
16x16 px	Brauseri kaart (tavatihedusega ekraanid)
32x32 px	Kaart kõrge tihedusega ekraanidel, tegumiriba
48x48 px	Mõned brauserid ja otsingumootorid, Windowsi otseteed
180x180 px	apple-touch-icon, kui sait lisatakse iPhone'i või iPadi avaekraanile
192x192 px	Veebimanifest, Androidi avaekraan
512x512 px	Veebimanifest, käivituskuvad ja suuremad rakenduse ikoonid

ICO, PNG ja SVG

ICO on vana konteinervorming, mis mahutab ühte faili mitu suurust (näiteks 16, 32 ja 48 px). Kõik brauserid toetavad seda, seega on /favicon.ico varuvariandina endiselt kasulik.

PNG on lihtne ja töökindel: see sobib 32, 180, 192 ja 512 px versioonideks ning toetab läbipaistvust. SVG on vektorvorming, mida tänapäevased brauserid toetavad: üks fail püsib terav igas suuruses ja suudab isegi tumeda režiimiga kohaneda. Safari ja mõned vanemad tööriistad käsitlevad SVG-faviconit aga vaid osaliselt, seega on kõige turvalisem neid kombineerida: ICO varuvariandina, PNG Apple'i ja manifesti ikoonideks ning SVG valikulise lisana.

Kuidas PNG-st favicon teha

Alusta ruudukujulisest pildist, ideaalis 512x512 px või suuremast, selge ja lihtsa kujundusega. Kui sul on ainult JPG, saad selle kõigepealt PNG-ks teisendada, et läbipaistva tausta saaks hiljem pildiredaktoris lisada.

Valmista ette ruudukujuline PNG lihtsa logo või ühe tähega.
Teisenda see PNG-st ICO-ks teisendajaga ja salvesta failina favicon.ico.
Salvesta eraldi PNG-koopiad suurustes 180x180 (apple-touch-icon.png), 192x192 ja 512x512 veebimanifesti jaoks.
Laadi failid saidi juurkataloogi ja lisa HTML-sildid elementi <head>.

Lisatavad HTML-sildid

Pane need read oma lehe elementi <head> (kohanda failiteed vastavalt sellele, kus sinu failid asuvad):

Failis site.webmanifest loetle jaotises icons üles 192x192 ja 512x512 PNG-failid. Kui sul SVG-d ei ole, jäta see rida lihtsalt välja.

Levinud vead

Mitteruudukujuline pilt: brauser pigistab või lõikab selle ära ja ikoon näeb moonutatud välja. Alusta alati ruudust.
Liiga palju detaile: 16x16 px juures muutuvad väike tekst ja varjud plekiks. Kasuta ühte lihtsat kuju, julgeid värve ja tugevat kontrasti.
Liiga väike lähtepilt: väikese pildi suurendamine teeb selle häguseks. Suure pildi vähendamine on palju turvalisem.
Läbipaistev taust tumedal kaardil: tume logo võib kaduda. Kontrolli seda nii heledas kui ka tumedas teemas või lisa taustavärv.
Vahemälu: brauserid hoiavad favicone visalt vahemälus, nii et vana ikoon võib pärast muutmist edasi paista. Testi privaatses aknas, tee kõva värskendus (Ctrl+F5) või lisa versioon, näiteks /favicon.ico?v=2.

Läbitöötatud näide algusest lõpuni

Oletame, et sul on 1024x1024 px PNG-logo ja tahad oma saidile täielikku ikoonikomplekti. Vaata kõigepealt logo, mis on vähendatud 16x16 px suuruseks: kas kuju on endiselt äratuntav? Kui ei, tee lihtsustatud versioon, näiteks ainult esimene täht ühtlasel taustal. Alles siis ekspordi suurused.

Seejärel valmista ette failid: favicon.ico (16, 32 ja 48 px ühes failis), apple-touch-icon.png (180x180), icon-192.png ja icon-512.png. See on neli faili, mis piisab peaaegu igaks olukorraks. Laadi need saidi juurkataloogi, lisa sildid elementi <head> ja ava leht tulemuse kontrollimiseks privaatses aknas.

Kuidas kontrollida, et kõik töötab

Ava https://sinu-sait/favicon.ico otse brauseris: sa peaksid nägema ikooni, mitte 404-viga.
Laadi leht arendajatööriistades (F12, vahekaart Network) uuesti ja veendu, et ikoonipäringute olek on 200.
Vaata kaarti nii heledas kui ka tumedas brauseriteemas: logo peab jääma loetavaks mõlemas.
Lisa sait telefonis avaekraanile ja kontrolli, et kuvatakse 180 px ikoon, mitte lehe ekraanipilt.
Veendu, et site.webmanifest on kehtiv JSON ja et selles olevad failiteed vastavad päris failidele.