Favicon-UX: mikä tekee faviconista erinomaisen

Erinomainen favicon on yksinkertainen, kontrastinen merkki, yleensä logomerkkisi tai yksi tai kaksi kirjainta, joka pysyy luettavana 16x16 pikselin koossa sekä vaaleilla että tummilla selaimen välilehdillä, sopii brändiisi ja muuttuu harvoin. Kaikki muu tässä oppaassa (pikselien kohdistus, väri, reunukset, läpinäkyvyys, tiedostokoko) palvelee näitä tavoitteita: tee sivustostasi välittömästi löydettävä kymmenien avointen välilehtien joukosta.

Favicon on pieni, mutta se näkyy monessa paikassa: selaimen välilehdissä, kirjanmerkkipalkeissa, historialistoissa, välilehtihaun valikossa, Googlen hakutuloksissa mobiilissa ja työpöydällä sekä puhelimen aloitusnäytöllä. Kun käyttäjällä on paljon välilehtiä auki, otsikko typistyy usein tyhjiin ja kuvake on ainoa jäljellä oleva vihje. Siksi se on todellinen navigointielementti, ei koriste.

1. Luettavuus 16x16-koossa

Perinteinen favicon-koko on 16x16 CSS-pikseliä. Tavallisella näytöllä se on kirjaimellisesti 256 pikseliä; 2x-retina-näytöllä selain valitsee samaan tilaan yleensä 32x32-kuvan. Kaiken suunnittelemasi on kestettävä tämä pienennys.

Pidä se yksinkertaisena

• Yksi muoto tai yksi tai kaksi kirjainta. Yksi lihavoitu kirjain, ympyrä ja symboli tai yksinkertainen geometrinen merkki toimii. Kolme kirjainta tai sana muuttuu sekavaksi kohinaksi.
• Yksi katseenvangitsija. Jos et pysty kuvaamaan kuvaketta viidellä sanalla, se on liian monimutkainen.
• Ei liukuvärejä, varjoja tai hienoja tekstuureja. Ne muuttuvat pienessä koossa epäselviksi tahroiksi.

Kohdista pikseliruudukkoon

16x16-koossa puolen pikselin verran ruudukosta poikkeava viiva pehmennetään kahdelle pikselirivillle, ja se näyttää harmaalta ja pehmeältä. Aseta reunat kokonaisten pikselien rajoille ja käytä parillisia leveyksiä, kun muoto on symmetrinen. Jos viet kuvan vektorityökalusta, ota pikseliin tarttuminen käyttöön tai tarkista pienennetty tulos ja korjaa se käsin.

Vältä ohuita viivoja

Alle 2 pikselin vahvuiset viivat 16x16-koossa (noin 12 prosenttia kuvakkeen leveydestä) katoavat tai vilkkuvat helposti koosta toiseen siirryttäessä. Paksunna viivoja, poista sisäiset yksityiskohdat ja yhdistä pienet raot. Lihavahko, tukeva glyfi on yleensä luettavampi kuin yksityiskohtaisen logon uskollinen pienoismalli.

Hienosäädä käsin

ICO- ja PNG-tiedostoissa ei ole fonttien tapaista hintausta, joten käsin tehtävä pikselimuokkaus on vastine sille: säädät yksittäisiä pikseleitä, jotta kaaret, vinoviivat ja sisätilat (kirjainten, kuten ”a” tai ”e”, aukot) pysyvät terävinä. Automaattinen pienennys on hyvä ensimmäinen luonnos, mutta muutama käsin asetettu pikseli ratkaisee usein, onko tuloksena möykky vai tunnistettava kirjain. MakeFavin pikselieditori on tehty tähän: avaa 16x16-kanvas, korjaa ongelmapikselit ja vie tiedosto.

2. Kontrasti vaaleilla ja tummilla välilehdillä

Selaimia käytetään nykyään yleisesti tummassa tilassa, ja monilla käyttäjillä välilehtipalkki poikkeaa sivun teemasta. Tummansininen kuvake läpinäkyvällä taustalla voi olla täydellinen valkoisella välilehdellä ja lähes näkymätön tummanharmaalla. Testaa aina molemmat.

Käytännön ratkaisuja

• Lisää taustamuoto. Brändivärinen kiinteä pyöristetty neliö tai ympyrä takaa, että merkillä on oma kontrastinsa välilehdestä riippumatta.
• Käytä ohutta ääriviivaa tai sädekehää. 1 pikselin vaaleampi reuna tumman glyfin ympärillä (tai päinvastoin) pitää siluetin näkyvissä kummassakin teemassa, mutta 16x16-koossa sen on pysyttävä terävänä, joten testaa se.
• Valitse keskisävyiset brändivärit. Värit kuten vahva sininen, oranssi, vihreä tai magenta toimivat tyypillisesti sekä valkoisella että lähes mustalla pinnalla. Hyvin vaalea keltainen ja hyvin tumma laivastonsininen ovat riskialttiita.
• Käytä mukautuvaa SVG-faviconia. SVG voi sisältää prefers-color-scheme-mediakyselyn, jolloin kuvake muuttuu järjestelmän teeman mukana.

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

Huomaa, että mediakysely kuvastaa käyttöjärjestelmän tai selaimen teemaa, jota välilehtipalkki yleensä seuraa, mutta ei aina. SVG-faviconien tuki vaihtelee myös: Chrome ja Firefox tukevat niitä, kun taas Safari on perinteisesti ollut jäljessä, joten pidä aina PNG- tai ICO-varatiedostot. Kiinteätaustainen ratkaisu on kestävin vaihtoehto, koska se ei tarvitse lainkaan teemalogiikkaa.

3. Tunnistettavuus ja brändin yhdenmukaisuus

Käytä logomerkkiä (symbolia tai monogrammia), älä koko logoa sanamerkkeineen. Teksti 16x16-kuvakkeen sisällä on lukukelvotonta, ja leveä vaakalogo neliöön kutistettuna jättää sinulle pienen kaistaleen keskelle.

• Jos brändilläsi on symboli, yksinkertaista se pieniä kokoja varten sen sijaan, että vain skaalaisit sen pienemmäksi. ”Favicon-versio”, jossa on vähemmän yksityiskohtia, on vakiintunut käytäntö.
• Jos brändisi on pelkkä sanamerkki, ota ensimmäinen kirjain tai tunnusomainen kirjainpari ja aseta se brändifontillasi lihavalla painolla.
• Pidä värit yhdenmukaisina logosi, sovelluskuvakkeesi ja somekuvien kanssa, jotta käyttäjä tunnistaa saman brändin kaikkialla.

Erottuvuus on yhtä tärkeää kuin uskollisuus alkuperäiselle. Katso välilehtiriviä: jos kolme muuta sivustoa käyttää myös sinistä ympyrää, omasi ei erotu. Erilainen muoto tai väri on hyödyllisempi kuin täydellisen uskollinen pienennös.

4. Väri: rajattu, kylläinen paletti

Näin vähillä pikseleillä jokainen ylimääräinen väri lisää sotkua. Tavoittele yhtä tai kahta väriä sekä korkeintaan valkoista tai mustaa. Kylläiset värit välittyvät pienessä koossa paremmin kuin pastellit, jotka sulautuvat helposti välilehden taustaan.

Lainaa hieman saavutettavuusajattelusta. WCAG vaatii vähintään 3:1-kontrastin merkityksellisille graafisille objekteille (onnistumiskriteeri 1.4.11, ei-tekstuaalinen kontrasti). Favicon ei virallisesti kuulu sen piiriin, koska se on selaimen käyttöliittymää eikä sivun sisältöä, mutta 3:1 glyfin ja sen taustan välillä sekä kuvakkeen ja välilehden välillä on järkevä tavoite. Vältä myös viestimästä mitään pelkällä sävyllä: saman kuvakkeen punainen ja vihreä versio ovat monille värisokeille erottamattomia, joten vaihtele muotoa tai lisää symboli.

5. Muoto, reunukset ja turva-alueet

Täytä neliö

Selaimen välilehdet näyttävät faviconin kiinteässä pienessä koossa, joten ylimääräinen marginaali vain pienentää merkkiäsi. Käytä tavallisissa välilehtikuvakkeissa suurinta osaa kanvaksesta ja jätä vain pikseli tai kaksi tyhjää tilaa, jotta merkki on mahdollisimman suuri.

Pyöristetty vai neliö?

Selaimet eivät yleensä rajaa välilehtien favicon-kuvakkeita, joten piirtämäsi muoto on se, minkä käyttäjät näkevät. Neliö, jossa on hieman pyöristetyt kulmat, näyttää siistiltä ja antaa yhtenäisen taustan; vapaamuotoinen glyfi tai läpinäkyvälle pohjalle asetettu ympyrä voi näyttää kevyemmältä ja erottuvammalta. Kumpikin käy. Valitse toinen ja pidä koko kuvakesarja yhdenmukaisena.

Apple touch -kuvakkeet

iOS lisää apple-touch-iconiin omat pyöristetyt kulmansa (tavallinen koko on 180x180). Toimita reunaan asti ulottuva neliö ilman valmiiksi pyöristettyjä kulmia, muuten kulmiin voi jäädä näkyviin tummia tai valkoisia kaistaleita.

Maskattavat kuvakkeet Androidille ja PWA-sovelluksille

Käyttöjärjestelmä rajaa maskattavat kuvakkeet ympyröiksi, squircle-muodoiksi tai muiksi muodoiksi. Pidä kaikki tärkeä sisältö turva-alueella: kuvakkeen keskellä olevan ympyrän sisällä, jonka säde on 40 prosenttia kuvakkeen leveydestä. Jatka taustaväriä aivan reunoihin asti, jotta mikä tahansa maski näyttää oikealta. Älä käytä tiukkaa, reunasta reunaan ulottuvaa välilehtifaviconia maskattavana kuvakkeena, koska maski leikkaa sen.

6. Läpinäkyvyys

Läpinäkyvyys sopii välilehtien favicon-kuvakkeisiin, ja sen ansiosta pelkästä glyfistä koostuva kuvake asettuu siististi minkä tahansa värisen välilehden päälle. Se on ongelma Apple touch -kuvakkeissa: iOS täyttää läpinäkyvät alueet yhtenäisellä värillä (tyypillisesti mustalla), mikä voi pilata suunnittelun. Anna apple-touch-iconille aina läpinäkymätön tausta brändivärissäsi. Sama pätee maskattaviin kuvakkeisiin ja useimpiin Androidin aloitusnäytön käyttötapauksiin, joissa läpinäkymätön tausta antaa ennustettavan lopputuloksen.

7. Vakaus: älä muuta sitä liian usein

Favicon rakentaa tunnistettavuutta toiston kautta. Sen jatkuva vaihtaminen pakottaa käyttäjät opettelemaan uudelleen, mikä välilehti on sinun, ja aiheuttaa lisäksi teknisiä päänvaivoja. Selaimet tallentavat faviconit välimuistiin tehokkaasti, ja Google hakee ja tallentaa ne erillään sivuistasi, joten uuden kuvakkeen näkyminen hakutuloksissa voi kestää päiviä tai viikkoja. Google edellyttää myös vakaata favicon-URL-osoitetta, kuvaketta, jonka koko on 48 pikselin monikerta (48x48, 96x96 ja niin edelleen), sekä tiedostoa, jota se voi indeksoida (ei estetty robots.txt-tiedostossa). Käsittele favicon-muutosta brändiuudistuksen tason päätöksenä, ei kausikoristeena.

8. Ilmoitustilat ja dynaamiset faviconit

Jotkin verkkosovellukset muuttavat faviconia osoittaakseen lukemattomia viestejä, tallennuksen tilan tai virheen. Hyvin tehtynä se on hyödyllistä; liioiteltuna ärsyttävää.

• Käytä pientä merkkiä (pistettä tai lyhyttä lukua) kulmassa, älä täysin uutta ulkoasua. Peruskuvakkeen tulee pysyä tunnistettavana.
• Pidä se harvana. Varaa merkit tapahtumille, jotka vaativat käyttäjältä toimia. Älä animoi kuvaketta jatkuvasti.
• Rajoita numeroita. 16x16-koossa vain yksi tai kaksi numeroa on luettavissa; näytä ”9+” tai pelkkä piste luvun ”137” sijaan.
• Nollaa viipymättä, kun käyttäjä on käsitellyt asian, ja palauta oletuskuvake.
• Älä luota pelkkään väriin. Punaisen pisteen tueksi tulee olla myös sivun otsikko, kuten ”(3) Saapuneet”, jotta tieto on kaikkien saatavilla.

Dynaamiset faviconit piirretään yleensä kanvakselle ja vaihdetaan päivittämällä kuvakelinkkielementin href. Rajoita päivitysten tiheyttä, koska faviconin jatkuva muuttaminen voi kuluttaa suoritinta ja häiritä käyttäjiä.

9. Suorituskyky

Faviconit ovat pieniä, mutta ne ovat silti pyyntöjä, jotka voi toteuttaa huonosti.

• Pidä tiedostot pieninä. PNG-favicon on tyypillisesti muutamasta sadasta tavusta muutamaan kilotavuun. Yksinkertainen SVG voi olla alle 1 kt.
• Vältä turvonneita ICO-tiedostoja. Monikokoinen ICO, jossa on 16, 32 ja 48 pikselin kuvat, riittää. 256x256-kuvan sisällyttäminen moninkertaistaa tiedostokoon ilman näkyvää hyötyä selaimen välilehdissä.
• Aseta välimuistiotsikot. Tarjoa kuvakkeet pitkällä Cache-Control-voimassaoloajalla, esimerkiksi public, max-age=31536000, immutable, ja käytä versioitua tai tiivistettyä tiedostonimeä, kun muutat niitä.
• Määritä kuvakkeet eksplisiittisesti. Selaimet pyytävät oletuksena osoitetta /favicon.ico, joten tarjoa sellainen, vaikka määrittäisit muita kuvakkeita, jotta lokeihin ei kerry 404-kohinaa.
• Pakkaa. Aja PNG-tiedostot häviöttömän optimoijan läpi ja minimoi SVG-tiedostot.

<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='/manifest.webmanifest'>

Jos haluat luoda kaikki nämä tiedostot yhdestä lähdekuvasta, MakeFavin favicon-generaattori tuottaa vakiokokonaisuuden, ja kehittäjäsivu käsittelee integrointivaihtoehdot.

10. Saavutettavuus

Faviconilla ei ole alt-tekstiä, eivätkä ruudunlukijat lue sitä ääneen, joten perinteiset saavutettavuustyökalut, kuten alt-attribuutit, eivät päde. Tärkeää on seuraava:

• Sivun otsikko kantaa merkityksen. Kirjoita yksilölliset, kuvaavat <title>-elementit. Älä koskaan luota kuvakkeeseen tilan välittäjänä; peilaa kaikki merkit otsikossa.
• Näkyvyys heikkonäköisille käyttäjille. Korkea kontrasti, lihavoitu muoto ja suuri merkki auttavat käyttäjiä, jotka selaavat välilehtiä silmämääräisesti.
• Väristä riippumattomuus. Varmista, että tilat erottaa muodoista tai kirjaimista, ei pelkästä sävystä.
• Vähemmän häiriötä. Vältä vilkkuvia tai animoituja faviconeja, jotka voivat olla ongelma liikeherkille käyttäjille.

Favicon-UX:n tarkistuslista

Testauslista

Älä luota suunnittelutyökalusi suureen esikatseluun. Testaa todellinen kuvake todellisissa olosuhteissa:

1. Useat selaimet. Tarkista Chrome, Firefox, Safari ja Edge, sillä jokainen valitsee kuvakkeet ja koot hieman eri tavalla.
2. Vaalea ja tumma tila. Vaihda käyttöjärjestelmän ja selaimen teemaa ja katso välilehtipalkkia joka kerta.
3. Retina- ja tavalliset näytöt. Tarkista 1x-näytöllä ja 2x- tai 3x-näytöllä sekä zoomaa selaimessa.
4. Kirjanmerkkipalkki. Lisää sivu kirjanmerkkeihin ja katso, onko kuvake yhä luettavissa muiden sivustojen vieressä.
5. Monta välilehteä. Avaa 20 välilehteä ja katso, löydätkö omasi yhdellä silmäyksellä.
6. Googlen hakutulosten esikatselu. Tarkista mobiilihakutulos, kun kuvake on indeksoitu uudelleen. Muista, että päivittyminen voi kestää.
7. Aloitusnäyttö. Lisää sivusto iOS:n ja Androidin aloitusnäytöille ja varmista, ettei kuvaketta ole leikattu, siinä ei ole mustia kulmia eikä se ole liian pieni maskinsa sisällä.
8. Tekninen tarkistus. Aja verkkotunnuksesi MakeFavin favicon-tarkistimen läpi varmistaaksesi, että tiedostot ovat olemassa, palauttavat 200-tilan, niillä on oikeat koot ja ne on määritelty oikein HTML:ssäsi.

Käytännön työnkulku

1. Aloita logomerkistäsi ja yksinkertaista se yhdeksi muodoksi tai kirjaimeksi.
2. Luo neliönmuotoinen kanvas, jossa on kiinteä tai muotoiltu tausta, joka toimii molemmissa teemoissa.
3. Vie koot 32x32 ja 16x16 ja hienosäädä pieni versio käsin pikselieditorissa.
4. Luo koko kokonaisuus (ICO, PNG, apple-touch-icon, manifest-kuvakkeet) generaattorilla.
5. Lisää link-tagit, aseta välimuistiotsikot, julkaise ja varmista tarkistimella.

Favicon on yksi sivustosi pienimmistä resursseista ja yksi useimmin nähdyistä. Muutama harkittu päätös kontrastista, yksinkertaisuudesta ja yhdenmukaisuudesta saa sen toimimaan jokaisella välilehdellä, teemassa ja laitteella.

Usein kysytyt kysymykset

Minkä kokoinen faviconin pitäisi olla?

Suunnittele koot 16x16 ja 32x32 selaimen välilehtiä varten (selain käyttää 32x32-kokoa korkean tarkkuuden näytöillä), tarjoa 180x180-kokoinen apple-touch-icon iOS:lle sekä 192x192- ja 512x512-PNG-kuvat Androidille ja PWA-sovelluksille. Googlen hakutuloksiin käytä neliönmuotoista kuvaketta, jonka koko on 48 pikselin monikerta, kuten 48x48 tai 96x96. SVG-lähde skaalautuu kaikkiin näihin.

Pitäisikö käyttää koko logoa faviconina?

Yleensä ei. Sanamerkillä varustetut kokonaiset logot ovat liian yksityiskohtaisia ja liian leveitä neliönmuotoiselle 16x16-kuvakkeelle. Käytä logomerkkiä tai yhden tai kahden kirjaimen monogrammia ja yksinkertaista sitä, jotta se pysyy tunnistettavana pienenäkin.

Miten saan faviconin toimimaan tummassa tilassa?

Varminta on antaa kuvakkeelle oma kiinteä taustamuoto tai kontrastinen ääriviiva, jolloin se ei riipu välilehden väristä. Vaihtoehtoisesti käytä SVG-faviconia, jossa on prefers-color-scheme-mediakysely värien vaihtamiseen, ja pidä PNG- tai ICO-varatiedostot selaimille, jotka eivät tue SVG-kuvakkeita. Testaa aina sekä vaaleassa että tummassa teemassa.

Miksi uusi faviconini ei näy?

Selaimet tallentavat faviconit välimuistiin pitkäksi aikaa, ja Google säilyttää oman kopionsa, jonka se päivittää omalla aikataulullaan, usein päivissä tai viikoissa. Päivitä sivu kovalla uudelleenlatauksella, tyhjennä selaimen välimuisti, käytä uutta versioitua tiedostonimeä ja varmista, että link-tagit ja juuren /favicon.ico osoittavat oikeaan tiedostoon. Voit varmistaa asetukset MakeFav-tarkistimella.

Onko hyvä idea näyttää ilmoitusmerkkejä faviconissa?

Kyllä, jos niitä käytetään harkiten. Pieni piste tai yksi- tai kaksinumeroinen luku auttaa käyttäjiä huomaamaan, että jokin vaatii toimia, mutta jatkuva animaatio tai suuret luvut heikentävät luettavuutta ja huomiota. Peilaa tila aina sivun otsikossa, palauta oletuskuvake, kun asia on hoidettu, äläkä luota pelkkään väriin.