Favicon-muodot selitettynä: ICO, PNG, SVG ja mitä selaimet tarvitsevat

Miksi faviconit ovat yhä oudon monimutkaisia

Favicon näyttää yhdeltä pieneltä kuvalta, mutta se sijaitsee selaimen käyttöliittymän, kirjanmerkkien, välilehtien, kiinnitettyjen pikakuvakkeiden, hakutulosten, mobiilin aloitusnäyttöjen ja progressiivisten verkkosovellusasennusten risteyskohdassa. Jokaisella kontekstilla on hieman erilaiset odotukset.

Siksi favicon-neuvot tuntuvat usein sekavilta. Jotkin tiimit toimittavat vain yhden favicon.ico-tiedoston, koska se ennen riitti. Toiset generoivat tusinan tiedostoja tietämättä, mitä niistä oikeasti käytetään. Järkevä keskitie on pienempi: ymmärrä, missä ICO, PNG ja SVG kukin toimivat hyvin, ja toimita sitten kompakti kokonaisuus, joka kattaa nykyiset selaimet ja yleiset laitekontekstit.

Faviconit eivät ole paikka esitellä kuvaputkea. Ne ovat paikka olla tylsä, täsmällinen ja yhteensopiva.

ICO: vanha muoto, joka kieltäytyy kuolemasta

ICO on klassinen Windowsin ikonien säiliömuoto. Se voi sisältää useita bittikarttakuvia eri koissa, tavallisesti 16×16, 32×32 ja 48×48 pikseliä. Tällä on merkitystä, koska favicon voidaan näyttää hyvin pienenä selaimen välilehdessä, suurempana kirjanmerkkiluettelossa ja taas eri tavalla Windowsin pikakuvakkeissa.

Tärkeä yksityiskohta on, että ICO on säiliö, ei pelkästään yksi kuva. Hyvä favicon.ico sisältää yleensä useita rasterikokoja, jotta selain tai käyttöjärjestelmä voi valita lähimmän vastaavuuden sen sijaan, että se skaalaa yhtä pientä bittikarttaa.

ICO on edelleen hyödyllinen kolmesta syystä:

• Selaimet voivat pyytää /favicon.ico-tiedostoa automaattisesti, vaikka et linkittäisi sitä HTML:ssä.
• Jotkin vanhemmat selaimet ja integraatiot odottavat sitä.
• Se on turvallinen varavaihtoehto, kun uudemmat ikonimääritykset ohitetaan.

Tämä ei tarkoita, että ICO:n pitäisi olla ainoa ikonisi. Sitä on hankala muokata, se ei ole erityisen ystävällinen nykyaikaisille työnkuluille, ja se on huono brändimerkin totuuden lähteeksi. Käsittele sitä yhteensopivuuden varavaihtoehtona.

Käytännössä sijoita oikea /favicon.ico sivuston juureen. Älä palauta siellä 404-virhettä, ellet nauti meluisista lokeista ja tarpeettomista selaimen uudelleenyrityksistä.

PNG: luotettava työjuhta

PNG on edelleen ennustettavin rasterimuoto faviconeille ja kosketusikoneille. Se tukee läpinäkyvyyttä, sillä on laaja tuki, ja se käyttäytyy johdonmukaisesti selaimissa ja alustoilla.

Faviconeissa PNG on hyödyllinen, kun haluat täsmällisiä pikselikokoisia ikoneita, kuten 32×32 tai 48×48. Mobiilin aloitusnäytön ikoneissa PNG on joissakin ympäristöissä käytännössä pakollinen. Esimerkiksi Apple touch icon -ikonit perustuvat normaalissa tuotantokäytössä PNG:hen.

Muutama käytännön sääntö auttaa:

• Vie vektorilähteestä, älä valmiiksi pienestä bittikartasta.
• Tee ikonista luettava 16×16-koossa ennen kuin välität suuremmista koista.
• Lisää riittävästi sisämarginaalia, jotta merkki ei tunnu leikkautuvan pyöristetyissä tai maskatuissa konteksteissa.
• Vältä pientä tekstiä, ohuita viivoja ja yksityiskohtaisia kuvituksia.

PNG-pakkausta ei yleensä kannata murehtia liikaa faviconeissa, koska tiedostot ovat pieniä. Älä silti toimita 500 KB:n kosketusikonia vain siksi, että se tuli suoraan design-viennistä. Jos tarkastelet jo laajempia kuvavalintoja, sama kurinalainen ajattelu kuin nykyaikaisen webin kuvamuotopäätöksissä pätee myös tähän: valitse muoto tehtävän mukaan, älä siksi, että se on muodikas.

SVG: moderni ja joustava vaihtoehto

SVG-faviconit ovat houkuttelevia, koska ne ovat resoluutiosta riippumattomia. Yksi pieni tiedosto voi piirtyä terävästi monessa koossa, ja sitä voi muokata suoraan koodissa tai viedä suunnitteluohjelmistosta.

Nykyaikaiset Chromium-, Firefox- ja Safari-versiot tukevat SVG-faviconeja. Se tekee SVG:stä hyvän ensisijaisen favicon-muodon monille sivustoille, erityisesti kun ikoni on yksinkertainen logo, merkki tai geometrinen tunnus.

SVG-faviconeihin liittyy kuitenkin varauksia.

Ensinnäkin SVG:n pitäisi olla omavarainen. Älä nojaa ulkoisiin fontteihin, etäkuviin tai skripteihin. Selaimet soveltavat rajoituksia SVG:hen, jota käytetään kuvana, ja vaikka jokin toimisi yhdessä selaimessa, se voi epäonnistua toisessa.

Toiseksi pidä se visuaalisesti yksinkertaisena. SVG ei ratkaise 16 pikselin ongelmaa maagisesti. Yksityiskohtainen vektorikuvitus on edelleen sumea, kun se puristetaan välilehteen.

Kolmanneksi ole varovainen dynaamisen tyylityksen kanssa. Jotkin tiimit käyttävät prefers-color-scheme-määritystä SVG-faviconin sisällä, jotta ikoni mukautuu selaimen tummiin ja vaaleisiin teemoihin. Tämä voi toimia, mutta selainten käyttäytyminen ja välimuisti voivat olla epätasaisia. Jos brändin tunnistettavuus on tärkeää, yksi vakaa ikoni voittaa usein nokkelan mukautuvan ikoniratkaisun.

SVG on hyvä lähde ja hyvä moderni toimitusmuoto. Se ei ole syy jättää varatiedostoja pois.

Mitä selaimet oikeasti etsivät

Selaimet löytävät faviconit kahdella päätavalla: eksplisiittisillä HTML-linkeillä ja implisiittisillä juuripyynnöillä.

Implisiittinen käyttäytyminen on vanha tapa: jos selain haluaa ikonin eikä ole löytänyt sellaista, se voi pyytää /favicon.ico-tiedostoa. Siksi juuren ICO-tiedosto on yhä hyödyllinen myös nykyaikaisilla sivustoilla.

Eksplisiittinen käyttäytyminen käyttää dokumentin head-osan <link>-elementtejä. Kompakti nykyaikainen toteutus näyttää tältä:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Manifesti voi sen jälkeen osoittaa suurempiin PNG-ikoneihin, joita käytetään asennettavissa verkkosovelluksissa:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Tämä ei ole ainoa kelvollinen toteutus, mutta se on hyvä perustaso. Se antaa nykyaikaisille selaimille SVG:n, tarjoaa tavanomaisen ICO-varavaihtoehdon, kattaa iOS:n aloitusnäytölle tallentamisen ja tukee sovellusten asennuskonteksteja.

Favicon-kokonaisuus, joka useimpien sivustojen kannattaa toimittaa

Tavalliselle markkinointisivustolle, dokumentaatiosivustolle, SaaS-sovellukselle tai julkaisulle tämä kokonaisuus riittää:

• /favicon.ico, joka sisältää 16×16 ja 32×32, valinnaisesti 48×48.
• /icon.svg modernina skaalautuvana faviconina.
• /apple-touch-icon.png koossa 180×180.
• /icon-192.png ja /icon-512.png, jos sinulla on verkkosovelluksen manifesti.

Voit lisätä lisää kokoja, jos jollakin alustalla on tietty vaatimus, mutta älä generoi kymmentä tiedostoa tottumuksesta. Jokainen lisätiedosto on vielä yksi asia välimuistiin tallennettavaksi, unohdettavaksi, väärin nimettäväksi tai jätettäväksi vanhentuneeksi brändiuudistuksen jälkeen.

Jos sivustosi ei ole asennettava eikä sillä ole manifestia, et ehkä tarvitse 192 ja 512 pikselin ikoneita. Jos sivustosi käyttäytyy kuin sovellus, tarvitset niitä luultavasti.

Yleiset vikatilanteet

Yleisimmät favicon-virheet eivät ole taiteellisia. Ne ovat toimitusongelmia.

Yksi niistä on aggressiivinen välimuisti. Selaimet pitävät faviconeista sitkeästi kiinni. Testauksen aikana muuttunut ikoni ei ehkä näy ennen kuin teet pakotetun päivityksen, tyhjennät sivuston tiedot, käytät uutta tiedostonimeä tai testaat tuoreessa profiilissa. Tuotannon brändiuudistuksissa /icon.svg?v=2-muutos voi auttaa HTML:ssä, mutta juuren /favicon.ico on hankalampi, koska selaimet pyytävät sitä suoraan. Tiedoston korvaaminen ja välimuistien umpeutumisen odottaminen on usein osa työtä.

Toinen yleinen ongelma on väärä MIME-tyyppi. SVG pitäisi tarjota tyyppinä image/svg+xml, PNG tyyppinä image/png ja ICO tavallisesti tyyppinä image/x-icon tai image/vnd.microsoft.icon. Monet selaimet ovat anteeksiantavia, mutta kaikki kontekstit eivät ole. Jos jokin epäonnistuu vain yhdessä selaimessa, tarkista verkkovastaus ennen kuin piirrät ikonin uudelleen. Samat tavat, joita käytetään uudelleenohjausten ja HTTP-otsakkeiden virheenkorjauksessa tuotannossa, pätevät tähänkin: katso todellista vastausta, älä sitä, mitä CMS väittää tarjoavansa.

Kolmas ongelma on suunnittelun tiheys. Logot, jotka toimivat kauniisti verkkosivuston otsakkeessa, epäonnistuvat usein faviconeina. Välilehden ikoni on armoton testi. Poista sanat, yksinkertaista muodot, lisää kontrastia ja testaa todellisissa koissa. Jos ikoni on merkityksellistä sisältöä sivun sisällä, saavutettavuuteen liittyvät asiat, kuten alt-teksti, ovat tärkeitä; itse faviconin kohdalla kyse on selaimen käyttöliittymän koristeesta, ei sivun sisällöstä. Erottelusta lisää käytännönläheisessä oppaassamme kuvien alt-tekstiin.

<!-- tool-cta:start -->

💡 Kokeile tätä: Luo nykyaikaisten selainten odottamat ICO-, PNG- ja SVG-versiot yhdellä kertaa Ultimate Favicon Generator -työkalulla.

<!-- tool-cta:end -->

Yksinkertainen toteutuksen tarkistuslista

Käytä tätä tarkistuslistaa ennen julkaisua:

1. Aloita puhtaasta vektorimestarista.
2. Testaa merkki koossa 16×16 ja 32×32.
3. Vie omavarainen SVG-favicon.
4. Generoi monikokoinen ICO-varavaihtoehto.
5. Vie 180×180 Apple touch icon.
6. Lisää 192×192 ja 512×512 PNG:t, jos käytät manifestia.
7. Sijoita /favicon.ico sivuston juureen.
8. Varmista tilakoodit, MIME-tyypit ja välimuistiotsakkeet.
9. Testaa ainakin yhdessä Chromium-selaimessa, Firefoxissa ja Safarissa, jos yleisöösi kuuluu Apple-laitteiden käyttäjiä.

Faviconit ovat pieniä, mutta ne ovat myös hyvin näkyviä. Rikkinäinen favicon saa sivuston tuntumaan keskeneräiseltä. Hyvin tehty favicon katoaa käyttöliittymään, mikä on juuri sen tarkoitus.