Näin teet faviconin
Koot, muodot ja koodi, joita tarvitset faviconiin, joka näkyy kaikkialla.
Favicon on pieni kuvake selaimen välilehdellä, kirjanmerkeissä ja sivustosi vieressä Googlen mobiilihakutuloksissa. Puuttuva favicon saa sivuston näyttämään keskeneräiseltä, ja sumea näyttää vielä pahemmalta. Hyvän tekeminen vie muutaman minuutin.
Aloita oikeasta kuvasta
Favicon näytetään jopa 16 × 16 pikselin kokoisena, joten koko logo tekstiosineen on lukukelvoton. Käytä yksinkertaista tunnusta: logosi symbolia, yhtä alkukirjainta tai voimakasta muotoa brändivärissäsi. Testaa se pienentämällä se ruudulla neljäsosaan: jos tunnistat yhä, mikä se on, se toimii.
Aloita neliön muotoisesta kuvasta, joka on vähintään 512 × 512 pikseliä, mieluiten PNG läpinäkyvällä taustalla. Jos logosi ei ole neliö, rajaa se neliöksi kuvasuhde lukittuna 1:1:een.
Tarvittavat tiedostot
| Tiedosto | Koko | Käyttäjä |
|---|---|---|
| favicon.ico | Sisältää 16, 32 ja 48 pikselin versiot | Selaimet, vanhemmat järjestelmät, oletuspyyntö osoitteeseen /favicon.ico |
| PNG-kuvake | 32 × 32 ja 192 × 192 | Nykyaikaiset selaimet, Androidin aloitusnäytöt |
| apple-touch-icon.png | 180 × 180 | iPhonen ja iPadin aloitusnäytön kirjanmerkit |
Google-haku käyttää faviconiasi myös hakutuloksissa. Sen on oltava vähintään 48 × 48 pikselin neliö, ja hakurobotin on päästävä siihen sivustollasi.
ICO-tiedoston tekeminen
Pudota neliön muotoinen PNG-kuvasi PNG ICO:ksi -muuntimeen. Se tuottaa aidon .ico-tiedoston, joka sisältää selainten pyytämät pienet koot. PNG-versioita varten muuta saman neliökuvan koko 180, 192 ja 32 pikseliin.
Lisääminen sivustollesi
Lähetä favicon.ico sivustosi juurikansioon, jotta se löytyy osoitteesta omasivusto.fi/favicon.ico, ja lisää nämä rivit sivujesi head-osioon:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/fi/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/fi/apple-touch-icon.png">
WordPressissä mene kohtaan Ulkoasu, Mukauta, Sivuston identiteetti ja lähetä neliökuva sivuston kuvakkeeksi. WordPress luo koot puolestasi. Shopifyssa, Wixissä ja Squarespacessa on kaikissa favicon-asetus sivuston tai teeman asetuksissa.
Kun uusi favicon ei näy
Selaimet pitävät faviconeja itsepintaisesti välimuistissa. Avaa sivusto yksityisessä ikkunassa tai käy suoraan osoitteessa omasivusto.fi/favicon.ico ja päivitä sivu. Googlella voi kestää päiviä tai viikkoja päivittää kuvake hakutuloksiin sen jälkeen, kun se on indeksoinut etusivusi uudelleen.
Yleiset virheet
- Koko logon käyttäminen pienellä tekstillä, joka muuttuu 16 pikselissä tahraksi.
- Valkoinen kuvake läpinäkyvällä taustalla, joka katoaa vaaleille selaimen välilehdille.
- Pelkän pienen 16 pikselin tiedoston tarjoaminen, joka näyttää sumealta tarkoilla näytöillä.
- Tiedoston unohtaminen osoitteesta /favicon.ico, jota jotkin selaimet ja hakurobotit pyytävät riippumatta siitä, mitä sivulla lukee.