Kuidas teha favicon
Suurused, vormingud ja kood, mida vajad favicon'i jaoks, mis näib kõikjal.
Favicon on väike ikoon brauseri vahekaardil, järjehoidjates ja sinu saidi kõrval Google'i mobiilsetes otsingutulemustes. Puuduv favicon muudab saidi lõpetamata välimusega ja udune näeb veel halvem välja. Hea favicon'i tegemine võtab mõne minuti.
Alusta õigest kujundusest
Favicon'i kuvatakse kuni 16 korda 16 piksli suuruses, seega täislogo koos sõnamärgiga on loetamatu. Kasuta lihtsat märki: sümbolit oma logost, ühte algustähte või julget kujundit oma brändivärvis. Testi seda, vähendades see ekraanil neljandikuni: kui saad endiselt aru, mis see on, siis see toimib.
Alusta ruudukujulisest pildist, mis on vähemalt 512 korda 512 pikslit, ideaalis läbipaistva taustaga PNG. Kui sinu logo pole ruudukujuline, kärbi see ruuduks, kuvasuhe lukustatud väärtusele 1:1.
Vajalikud failid
| Fail | Suurus | Kasutaja |
|---|---|---|
| favicon.ico | Sisaldab 16, 32 ja 48 piksli versioone | Brauserid, vanemad süsteemid, vaikimisi päring /favicon.ico järele |
| PNG-ikoon | 32 korda 32 ja 192 korda 192 | Tänapäevased brauserid, Androidi avakuvad |
| apple-touch-icon.png | 180 korda 180 | iPhone'i ja iPadi avakuva järjehoidjad |
Google Search kasutab sinu favicon'i ka tulemustes. See peab olema vähemalt 48 korda 48 piksli suurune ruut ja otsingurobotil peab olema sellele sinu saidil juurdepääs.
ICO-faili tegemine
Lohista oma ruudukujuline PNG PNG-st ICO-ks teisendajasse. See loob päris .ico-faili, mis sisaldab väikeseid suurusi, mida brauserid küsivad. PNG-versioonide jaoks muuda sama ruudukujulise pildi suurus 180, 192 ja 32 piksliks.
Selle lisamine oma saidile
Laadi favicon.ico üles oma saidi juurkausta, et see oleks kättesaadav aadressil sinusait.ee/favicon.ico, ja lisa need read oma lehtede head-osasse:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/et/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/et/apple-touch-icon.png">
WordPressis mine Appearance, Customize, Site Identity ja laadi ruudukujuline pilt üles kui Site Icon; WordPress loob suurused sinu eest. Shopifyl, Wixil ja Squarespace'il on igaühel favicon'i säte saidi või teema seadetes.
Kui uus favicon ei ilmu
Brauserid hoiavad favicon'e vahemälus visalt. Ava sait privaatses aknas või külasta otse aadressi sinusait.ee/favicon.ico ja värskenda. Google'il võib ikooni uuendamine otsingutulemustes võtta päevi või nädalaid, pärast seda kui see on sinu avalehe uuesti läbi roomanud.
Levinud vead
- Täislogo kasutamine väikese tekstiga, mis muutub 16 piksli juures plekiks.
- Valge ikoon läbipaistval taustal, mis kaob heledatel brauseri vahekaartidel.
- Ainult pisikese 16-pikslise faili pakkumine, mis näeb kõrge eraldusvõimega ekraanidel udune välja.
- Faili unustamine aadressile /favicon.ico, mida mõned brauserid ja otsingurobotid küsivad olenemata sellest, mida leht ütleb.