Favicon-kokoja etsiessä vastaan tulee yhä viidentoista tiedoston luetteloita vuodelta 2014. Nykyään kuusi kokoa riittää välilehtiin, hakutuloksiin, iOS:ään, Androidiin ja PWA-sovelluksiin. Tässä tarvittavat koot ja niiden tarkoitukset.
Luotavien kokojen taulukko
Jokainen rivi vastaa paketin dokumentoitua käyttötarkoitusta. Taulukko painottaa pientä yhteensopivaa kokonaisuutta vanhojen muunnelmien kokoelman sijaan.
| Tiedosto | Mitat | Käyttötarkoitus |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Välilehdet, kirjanmerkit, vanhat selaimet ja hakurobotit |
| favicon.svg | vektorikuva, neliö | Nykyselaimet, tarkka kaikissa koissa, tukee tummaa tilaa |
| favicon-96x96.png | 96×96 | Googlen mobiilihakutulokset |
| apple-touch-icon.png | 180×180 | iOS:n ja iPadOS:n aloitusnäyttö, ilman läpinäkyvyyttä |
| web-app-manifest-192x192.png | 192×192 | Androidin aloitusnäyttö, määritetty verkkomanifestissa |
| web-app-manifest-512x512.png | 512×512 | PWA-sovellusten käynnistysnäyttö, maskable-versio |
Miksi samassa .ico-tiedostossa on koot 16, 32 ja 48?
ICO on säiliömuoto: yksi tiedosto voi sisältää useita kuvia, joista selain valitsee näyttötilanteeseen sopivan. Tämä on juuri tarkoituksenmukaista, sillä tarvittava koko riippuu käyttötilanteesta.
16×16 sopii tavallisen näytön välilehteen. 32×32 tarjoaa vaihtoehdon suuren pikselitiheyden näytöille ja selaimen muille käyttöliittymille. 48×48 täydentää säiliön ja täyttää myös Googlen hakutulosten faviconille edellyttämän 48 pikselin monikerran.
Yleisin virhe on luoda .ico, jossa on vain 16×16-kuva: Retina-näytöllä kuvaketta suurennetaan ja se näyttää jatkuvasti sumealta.
180×180 iOS:lle, 192 ja 512 Androidille
iOS ei lue aloitusnäytön kuvaketta verkkomanifestista, vaan etsii apple-touch-icon-tunnisteen. Yksi 180×180-koko riittää kaikille uudehkoille iPhone- ja iPad-laitteille. Järjestelmä pienentää kuvan itse vanhemmille laitteille.
Android käyttää verkkomanifestia. Kaksi määritystä riittää: 192×192 aloitusnäytön kuvakkeelle ja 512×512 käynnistysnäytölle, kun sivusto asennetaan sovelluksena. Koon 512 versioon tulee määrittää purpose-arvoksi ”maskable”, eli se on suunniteltava kestämään rajaus ympyräksi tai pyöristetyksi neliöksi.
Pidä maskable-kuvakkeen tärkeä sisältö keskimmäisen 80 %:n sisällä. Sen ulkopuolinen osa voi rajautua pois puhelimen valmistajasta riippuen.
Millainen lähdekuva kannattaa valita?
Paras lähtökohta on SVG: sen voi muuttaa kaikkiin yllä mainittuihin kokoihin laadun heikkenemättä. Käytä muuten vähintään 512×512 pikselin neliömäistä PNG-kuvaa, jotta myös Androidin käynnistyskuvake syntyy pienentämällä eikä suurentamalla.
Vaakasuuntainen tekstiä sisältävä logo ei toimi koossa 16×16: sana muuttuu muutaman pikselin korkuiseksi sotkuksi. Irrota logosta symboli tai aloita yhdestä tai kahdesta kirjaimesta ja kontrastikkaasta taustasta.
Tarkista lopuksi kontrasti sekä vaalealla että tummalla taustalla: musta logo katoaa tumman teeman välilehdeltä. SVG-faviconin tumma versio ratkaisee juuri tämän ongelman.
Koot, joita et enää tarvitse
Vanhat generaattorit tuottavat edelleen tiedostoja vanhoihin integraatioihin, kuten Windows-ruutuihin tiedostoilla mstile-150x150.png ja browserconfig.xml. Lisää ne vain, jos tuettaviin ympäristöihisi kuuluvat nimenomaan nämä käyttöliittymät.
Pitkä sarja apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 ja 152x152 on ajalta, jolloin iOS ei osannut muuttaa kokoa. Yksi 180×180-kuva korvaa ne kaikki.
Tarpeettomien määritysten poistaminen yksinkertaistaa tietovarastoa ja HTML:ää. Tarkista kuitenkin omat kohdeselaimesi ja -alustasi ennen olemassa olevan integraation poistamista.
Alkuperäislähteet
Usein kysytyt kysymykset
Tarvitaanko favicon.ico edelleen?
Kyllä, mutta vain sivuston juuressa. Nykyselaimet suosivat SVG:tä, mutta monet robotit, sisällönkokoajat ja sähköpostiohjelmat pyytävät yhä /favicon.ico-tiedostoa lukematta HTML:ää. Tiedosto vie vain muutaman kilotavun, joten säilytä se.
Minkä kokoinen favicon sopii Google-hakutuloksiin?
Google edellyttää kuvaketta, jonka sivun pituus on 48 pikselin monikerta, ja näyttää sen yleensä koossa 48×48. 96×96 PNG tai SVG sopii tähän hyvin. Kuvakkeen on oltava robottien saatavilla, eikä robots.txt saa estää sitä.
Voiko favicon olla suorakulmainen?
Teknisesti kyllä, visuaalisesti ei. Kaikki näyttöpaikat varaavat neliön: suorakulmainen kuva joko vääristyy tai keskitetään tyhjien reunusten väliin. Aloita aina neliöstä ja lisää tarvittaessa marginaalit symbolin ympärille.