Mikä on favicon ja miksi se on tärkeä verkkosivustollesi?

Favicon (lyhenne sanoista ”favorite icon”, suosikkikuvake) on pieni neliön muotoinen kuva, joka edustaa verkkosivustoa selaimen välilehdissä, kirjanmerkeissä, historialistoissa, Googlen hakutuloksissa, puhelimen aloitusnäytöillä ja asennetuissa verkkosovelluksissa. Sillä on merkitystä, koska se antaa sivustollesi tunnistettavat kasvot yhdellä silmäyksellä, helpottaa sivuston löytämistä monien avointen välilehtien joukosta, viestii sivuston ammattimaisuudesta ja luotettavuudesta ja näkyy nykyään sivustosi nimen vieressä Googlen tuloksissa. Ilman sitä kävijät näkevät yleisen maapallon tai tyhjän sivun kuvakkeen, ja palvelimesi lokit täyttyvät 404-virheistä. Voit luoda täydellisen favicon-paketin ilmaiseksi MakeFavin favicon-generaattorilla.

Mikä on favicon?

Favicon on pieni brändätty grafiikka, tyypillisesti logon yksinkertaistettu versio tai yksittäinen kirjain tai symboli, jonka selaimet ja muut ohjelmat noutavat verkkosivustoltasi ja näyttävät aina, kun tarvitaan tiivis visuaalinen tunniste. Työpöytäselaimessa se piirretään yleensä 16 × 16 CSS-pikselin kokoisena, vaikka itse tiedoston tulisi olla suurempi, jotta kuvake pysyy terävänä korkean pikselitiheyden näytöillä.

Teknisesti favicon on vain kuvatiedosto, johon viitataan HTML:stä (tai joka löytyy oletussijainnista) ja jonka selaimet lataavat erikseen sivun sisällöstä. Nykyään ”favicon” on harvoin yksi tiedosto. Moderni sivusto toimittaa yleensä saman kuvakkeen useana versiona, jotta selaimet, hakukoneet, iOS ja Android saavat kukin sopivan formaatin ja koon.

Faviconin lyhyt historia

Favicon juontaa juurensa maaliskuuhun 1999, jolloin Microsoft julkaisi Internet Explorer 5:n. Selain antoi käyttäjien tallentaa sivuja ”Suosikit”-listaan, ja se etsi sivuston juuresta pientä kuvaketiedostoa nimeltä favicon.ico näytettäväksi jokaisen tallennetun kohteen vieressä. Ajatus oli yksinkertainen: jos sivusto tarjosi tiedoston /favicon.ico, kuvake ilmestyi kirjanmerkin viereen.

Muut selaimet omaksuivat ominaisuuden pian, ja välilehtiselaus teki siitä paljon hyödyllisemmän. Kun välilehdistä tuli ensisijainen tapa liikkua verkossa, favicon muuttui kirjanmerkin koristeesta keskeiseksi navigointiapuvälineeksi. Vuosien varrella toteutustapa kehittyi:

• 2000-luvun alku: <link rel="icon"> -elementti salli osoittaa kuvakkeeseen mistä tahansa URL-osoitteesta pelkän juuren sijaan, ja muut kuin IE-selaimet alkoivat hyväksyä PNG- ja GIF-tiedostoja.
• 2010-luku: Apple esitteli apple-touch-icon-kuvakkeen iOS:n aloitusnäytöille, ja Android ja Windows lisäsivät omat käytäntönsä, kuten manifest-kuvakkeet ja ruutukuvat.
• Nykyään: SVG-faviconit, web app manifestit, tummaa tilaa tukevat kuvakkeet ja Googlen hakutulosten favicon-vaatimukset ovat tehneet faviconista pienen mutta todellisen osan sivuston teknistä toteutusta.

Missä faviconit näkyvät nykyään

Faviconisi näkyy paljon useammassa paikassa kuin selaimen välilehdessä. Tärkeimmät ovat:

• Selaimen välilehdet: näkyvin paikka, jossa kuvake on usein ainoa asia, jonka näet, kun välilehtiä on auki paljon.
• Kirjanmerkit ja suosikit: kuvake on sivun otsikon vieressä kirjanmerkkipalkeissa ja valikoissa.
• Historia ja useimmin vierailut sivut: selaimet näyttävät faviconit historialistoissa ja uuden välilehden sivuilla.
• Googlen hakutulokset: sekä mobiilissa että työpöydällä Google näyttää sivuston faviconin sivuston nimen ja URL-osoitteen vieressä.
• Aloitusnäytöt: kun kävijä lisää sivustosi iOS:n tai Androidin aloitusnäytölle, touch-kuvakkeesta tai manifest-kuvakkeesta tulee sovellusmainen pikakuvake.
• Asennetut PWA:t: progressiivinen verkkosovellus käyttää web app manifestinsa kuvakkeita käynnistyskuvakkeena, aloitusruudussa ja sovelluksenvaihtimessa.
• Windowsin ruudut ja kiinnitetyt sivustot: vanhemmat Windows- ja Edge-versiot käyttivät kiinnitetyille sivustoille määriteltyjä ruutukuvia; nykyversiot käyttävät enimmäkseen tavallisia kuvakkeitasi uudelleen.
• Linkkien esikatselut joissakin sovelluksissa: tietyt viesti- ja tuottavuustyökalut (Slack on tunnettu esimerkki) näyttävät sivuston faviconin avatun linkin vieressä. Useimmat esikatselut perustuvat pääasiassa Open Graph -kuviin, mutta favicon tarjoaa usein pienen brändimerkin.

Miksi favicon on tärkeä verkkosivustollesi

Brändin tunnistettavuus

Ihmiset tunnistavat värejä ja muotoja nopeammin kuin lukevat tekstiä. Yhtenäinen kuvake, joka toistuu välilehdissä, kirjanmerkeissä ja hakutuloksissa, rakentaa tuttuutta joka kerta, kun joku sen näkee. Se on ilmaista brändinäkyvyyttä jokaisella käynnillä.

Luottamus ja uskottavuus

Puuttuva favicon saa sivuston näyttämään keskeneräiseltä. Siisti ja oikein piirtyvä kuvake on pieni merkki siitä, että joku välittää yksityiskohdista, mikä tukee käsitystä sivuston aitoudesta. Se ei ole tietoturvaominaisuus, ja kalasteluhuijaussivustot voivat kopioida kuvakkeita, mutta tyhjä oletuskuvake auttaa harvoin yritystä näyttämään vakiintuneelta.

Klikkausprosentti hakutuloksissa

Koska Google näyttää faviconin hakutuloksesi vieressä, siitä tulee osa sitä, miltä tuloksesi näyttää kilpailijoiden rinnalla. Google ei ilmoita faviconeilla olevan vaikutusta sijoituksiin, eikä sijoitusten nousua kannata odottaa. Hyöty liittyy visuaaliseen tunnistamiseen: käyttäjät, jotka tuntevat kuvakkeesi, huomaavat ja valitsevat tuloksesi todennäköisemmin, etenkin mobiilissa, jossa tulokset ovat tiiviitä.

Käytettävyys, kun välilehtiä on paljon auki

Kun selaimessa on kaksikymmentä välilehteä auki, otsikot typistyvät olemattomiin ja jäljelle jää vain favicon. Erottuva kuvake auttaa ihmisiä löytämään välilehtesi heti ja palaamaan siihen sen sijaan, että avaisivat kaksoiskappaleen tai unohtaisivat sen.

Ammattimainen vaikutelma

Huolella suunniteltu favicon osoittaa samaa tarkkuutta kuin muu sivustosi. Tuotesivuilla, dokumentaatiossa, blogeissa ja verkkosovelluksissa se on yksi halvimmista viimeistelyn keinoista.

Välilehtien löytämisen saavutettavuus

Kuvakkeet auttavat käyttäjiä, jotka silmäilevät visuaalisesti lukemisen sijaan, mukaan lukien lukihäiriöiset ja kognitiivisesti erilaiset ihmiset sekä kaikki, jotka vaihtavat nopeasti tehtävästä toiseen. Vahvasti kontrastinen ja yksinkertaisen muotoinen kuvake on helpompi poimia joukosta. Muista kuitenkin, että favicon on lisä: se ei korvaa selkeää sivun otsikkoa, jonka varassa ruudunlukijat ja apuvälineet toimivat.

Mitä tapahtuu, jos sinulla ei ole faviconia

Selaimet pyytävät automaattisesti tiedostoa /favicon.ico verkkotunnuksesi juuresta, vaikka HTML:ssäsi ei mainittaisi sellaista. Jos tiedostoa ei ole, tapahtuu useita asioita:

• Yleinen kuvake: kävijät näkevät välilehdessä ja kirjanmerkeissä oletuskuvakkeen, kuten maapallon, asiakirjan tai tyhjän kuvakkeen, mikä näyttää anonyymiltä.
• 404-virheitä lokeissasi: jokainen tiedostoa pyytävä selain tuottaa epäonnistuneen pyynnön. Kiireisillä sivustoilla tämä lisää kohinaa käyttölokeihin, virheseurantaan ja analytiikkaan ja voi kätkeä todellisia ongelmia.
• Ei kuvaketta Googlen tuloksissa: ilman kelvollista, indeksoitavaa faviconia Google näyttää tuloksesi vieressä oletuskuvakkeensa.
• Turhat pyynnöt: selaimet saattavat yrittää uudelleen, mikä lisää palvelimellesi pientä mutta turhaa kuormaa.

Jopa hyvin yksinkertainen kuvake on parempi kuin ei mitään, koska se poistaa 404-virheet ja antaa käyttäjille jotain tunnistettavaa.

Favicon-formaatit selitettyinä

Mikään yksittäinen formaatti ei kata kaikkia alustoja, joten useimmat sivustot käyttävät pientä joukkoa tiedostoja.

Vanhat Windowsin ruutukuvat (määritelty tiedostossa browserconfig.xml) olivat tarpeen Internet Explorer 11:lle ja vanhalle Edgelle. Ne ovat nykyään harvoin tarpeen, ellei näitä ympäristöjä tarvitse tukea.

Googlen favicon-ohjeet hakutuloksille

Jos haluat kuvakkeesi näkyvän Google-haussa, noudata Googlen julkaisemia vaatimuksia:

• Koko: kuvan on oltava neliö (1:1) ja sen sivun pituuden 48 pikselin monikerta, esimerkiksi 48x48, 96x96 tai 144x144. Google pienentää sen näyttöä varten kokoon 16x16. Pienin tuettu koko on 8x8, mutta suositus on 48x48 tai suurempi.
• Formaatit: mikä tahansa selaimien tukema formaatti käy, mukaan lukien ICO, PNG ja SVG.
• Vakaa URL: älä vaihda faviconin URL-osoitetta usein. Vakaa osoite auttaa Googlea pitämään kuvakkeesi ajan tasalla.
• Indeksoitavissa: sekä favicon-tiedoston että etusivusi on oltava Googlebotin saavutettavissa. Älä estä niitä tiedostossa robots.txt tai kirjautumisen taakse.
• Yksi määritys sivustoa kohti: kuvake on sidottu sivuston etusivuun, joten lisää <link>-tunniste etusivusi head-osioon.
• Edustava ja sopiva: kuvakkeen tulee heijastaa brändiäsi, ja Google voi korvata loukkaavan tai harhaanjohtavan kuvakkeen oletuskuvakkeellaan.

Kun olet julkaissut tai vaihtanut faviconin, Googlella voi kestää päiviä tai viikkoja indeksoida ja päivittää se uudelleen, joten älä odota välitöntä muutosta.

Näin luot faviconin nopeasti MakeFavilla

Et tarvitse suunnitteluohjelmia etkä komentoriviä. MakeFav-generaattori muuttaa yhden lähdekuvan edellä kuvatuiksi tiedostoiksi.

1. Valmistele kuvamateriaali. Käytä neliönmuotoista logoa tai symbolia, jonka koko on vähintään 512 x 512 px. Yksinkertaiset muodot toimivat parhaiten, koska kuvake nähdään 16 px:n koossa.
2. Lataa se MakeFavin etusivulla tai avaa editori säätääksesi kuvaa, taustaa ja reunusta ennen vientiä.
3. Esikatsele tulosta pienissä kokoluokissa sekä vaaleilla ja tummilla taustoilla varmistaaksesi, että se pysyy luettavana.
4. Lataa paketti. Se sisältää ICO-tiedoston, PNG-koot, Apple touch iconin, manifest-kuvakkeet ja liitettävän HTML-koodinpätkän.
5. Lataa tiedostot verkkosivustosi juureen, jotta ne ovat saavutettavissa poluista kuten /favicon.ico.
6. Lisää HTML jokaisen sivun <head>-osioon tai yhteiseen asetteluun tai pohjaan.
7. Tarkista favicon-tarkistimella, tyhjennä sitten selaimen välimuisti ja lataa sivu uudelleen nähdäksesi uuden kuvakkeen.

Esimerkki HTML-koodinpätkästä

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

ICO-linkin sizes="48x48"-attribuutti auttaa selaimia suosimaan SVG:tä, kun ne tukevat sitä, ja pitää ICO:n varavaihtoehtona. 96 px:n PNG täyttää Googlen 48:n monikerran säännön.

Esimerkki web app manifestista

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Jos työskentelet build-putkien kanssa tai haluat automatisoida kuvakkeiden luonnin, tutustu kehittäjäresursseihin.

Suunnitteluvinkkejä toimivaan faviconiin

• Pidä se yksinkertaisena. Yksi muoto, yksi kirjain tai rohkea monogrammi voittaa yksityiskohtaisen logon, joka muuttuu 16 px:n koossa sotkuksi.
• Käytä vahvaa kontrastia. Varmista, että kuvake näkyy sekä vaaleilla että tummilla selainteemoilla. Värillinen taustalaatta auttaa.
• Vältä tekstiä. Yksittäinen alkukirjain on hyvä; sanat eivät ole luettavissa tässä koossa.
• Jätä vähän reunusta maskable- ja pyöristetyille kuvakkeille, jotta mitään tärkeää ei leikkaudu pois.
• Pysy yhdenmukaisena logosi ja brändivärisi kanssa, jotta favicon vahvistaa tunnistettavuutta.
• Testaa oikeilla laitteilla ja tarkista, miltä se näyttää välilehdessä, kirjanmerkissä ja Googlen tuloksessa.

Yleisiä favicon-ongelmia

Jos kuvakkeesi ei näy, tavallisia syitä ovat välimuisti, väärät polut ja estetyt tiedostot. Selaimet tallentavat faviconeja välimuistiin voimakkaasti, joten pakotettu päivitys tai uusi yksityinen ikkuna riittää usein päivitysten näkemiseen. Tarkista, että tiedoston URL palauttaa tilakoodin 200 ja oikean sisältötyypin ja että <link>-tunniste on <head>-osiossa. Hakua varten varmista, ettei robots.txt estä kuvaketta tai etusivua. MakeFavin tarkistin auttaa huomaamaan nämä ongelmat nopeasti.

Usein kysytyt kysymykset

Mitä favicon tarkoittaa?

Favicon on lyhenne sanoista ”favorite icon”, suosikkikuvake. Nimi tulee Internet Explorer 5:stä, joka vuonna 1999 käytti ensimmäisenä pientä kuvaketiedostoa koristamaan selaimen Suosikit-listan kohteita. Termi jäi käyttöön, vaikka kuvake näkyy nykyään monissa muissakin paikoissa.

Auttaako favicon hakukoneoptimoinnissa?

Favicon ei ole suora sijoitustekijä. Se kuitenkin näkyy sivustosi nimen vieressä Googlen tuloksissa sekä mobiilissa että työpöydällä, joten se voi parantaa brändin tunnistettavuutta ja tuloksesi visuaalista vetovoimaa, mikä voi välillisesti tukea klikkauksia. Googlen ohjeiden noudattaminen tekee kuvakkeesta kelvollisen näytettäväksi.

Minkä kokoinen faviconin pitäisi olla?

Google-hakua varten käytä neliönmuotoista kuvaa, jonka sivun pituus on 48 pikselin monikerta, kuten 48x48 tai 96x96. Laajempaa kattavuutta varten tarjoa myös ICO-tiedosto, 180x180-kokoinen Apple touch icon sekä 192x192- ja 512x512-kokoiset manifest-kuvakkeet. SVG on hyvä lisä skaalautuvuuden vuoksi.

Tarvitsenko edelleen favicon.ico-tiedostoa, jos käytän PNG:tä tai SVG:tä?

Se on edelleen hyvä idea. Selaimet ja jotkin työkalut pyytävät oletuksena tiedostoa /favicon.ico, ja vanhempi ohjelmisto nojaa siihen. ICO-tiedoston pitäminen sivuston juuressa estää 404-virheet ja antaa turvallisen varavaihtoehdon, kun SVG tai PNG ei ole tuettu.

Miksi faviconini ei päivity?

Selaimet ja hakukoneet tallentavat faviconeja välimuistiin pitkäksi aikaa. Kokeile pakotettua päivitystä, yksityistä ikkunaa tai välimuistin tyhjentämistä. Varmista, että tiedostopolku on oikea ja uusi tiedosto tarjoillaan. Google-haussa muuttuneen kuvakkeen uudelleenindeksointi ja päivitys voi kestää päiviä tai viikkoja.