Jinsi ya kutengeneza favicon
Ukubwa, miundo na msimbo unaohitaji kwa favicon inayoonekana kila mahali.
Favicon ni aikoni ndogo kwenye kichupo cha kivinjari, kwenye alamisho na kando ya tovuti yako kwenye matokeo ya utafutaji ya Google kwenye simu. Favicon inayokosekana inafanya tovuti ionekane haijakamilika, na yenye ukungu inaonekana vibaya zaidi. Kutengeneza nzuri kunachukua dakika chache.
Anza na mchoro sahihi
Favicon inaonyeshwa ndogo hadi pikseli 16 kwa 16, kwa hiyo nembo kamili yenye maandishi haitasomeka. Tumia alama rahisi: ishara kutoka nembo yako, herufi moja ya kwanza, au umbo zito kwa rangi ya chapa yako. Ijaribu kwa kuipunguza hadi robo ya ukubwa kwenye skrini: kama bado unaweza kutambua ni nini, itafanya kazi.
Anza na picha ya mraba ya angalau pikseli 512 kwa 512, ikiwezekana PNG yenye mandharinyuma yenye uwazi. Kama nembo yako si mraba, ikate kuwa mraba ukiwa umefunga uwiano kwenye 1:1.
Faili unazohitaji
| Faili | Ukubwa | Inatumiwa na |
|---|---|---|
| favicon.ico | Ina matoleo ya pikseli 16, 32 na 48 | Vivinjari, mifumo ya zamani, ombi la chaguo-msingi la /favicon.ico |
| Aikoni ya PNG | 32 kwa 32 na 192 kwa 192 | Vivinjari vya kisasa, skrini za mwanzo za Android |
| apple-touch-icon.png | 180 kwa 180 | Alamisho za skrini ya mwanzo za iPhone na iPad |
Google Search inatumia favicon yako kwenye matokeo pia. Inahitaji kuwa mraba wa angalau pikseli 48 kwa 48 na lazima iweze kufikiwa na kitambazaji kwenye tovuti yako.
Kutengeneza faili ya ICO
Dondosha PNG yako ya mraba kwenye kibadilishaji cha PNG kuwa ICO. Kinatoa faili halisi ya .ico yenye ukubwa mdogo ambao vivinjari vinaomba. Kwa matoleo ya PNG, badilisha ukubwa wa picha ile ile ya mraba hadi pikseli 180, 192 na 32.
Kuiongeza kwenye tovuti yako
Pakia favicon.ico kwenye folda kuu ya tovuti yako ili ipatikane kwenye tovutiyako.com/favicon.ico, na uongeze mistari hii ndani ya head ya kurasa zako:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/sw/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/sw/apple-touch-icon.png">
Kwenye WordPress, nenda Appearance, Customize, Site Identity na upakie picha ya mraba kama Site Icon; WordPress inatengeneza ukubwa kwa ajili yako. Shopify, Wix na Squarespace kila moja ina mpangilio wa favicon kwenye mipangilio ya tovuti au mandhari.
Favicon mpya isipoonekana
Vivinjari huhifadhi favicon kwa ukaidi. Fungua tovuti kwenye dirisha la faragha, au tembelea tovutiyako.com/favicon.ico moja kwa moja na uonyeshe upya. Google inaweza kuchukua siku au wiki kusasisha aikoni kwenye matokeo ya utafutaji, baada ya kutambaa tena ukurasa wako wa mwanzo.
Makosa ya kawaida
- Kutumia nembo kamili yenye maandishi madogo, inayogeuka kuwa doa kwa pikseli 16.
- Aikoni nyeupe juu ya mandharinyuma yenye uwazi, inayotoweka kwenye vichupo vya kivinjari vyenye mwanga.
- Kutoa faili ndogo ya pikseli 16 tu, inayoonekana na ukungu kwenye skrini zenye ubora wa juu.
- Kusahau faili kwenye /favicon.ico, ambayo baadhi ya vivinjari na vitambazaji huiomba bila kujali ukurasa unasema nini.