Mitä favicon-kokoja tarvitset vuonna 2026? Ihanteellinen kokonaisuus

Vuonna 2026 ihanteellinen favicon-kokonaisuus on: favicon.ico, jossa on 16, 32 ja 48 px:n kuvat, 96x96-kokoinen PNG (Google-hakua varten), valinnainen SVG-favicon, 180x180-kokoinen apple-touch-icon.png sekä 192x192- ja 512x512-kokoiset PNG-tiedostot (lisäksi maskable-versio 512-kuvakkeesta), jotka määritellään web app manifestissa. Windows-ruudut ja vanhat Apple-koot tarvitaan vain, jos sinun on tuettava hyvin vanhoja laitteita. Alla kerrotaan, miksi näin on, ja mukana ovat kokotaulukko, käyttövalmis HTML ja yleisimmät vältettävät virheet.

Favicon-maailma oli ennen sekavaa: jokainen selain ja käyttöjärjestelmä halusi oman kokonsa, mistä syntyivät surullisenkuuluisat 20-rivin <head>-lohkot. Nykyään suurin osa tästä on vanhentunutta. Nykyselaimet skaalaavat yhden hyvän kuvakkeen, iOS haluaa yhden koon ja Android lukee manifestin. Tämä artikkeli erottaa sen, mitä todella tarvitaan, siitä, mikä on vain kiva lisä.

Lyhyt vastaus: ihanteellinen favicon-tiedostojen kokonaisuus

• favicon.ico (16, 32 ja 48 px samassa tiedostossa) sivuston juuressa. Selaimet, syötteenlukijat ja monet työkalut pyytävät edelleen automaattisesti osoitetta /favicon.ico.
• favicon.svg (valinnainen mutta suositeltava) terävää piirtoa varten kaikissa koissa sekä tummaa tilaa varten.
• PNG 16x16, 32x32 ja 96x96 nimenomaisina varavaihtoehtoina. 96 px:n versio auttaa Google-haussa, joka vaatii 48 px:n monikerran.
• apple-touch-icon.png kokoa 180x180, peittävä, ilman läpinäkyvyyttä.
• 192x192- ja 512x512-PNG tiedostossa manifest.json sekä Androidia varten maskable 512x512 -kuvake.
• theme-color-meta-tunniste selaimen käyttöliittymän sävytykseen mobiilissa.
• Windows-ruudut (70, 150, 310 px) ja browserconfig.xml vain vanhoille Windows- ja IE11-kiinnitetyille sivustoille.

Favicon-kokotaulukko: käyttötarkoitus, tiedostonimet ja prioriteetti

Käytä tätä taulukkoa tarkistuslistana. ”Pakollinen” tarkoittaa, että tavallinen sivusto näyttää rikkinäiseltä tai keskeneräiseltä ilman sitä; ”Suositeltu” tarkoittaa selvää laatuparannusta; ”Valinnainen” tarkoittaa kapeaa tai vanhentunutta käyttöä.

favicon.ico: 16, 32 ja 48 px yhdessä tiedostossa

ICO-tiedosto on säiliö, joka sisältää useita bittikarttoja. Hyvä favicon.ico sisältää 16x16-, 32x32- ja 48x48-kuvat, jotta selain tai käyttöjärjestelmä voi valita lähimmän vastineen. Sijoita se verkkotunnuksesi juureen (https://example.com/favicon.ico). Vaikka HTML osoittaisi muualle, monet indeksoijat, RSS-lukijat ja vanhemmat selaimet pyytävät silti täsmälleen tätä osoitetta, joten tiedoston olemassaolo välttää 404-kohinan lokeissasi.

Älä nimeä PNG-tiedostoa uudelleen pääteeseen .ico. Useimmat selaimet sietävät sen, mutta jotkin työkalut hylkäävät sen ja menetät usean resoluution edun. Vie aito ICO.

PNG-faviconit: 16, 32 ja 96 px

PNG-linkit, joissa on selvä sizes-määritys, antavat selaimen valita parhaan bittikartan ilman ICO:n jäsentämistä. Käytännössä 32x32 kattaa korkean tarkkuuden välilehdet, ja 16x16 on nykyään lähes tarpeeton. 96x96-koko kannattaa lisätä, koska Google-haku näyttää faviconit tulosten vieressä ja vaatii neliönmuotoisen kuvakkeen, jonka koko on 48 px:n monikerta (48x48, 96x96, 144x144 ja niin edelleen). 96 px:n tiedosto antaa Googlelle terävämmän lähteen kuin 48 px:n, kun se pienentää kuvaa mobiilituloksia varten.

Suunnitteluvinkki: 16 px:n koossa hienot yksityiskohdat katoavat. Käytä lihavaa, yksinkertaista muotoa, vahvaa kontrastia ja vain vähän tekstiä tai ei lainkaan. Voit hienosäätää ja esikatsella kuvakettasi MakeFav-editorissa ennen vientiä.

SVG-favicon ja tumma tila

SVG-favicon on yksi pieni tiedosto, joka pysyy terävänä millä tahansa näytön tarkkuudella. Chromium-pohjaiset selaimet ja Firefox tukevat sitä. Safarin tuki on ollut historiallisesti rajallinen, joten älä koskaan luota pelkkään SVG:hen: pidä ICO- ja PNG-varavaihtoehdot.

Suurin etu on teemoitus. Koska SVG voi sisältää CSS:ää, voit mukauttaa kuvakkeen käyttäjän värimaailmaan prefers-color-scheme-asetuksella:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

Huomaa, että media-kysely heijastaa selaimen tai käyttöjärjestelmän teemaa, jota välilehtipalkki käyttää. Se ei seuraa oman verkkosivustosi teemanvaihtokytkintä.

Yksi tunnettu oikku: kun sekä ICO että SVG on listattu, Chrome saattaa valita ICO:n. Kun ICO määritellään arvolla sizes="32x32" ja SVG listataan sen jälkeen, Chrome valitsee mieluummin SVG:n, kuten alla olevassa koodissa näkyy.

Apple touch icon: 180x180 ja vanhat koot

Kun käyttäjä lisää sivustosi iOS:n tai iPadOS:n kotinäyttöön, Safari käyttää apple-touch-icon-kuvaketta. Nykyään yksi 180x180 px PNG riittää: iOS pienentää sen vanhempia laitteita ja iPadeja varten. Nimeä se apple-touch-icon.png ja sijoita juureen; iOS etsii tätä tiedostoa oletuksena, vaikka link-tunnistetta ei olisi.

Apple-kuvakkeen säännöt:

• Ei läpinäkyvyyttä. iOS täyttää läpinäkyvät pikselit mustalla, joten läpinäkyvä logo muuttuu usein mustaksi läikäksi. Lisää yhtenäinen taustaväri.
• Ei pyöristettyjä kulmia. iOS käyttää omaa pyöristysmaskiaan. Toimita täysi neliö.
• Pidä tärkeä sisältö poissa aivan reunoilta, koska kulmat leikkautuvat.

Milloin tarvitset vanhat koot (57, 72, 76, 114, 120, 144, 152, 167)? Vain jos tuet iOS 6:ta tai sitä vanhempaa tai haluat tarkan pikselikohtaisen hallinnan iPad Prolle (167 px) ja iPadille (152 px). Lähes jokaiselle sivustolle vuonna 2026 pelkkä 180x180-tiedosto riittää. Alla oleva maksimiyhteensopivuuden asetus sisältää muutaman täydellisyyden vuoksi.

Android- ja PWA-kuvakkeet: 192, 512 ja maskable

Chrome Androidilla ja muut PWA:ta tukevat selaimet lukevat kuvakkeet web app manifestista, eivät <link rel="icon">-tunnisteesta. Asennettavuutta varten tarvitset vähintään 192x192- ja 512x512-PNG:n. 192 px:n kuvaketta käytetään kotinäytössä ja sovelluskäynnistimessä; 512 px:n kuvake näkyy aloitusnäytöillä ja asennusikkunoissa.

Maskable-kuvakkeet ja turva-alue

Androidin mukautuvat kuvakkeet voidaan rajata ympyräksi, squircleksi tai muuksi muodoksi laitteesta riippuen. Maskable-kuvake on suunniteltu rajattavaksi turvallisesti: tärkeän sisällön on oltava turva-alueen sisällä, eli keskitetyn ympyrän, jonka halkaisija on 80 % kuvasta (säde on 40 % sivusta). 512x512-tiedostossa tämä tarkoittaa, että logo pidetään noin 410 px:n halkaisijaltaan olevan ympyrän sisällä ja taustaväri ulotetaan kaikille neljälle reunalle, jotta maskauksen jälkeen ei näy aukkoja.

Määrittele maskable-kuvake omana kohtanaan arvolla "purpose": "maskable". Vältä arvoa "any maskable" yhdessä tiedostossa: maskaukseen tarvittava reunus näyttää liian pieneltä, kun kuvake näytetään ilman maskia.

Esimerkki manifest.json

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

Tarjoa tiedosto tyypillä application/manifest+json (tai application/json) ja linkitä se jokaiselta sivulta tunnisteella <link rel="manifest" href="/manifest.json">. Jotkin projektit nimeävät sen site.webmanifest; nimellä ei ole väliä, linkillä on.

Windows-ruudut ja browserconfig.xml

Windows 8.1 ja 10 antavat käyttäjien kiinnittää sivuston Käynnistä-valikkoon, ja IE11 sekä vanha Edge lukevat ruutukuvat tiedostosta browserconfig.xml. Tavalliset koot ovat 70x70 (pieni), 150x150 (keskikokoinen), 310x150 (leveä) ja 310x310 (suuri). Chromium-pohjainen Edge käyttää sen sijaan manifestia ja tavallisia favicon-kuvakkeita, joten tämä on vanha ominaisuus. Sisällytä se vain, jos yleisöösi kuuluu edelleen vanhempia Windows-ympäristöjä, esimerkiksi yritysympäristöissä.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: selaimen käyttöliittymän sävytys

theme-color-meta-tunniste kertoo mobiiliselaimille (ja joillekin työpöytäselaimille), mitä väriä osoitepalkissa tai otsikkopalkissa käytetään. Se ei ole favicon, mutta kuuluu samaan brändikokonaisuuteen. Voit antaa erilliset arvot vaaleaa ja tummaa tilaa varten:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

Minimaalinen moderni asetus vs. maksimiyhteensopivuus

Minimaalinen moderni asetus (suositeltu useimmille sivustoille)

Viisi tiedostoa kattaa yli 99 % todellisesta käytöstä: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) ja kaksi manifest-kuvaketta (192 ja 512). Lisää 96x96-PNG, jos näkyvyys Google-haussa on tärkeää, ja maskable-kuvake, jos julkaiset PWA:n.

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

Maksimiyhteensopivuuden asetus

Valitse tämä, kun palvelet laajaa tai yritysyleisöä tai haluat kattaa kaikki mahdolliset asiakasohjelmat. Se lisää nimenomaiset PNG-koot, vanhat Apple-koot, Windows-ruudut ja teemavärit.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

Huomaa juuresta alkavat suhteelliset polut, jotka alkavat merkillä /. Ne toimivat millä tahansa sivusyvyydellä, mikä vie meidät yleisimpiin virheisiin.

Yleiset favicon-virheet ja niiden korjaaminen

1. Väärät polut

Linkki kuten href="favicon.ico" ratkeaa suhteessa nykyiseen URL-osoitteeseen, joten se toimii sivulla / mutta ei sivulla /blog/post/. Käytä juuresta alkavia (/favicon.ico) tai absoluuttisia URL-osoitteita. Tarkista myös, että tiedostot todella ovat olemassa: avaa jokainen URL suoraan selaimessa ja varmista, että se palauttaa HTTP 200:n eikä uudelleenohjausta 404-sivulle tai kirjautumismuuriin.

2. Puuttuva tai väärä sizes-attribuutti

Ilman sizes-määritystä selaimien on ladattava kuvakkeet tarkastaakseen ne, ja ne saattavat valita väärän. Määrittele sizes aina PNG-linkeille ja varmista, että se vastaa todellisia pikselimittoja. Tiedosto, jonka nimi on 32x32 mutta joka on todellisuudessa 64x64, aiheuttaa epäjohdonmukaisia tuloksia.

3. Aggressiivinen välimuisti

Selaimet tallentavat faviconit välimuistiin pitkäksi aikaa, usein sivun välimuistista riippumatta. Brändiuudistuksen jälkeen vanha kuvake voi viipyä päiviä. Vaihda tiedoston nimi tai lisää versiokyselymerkkijono (/favicon.ico?v=2) ja päivitä link-tunnisteet. Pakotetut uudelleenlataukset eivät usein päivitä välilehden kuvaketta; kuvakkeen URL:n avaaminen suoraan ja sen lataaminen uudelleen yleensä päivittää.

4. Ei-neliönmuotoiset kuvat

Faviconien on oltava neliönmuotoisia. Suorakulmainen logo venyy, rajautuu tai saa reunat arvaamattomasti. Suunnittele erillinen neliönmuotoinen tunnus, kuten alkukirjain tai symboli, sen sijaan että pienentäisit leveää sanalogoa.

5. Läpinäkyvät Apple touch -kuvakkeet muuttuvat mustiksi

iOS täyttää läpinäkyvyyden mustalla. Anna 180x180-kuvakkeelle peittävä tausta äläkä pyöristä kulmia valmiiksi.

6. Maskable-kuvakkeet ilman turva-aluetta

Jos logo koskettaa maskable-kuvakkeen reunoja, Android leikkaa sen pois. Pidä se keskimmäisen 80 %:n ympyrän sisällä ja täytä koko kanvas taustavärillä.

7. Kuvakkeiden estäminen indeksoijilta

Jos robots.txt kieltää favicon-polkusi, Google ei voi noutaa sitä ja näyttää hakutuloksissa yleisen maapallokuvakkeen. Muista myös, että Google tarvitsee faviconin samalta isännältä kuin sivu ja päivittää sen vain satunnaisesti, joten muutosten näkymiseen voi mennä päiviä tai viikkoja.

8. Manifest-linkin tai käyttötarkoitusten unohtaminen

Manifest, jota ei ole linkitetty tai josta puuttuvat 192 ja 512 px:n kuvakkeet, estää asennuskehotteen Chromessa. Validoi se selaimesi kehittäjätyökalujen Application-välilehdellä.

Luo koko kokonaisuus yhdellä napsautuksella

Tusinan tiedoston luominen käsin kuvankäsittelyohjelmassa, muuntaminen ICO:ksi ja manifestin kirjoittaminen on työlästä ja virhealtista. MakeFav luo kaikki yllä olevat tiedostot yhdestä kuvasta, tekstistä tai emojista: monikokoisen favicon.ico-tiedoston, PNG:t, SVG:n, Apple touch -kuvakkeen, 192/512-PNG:t, maskable-kuvakkeen, Windows-ruudut, manifest.json-tiedoston ja browserconfig.xml-tiedoston sekä valmiin liitettävän HTML-katkelman, kaikki yhtenä ZIP-latauksena. Voit hienosäätää taustaa, reunusta ja muotoa editorissa, tarkistaa olemassa olevan sivuston favicon-tarkistimella ja automatisoida luomisen kehittäjäresurssien avulla.

Käyttöönoton tarkistuslista

1. Lataa kaikki tiedostot sivustosi juureen.
2. Liitä HTML-katkelma jokaisen sivun <head>-osaan (tai yhteiseen pohjaasi).
3. Varmista, että polut alkavat juuresta ja palauttavat HTTP 200:n.
4. Tarkista vaalea ja tumma tila, iOS:n kotinäytön asennus ja Android-asennus.
5. Aja tarkistin puuttuvien tai epäsopivien kokojen löytämiseksi.
6. Ohita välimuistit versiomerkkijonolla, jos korvasit vanhan kuvakkeen.

Usein kysytyt kysymykset

Tarvitsenko favicon.ico-tiedostoa vielä vuonna 2026?

Kyllä. Vaikka nykyselaimet hyväksyvät PNG:n ja SVG:n, monet indeksoijat, syötteenlukijat, sähköpostiohjelmat ja vanhemmat selaimet pyytävät edelleen suoraan osoitetta /favicon.ico. Monikokoinen ICO, jossa on 16, 32 ja 48 px:n kuvat, on pieni tiedosto, joka estää puuttuvat kuvakkeet ja 404-virheet.

Minkä kokoinen faviconin pitäisi olla Google-haussa?

Google vaatii neliönmuotoisen faviconin, jonka koko on 48 px:n monikerta, vähintään 48x48. 96x96-PNG on turvallinen valinta, ja myös SVG on tuettu. Googlen on myös voitava indeksoida tiedosto, joten älä estä sitä robots.txt-tiedostossa. Päivitysten näkymiseen voi mennä päiviä tai viikkoja.

Riittääkö 180x180 Apple touch -kuvakkeeksi?

Lähes kaikille sivustoille kyllä. iOS ja iPadOS pienentävät 180x180-PNG:n jokaiselle nykyiselle laitteelle. Vanhemmilla koilla (57–152 px) on merkitystä vain hyvin vanhoille iOS-versioille. Muista käyttää peittävää taustaa, jotta kuvake ei muutu mustaksi.

Mikä on maskable-kuvake ja tarvitsenko sellaisen?

Maskable-kuvake on 512x512-PNG, joka on suunniteltu Androidin mukautuvien kuvakkeiden muotoja varten. Sen tärkeä sisältö on keskellä olevan 80 %:n halkaisijaltaan olevan ympyrän sisällä, ja tausta täyttää koko neliön. Tarvitset sen vain, jos tarjoat asennettavan PWA:n, mutta se saa kuvakkeen näyttämään natiivilta sen sijaan, että se istuisi valkoisessa ympyrässä.

Miksi vanha faviconini näkyy edelleen muutettuani sen?

Selaimet tallentavat faviconit välimuistiin erikseen ja pitkäksi aikaa. Nimeä tiedosto uudelleen tai lisää versiokyselymerkkijono, kuten ?v=2, päivitä link-tunnisteet ja avaa sitten kuvakkeen URL suoraan ja lataa se uudelleen. Hakukoneilta voi mennä pidempään oman kopionsa päivittämiseen.