Millised favicon'i suurused on 2026. aastal vaja? Ideaalne komplekt

2026. aastal on ideaalne favicon'i komplekt selline: favicon.ico, mis sisaldab 16, 32 ja 48 px pilte, 96x96 PNG (Google'i otsingu jaoks), valikuline SVG favicon, 180x180 apple-touch-icon.png ning 192x192 ja 512x512 PNG-d (lisaks maskable 512), mis on deklareeritud veebirakenduse manifestis. Windowsi paane ja vanu Apple'i suurusi on vaja ainult siis, kui pead toetama väga vanu seadmeid. Allpool selgitame, miks see nii on, ning anname suuruste tabeli, kasutusvalmis HTML-i ja levinud vead, mida vältida.

Favicon'ide maastik oli varem segane: iga brauser ja operatsioonisüsteem tahtis oma suurust, mille tulemuseks olid kurikuulsad 20-realised <head> plokid. Täna on suurem osa sellest vananenud. Kaasaegsed brauserid skaleerivad üht head ikooni, iOS tahab ühte suurust ja Android loeb manifesti. See artikkel eristab seda, mis on tõesti vajalik, sellest, mis on pelgalt tore lisa.

Lühivastus: ideaalne favicon'i failide komplekt

• favicon.ico (16, 32, 48 px ühes failis) saidi juurkataloogis. Brauserid, uudisvoolu lugejad ja paljud tööriistad küsivad /favicon.ico endiselt automaatselt.
• favicon.svg (valikuline, kuid soovitatav) terava kuvamise jaoks igas suuruses ja tumeda režiimi toe jaoks.
• PNG 16x16, 32x32 ja 96x96 selgesõnaliste varuvariantidena. 96 px versioon aitab Google'i otsingut, mis nõuab 48 px kordset.
• apple-touch-icon.png suuruses 180x180, läbipaistmatu, ilma läbipaistvuseta.
• 192x192 ja 512x512 PNG failis manifest.json, lisaks Androidi jaoks maskable 512x512 ikoon.
• theme-color meta-silt brauseri kasutajaliidese toonimiseks mobiilis.
• Windowsi paanid (70, 150, 310 px) koos browserconfig.xml failiga ainult vanade Windowsi ja IE11 külge kinnitatud saitide jaoks.

Favicon'i suuruste tabel: otstarve, failinimed ja prioriteet

Kasuta seda tabelit kontrollnimekirjana. „Kohustuslik“ tähendab, et tavaline sait näeb ilma selleta katkine või pooleli välja; „Soovituslik“ tähendab selget kvaliteedivõitu; „Valikuline“ tähendab nišši- või pärandkasutust.

favicon.ico: 16, 32 ja 48 px ühes failis

ICO-fail on konteiner, mis hoiab mitut bittrasterpilti. Hea favicon.ico sisaldab 16x16, 32x32 ja 48x48 pilte, et brauser või operatsioonisüsteem saaks valida lähima sobiva. Aseta see oma domeeni juurkataloogi (https://example.com/favicon.ico). Isegi kui sinu HTML viitab mujale, küsivad paljud roomikud, RSS-lugejad ja vanemad brauserid just seda täpset URL-i, seega väldid selle olemasoluga 404-müra oma logides.

Ära nimeta PNG-d lihtsalt ümber .ico-ks. Enamik brausereid sallib seda, kuid mõned tööriistad lükkavad selle tagasi ja sa kaotad mitme eraldusvõimega eelise. Ekspordi päris ICO.

PNG favicon'id: 16, 32 ja 96 px

PNG lingid selgesõnaliste sizes atribuutidega võimaldavad brauseril valida parima pildi ilma ICO-d parsimata. Praktikas katab 32x32 kõrge DPI-ga vahelehed ja 16x16 on tänapäeval peaaegu üleliigne. 96x96 suurust tasub lisada, sest Google'i otsing kuvab favicon'e tulemuste kõrval ja nõuab ruudukujulist ikooni, mille suurus on 48 px kordne (48x48, 96x96, 144x144 jne). 96 px fail annab Google'ile mobiilsete tulemuste jaoks vähendades teravama lähtematerjali kui 48 px fail.

Disainivihje: 16 px juures kaovad peened detailid. Kasuta julget, lihtsat kuju, suurt kontrasti ning vähe teksti või üldse mitte. Enne eksportimist saad oma ikooni kohandada ja eelvaadata MakeFav'i redaktoris.

SVG favicon ja tume režiim

SVG favicon on üks pisike fail, mis jääb terav igal ekraanitihedusel. Seda toetavad Chromiumil põhinevad brauserid ja Firefox. Safari tugi on ajalooliselt olnud piiratud, seega ära kunagi looda ainult SVG-le: hoia alles ICO ja PNG varuvariandid.

Suurim eelis on teemastamine. Kuna SVG võib sisaldada CSS-i, saad kohandada ikooni kasutaja värviskeemiga, kasutades prefers-color-scheme:

<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>

Pane tähele, et meediapäring peegeldab brauseri või operatsioonisüsteemi teemat, mida vahelehe riba kasutabki. See ei järgi sinu enda veebisaidi teemalülitit.

Üks tuntud veidrus: kui nii ICO kui SVG on loetletud, võib Chrome valida ICO. Kui deklareerid ICO atribuudiga sizes="32x32" ja loetled SVG-d pärast seda, eelistab Chrome SVG-d, nagu allolevas koodis näha.

Apple touch ikoon: 180x180 ja pärandsuurused

Kui kasutaja lisab sinu saidi iOS-i või iPadOS-i avaekraanile, kasutab Safari apple-touch-icon ikooni. Tänapäeval piisab ühest 180x180 px PNG-st: iOS vähendab seda vanemate seadmete ja iPadide jaoks. Nimeta see apple-touch-icon.png ja pane juurkataloogi; iOS otsib seda faili vaikimisi isegi siis, kui link-silti pole.

Apple'i ikooni reeglid:

• Ei mingit läbipaistvust. iOS täidab läbipaistvad pikslid mustaga, nii et läbipaistev logo muutub sageli mustaks plekiks. Lisa ühtlane taustavärv.
• Ei mingeid ümardatud nurki. iOS rakendab oma ümardatud maski. Anna täielik ruut.
• Hoia olulist sisu servadest eemal, kuna nurgad lõigatakse ära.

Millal on vaja pärandsuurusi (57, 72, 76, 114, 120, 144, 152, 167)? Ainult siis, kui toetad iOS 6 või vanemat või soovid täpset pikslikontrolli iga seadme jaoks iPad Pro (167 px) ja iPadi (152 px) puhul. Peaaegu iga saidi jaoks 2026. aastal piisab ainult 180x180 failist. Allolev maksimaalse ühilduvuse seadistus sisaldab täielikkuse mõttes mõnda.

Androidi ja PWA ikoonid: 192, 512 ja maskable

Chrome Androidis ja teised PWA-võimelised brauserid loevad ikoone veebirakenduse manifestist, mitte <link rel="icon"> kaudu. Paigaldatavuse jaoks on vaja vähemalt 192x192 ja 512x512 PNG-d. 192 px ikooni kasutatakse avaekraanil ja rakenduste käivitajas; 512 px ikoon ilmub käivituskuvadel ja paigaldusdialoogides.

Maskable ikoonid ja turvatsoon

Androidi kohanduvad ikoonid võidakse seadmest sõltuvalt lõigata ringiks, ümardatud ruuduks või muuks kujuks. Maskable ikoon on kujundatud nii, et seda saab ohutult lõigata: oluline sisu peab asuma turvatsoonis, mis on keskne ring läbimõõduga 80% pildist (raadius võrdub 40% küljepikkusest). 512x512 faili puhul tähendab see, et logo tuleb hoida umbes 410 px läbimõõduga ringi sees ning taustavärv tuleb laiendada kõigi nelja servani, et pärast maskimist ei jääks lünki.

Deklareeri maskable ikoon eraldi kirjena atribuudiga "purpose": "maskable". Väldi "any maskable" kasutamist ühel failil: maskimiseks vajalik polster näeb maskimata kuvamisel liiga väike välja.

Näide manifest.json failist

{
  "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"
    }
  ]
}

Serveeri fail tüübiga application/manifest+json (või application/json) ja lingi see igalt lehelt, kasutades <link rel="manifest" href="/manifest.json">. Mõned projektid nimetavad selle site.webmanifest; nimi pole oluline, oluline on link.

Windowsi paanid ja browserconfig.xml

Windows 8.1 ja 10 lasevad kasutajatel saidi Start-menüüsse kinnitada ning IE11 ja vana Edge loevad paanipilte failist browserconfig.xml. Tavalised suurused on 70x70 (väike), 150x150 (keskmine), 310x150 (lai) ja 310x310 (suur). Chromiumil põhinev Edge kasutab selle asemel manifesti ja tavalisi favicon'e, seega on see pärandfunktsioon. Lisa see ainult siis, kui sinu publiku hulgas on endiselt vanemaid Windowsi seadistusi, näiteks ettevõtete keskkondades.

<?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: brauseri kasutajaliidese toonimine

Meta-silt theme-color ütleb mobiilibrauseritele (ja mõnedele lauaarvuti brauseritele), millist värvi aadressiriba või tiitliriba jaoks kasutada. See ei ole favicon, kuid kuulub samasse brändikomplekti. Heleda ja tumeda režiimi jaoks saad anda eraldi väärtused:

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

Minimaalne kaasaegne seadistus vs maksimaalne ühilduvus

Minimaalne kaasaegne seadistus (soovitatav enamikule saitidest)

Viis faili katavad üle 99% päriselust kasutusest: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) ja kaks manifesti ikooni (192 ja 512). Lisa 96x96 PNG, kui Google'i otsingus nähtavus on oluline, ning maskable ikoon, kui avaldad PWA.

<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">

Maksimaalse ühilduvuse seadistus

Vali see, kui teenindad laia või ettevõtte publikut või soovid katta kõik võimalikud kliendid. See lisab selgesõnalised PNG suurused, Apple'i pärandsuurused, Windowsi paanid ja teemavärvid.

<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>

Pane tähele juurkataloogi suhtelisi teid, mis algavad märgiga /. Need töötavad igal lehe sügavusel, mis toob meid kõige levinumate vigade juurde.

Levinud favicon'i vead ja nende parandamine

1. Valed teed

Selline link nagu href="favicon.ico" lahendatakse praeguse URL-i suhtes, nii et see töötab aadressil /, kuid ei tööta aadressil /blog/post/. Kasuta juurkataloogi suhtelisi (/favicon.ico) või absoluutseid URL-e. Kontrolli ka, et failid tõesti eksisteerivad: ava iga URL otse brauseris ja veendu, et see tagastab HTTP 200, mitte ümbersuunamist 404-lehele või sisselogimismüürile.

2. Puuduv või vale sizes atribuut

Ilma sizes atribuudita peavad brauserid ikoonide kontrollimiseks need alla laadima ja võivad valida vale. Deklareeri alati PNG linkidel sizes ja veendu, et see vastab tegelikele pikslimõõtmetele. Fail, mis on märgitud 32x32, kuid on tegelikult 64x64, põhjustab ebajärjekindlaid tulemusi.

3. Agressiivne vahemällu salvestamine

Brauserid salvestavad favicon'e vahemällu pikaks ajaks, sageli lehe vahemälust sõltumatult. Pärast ümberbrändimist võib vana ikoon püsida päevi. Muuda failinime või lisa versiooni päringustring (/favicon.ico?v=2) ning uuenda link-silte. Kõva uuesti laadimine sageli vahelehe ikooni ei värskenda; ikooni URL-i otse avamine ja uuesti laadimine tavaliselt värskendab.

4. Mitteruudukujulised pildid

Favicon'id peavad olema ruudukujulised. Ristkülikukujuline logo venitatakse, lõigatakse või paigutatakse ettearvamatult musta äärisega. Kujunda spetsiaalne ruudukujuline märk, näiteks initsiaal või sümbol, selle asemel et vähendada laia sõnamärki.

5. Läbipaistvad Apple touch ikoonid muutuvad mustaks

iOS täidab läbipaistvuse mustaga. Anna 180x180 ikoonile läbipaistmatu taust ja ära ümarda nurki ette.

6. Maskable ikoonid ilma turvatsoonita

Kui logo puudutab maskable ikooni servi, lõikab Android selle ära. Hoia see keskse 80% ringi sees ja täida kogu lõuend taustavärviga.

7. Ikoonide blokeerimine roomikute eest

Kui robots.txt keelab sinu favicon'i tee, ei saa Google seda tuua ja näitab otsingutulemustes üldist gloobuse ikooni. Pea meeles ka, et Google vajab favicon'i samalt hostilt kui leht ja värskendab seda ainult aeg-ajalt, seega võivad muudatused ilmuda alles päevade või nädalate pärast.

8. Manifesti lingi või purpose väärtuste unustamine

Manifest, mida pole lingitud või millel puuduvad 192 ja 512 px ikoonid, takistab Chrome'is paigaldusviipa. Valideeri see oma brauseri arendaja tööriistades vahekaardil Application.

Loo kogu komplekt ühe klõpsuga

Tosina faili käsitsi loomine pildiredaktoris, seejärel ICO-ks teisendamine ja manifesti kirjutamine on tüütu ja vigadele altis. MakeFav genereerib kõik ülaltoodud failid ühest pildist, tekstist või emojist: mitme suurusega favicon.ico, PNG-d, SVG, Apple touch ikoon, 192/512 PNG-d, maskable ikoon, Windowsi paanid, manifest.json ja browserconfig.xml, lisaks kleebitav HTML-lõik, kõik ühes ZIP-allalaadimises. Taustat, polstrit ja kuju saad täpsustada redaktoris, olemasolevat saiti kontrollida favicon'i kontrollijaga ning genereerimist automatiseerida arendajate ressursside kaudu.

Kasutuselevõtu kontrollnimekiri

1. Laadi kõik failid üles oma saidi juurkataloogi.
2. Kleebi HTML-lõik iga lehe <head> sisse (või oma ühisesse malli).
3. Veendu, et teed on juurkataloogi suhtelised ja tagastavad HTTP 200.
4. Kontrolli heledat ja tumedat režiimi, iOS-i avaekraanile lisamist ning Androidi paigaldust.
5. Käivita kontrollija, et leida puuduvad või mittevastavad suurused.
6. Tühista vahemälud versioonistringiga, kui asendasid vana ikooni.

Korduma kippuvad küsimused

Kas ma vajan 2026. aastal endiselt favicon.ico faili?

Jah. Kuigi kaasaegsed brauserid aktsepteerivad PNG-d ja SVG-d, küsivad paljud roomikud, uudisvoolu lugejad, e-posti kliendid ja vanemad brauserid endiselt otse /favicon.ico. Mitme suurusega ICO 16, 32 ja 48 px piltidega on väike fail, mis hoiab ära puuduvad ikoonid ja 404 vead.

Mis suurusega peaks olema favicon Google'i otsingu jaoks?

Google nõuab ruudukujulist favicon'i, mille suurus on 48 px kordne, vähemalt 48x48. 96x96 PNG on turvaline valik ja SVG-d toetatakse samuti. Google vajab ka seda, et fail oleks roomatav, seega ära blokeeri seda failis robots.txt. Uuenduste ilmumine võib võtta päevi või nädalaid.

Kas 180x180 piisab Apple touch ikooniks?

Peaaegu kõigi saitide jaoks jah. iOS ja iPadOS vähendavad 180x180 PNG-d kõigi praeguste seadmete jaoks. Vanemad suurused (57 kuni 152 px) on olulised ainult väga vanade iOS-i versioonide puhul. Pea meeles kasutada läbipaistmatut tausta, et ikoon ei muutuks mustaks.

Mis on maskable ikoon ja kas ma vajan seda?

Maskable ikoon on 512x512 PNG, mis on kujundatud Androidi kohanduvate ikoonide kujude jaoks. Selle oluline sisu asub keskmises 80% läbimõõduga ringis ja taust täidab kogu ruudu. Seda on vaja ainult siis, kui pakud paigaldatavat PWA-d, kuid see paneb ikooni välja nägema natiivne, mitte istuma valges ringis.

Miks minu vana favicon näitab pärast muutmist endiselt?

Brauserid salvestavad favicon'e vahemällu eraldi ja pikaks ajaks. Nimeta fail ümber või lisa versiooni päringustring, näiteks ?v=2, uuenda link-silte ning ava seejärel ikooni URL otse ja laadi uuesti. Otsingumootoritel võib oma koopia värskendamine kauem aega võtta.