Kokių favicon dydžių reikia 2026 m.? Idealus rinkinys

2026 m. idealus favicon rinkinys yra toks: favicon.ico, kuriame yra 16, 32 ir 48 px vaizdai, 96x96 PNG (skirtas „Google“ paieškai), pasirenkamas SVG favicon, 180x180 apple-touch-icon.png ir 192x192 bei 512x512 PNG (kartu su maskable 512), deklaruoti žiniatinklio programos manifeste. „Windows“ plytelės ir senieji „Apple“ dydžiai reikalingi tik tuo atveju, jei turite palaikyti labai senus įrenginius. Toliau paaiškinama kodėl, pateikiama dydžių lentelė, paruoštas naudoti HTML ir dažniausios klaidos, kurių reikia vengti.

Anksčiau favicon situacija buvo chaotiška: kiekviena naršyklė ir operacinė sistema reikalavo savo dydžio, todėl atsirasdavo liūdnai pagarsėję 20 eilučių <head> blokai. Šiandien didžioji dalis to jau pasenusi. Šiuolaikinės naršyklės pačios pritaiko vieną gerą ikoną, iOS nori vieno dydžio, o „Android“ skaito manifestą. Šiame straipsnyje atskiriama tai, kas tikrai būtina, nuo to, kas tiesiog naudinga.

Trumpas atsakymas: idealus favicon failų rinkinys

• favicon.ico (16, 32, 48 px viename faile) svetainės šakniniame kataloge. Naršyklės, naujienų skaitytuvai ir daugelis įrankių vis dar automatiškai prašo /favicon.ico.
• favicon.svg (nebūtinas, bet rekomenduojamas) – ryškiam vaizdui bet kokiu dydžiu ir tamsiojo režimo palaikymui.
• PNG 16x16, 32x32 ir 96x96 kaip aiškios atsarginės versijos. 96 px versija padeda „Google“ paieškai, kuri reikalauja 48 px kartotinio.
• apple-touch-icon.png 180x180 dydžio, nepermatomas, be skaidrumo.
• 192x192 ir 512x512 PNG faile manifest.json bei maskable 512x512 ikona „Android“.
• theme-color meta žyma, skirta mobiliosios naršyklės sąsajai nuspalvinti.
• „Windows“ plytelės (70, 150, 310 px) su browserconfig.xml – tik senajai „Windows“ ir IE11 prisegtoms svetainėms.

Favicon dydžių lentelė: paskirtis, failų pavadinimai ir prioritetas

Naudokite šią lentelę kaip kontrolinį sąrašą. „Būtina“ reiškia, kad be to įprasta svetainė atrodys sugedusi ar nebaigta; „Rekomenduojama“ – aiškus kokybės pagerėjimas; „Nebūtina“ – siauras ar senas naudojimo atvejis.

favicon.ico: 16, 32 ir 48 px viename faile

ICO failas yra konteineris, kuriame laikomi keli rastriniai vaizdai. Geras favicon.ico turi 16x16, 32x32 ir 48x48 vaizdus, kad naršyklė ar operacinė sistema galėtų pasirinkti artimiausią. Padėkite jį savo domeno šakniniame kataloge (https://example.com/favicon.ico). Net jei jūsų HTML nurodo kitą vietą, daugelis robotų, RSS skaitytuvų ir senesnių naršyklių vis tiek prašo būtent šio URL, todėl jį turint žurnaluose nebus nereikalingų 404 klaidų.

Nekeiskite PNG plėtinio tiesiog į .ico. Dauguma naršyklių tai toleruoja, bet kai kurie įrankiai tokį failą atmeta, o jūs prarandate kelių skiriamųjų gebų privalumą. Eksportuokite tikrą ICO.

PNG favicon: 16, 32 ir 96 px

PNG nuorodos su aiškiu sizes leidžia naršyklei pasirinkti geriausią vaizdą neanalizuojant ICO. Praktiškai 32x32 tinka didelio tankio kortelėms, o 16x16 šiandien beveik nebereikalingas. 96x96 dydį verta pridėti, nes „Google“ paieška rodo favicon šalia rezultatų ir reikalauja kvadratinės ikonos, kurios dydis yra 48 px kartotinis (48x48, 96x96, 144x144 ir t. t.). 96 px failas „Google“ suteikia ryškesnį šaltinį nei 48 px, kai ji sumažina vaizdą mobiliesiems rezultatams.

Dizaino patarimas: ties 16 px smulkios detalės išnyksta. Naudokite drąsią, paprastą formą, didelį kontrastą ir mažai teksto arba visai jo nenaudokite. Savo ikoną galite koreguoti ir peržiūrėti MakeFav redaktoriuje prieš eksportuodami.

SVG favicon ir tamsusis režimas

SVG favicon yra vienas mažytis failas, išliekantis ryškus bet kokio tankio ekrane. Jį palaiko „Chromium“ pagrindu veikiančios naršyklės ir „Firefox“. „Safari“ palaikymas istoriškai buvo ribotas, todėl niekada nepasikliaukite vien SVG: palikite ICO ir PNG atsargines versijas.

Didžiausias privalumas – temos pritaikymas. Kadangi SVG gali turėti CSS, ikoną galite pritaikyti prie naudotojo spalvų schemos naudodami 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>

Atkreipkite dėmesį, kad medijos užklausa atspindi naršyklės ar operacinės sistemos temą, kurią naudoja kortelių juosta. Ji neseka jūsų svetainės temos perjungiklio.

Viena žinoma ypatybė: kai nurodyti ir ICO, ir SVG, „Chrome“ gali pasirinkti ICO. Jei ICO deklaruosite su sizes="32x32", o SVG nurodysite po jo, „Chrome“ teiks pirmenybę SVG, kaip parodyta toliau pateiktame kode.

Apple touch ikona: 180x180 ir senieji dydžiai

Kai naudotojas prideda jūsų svetainę į iOS ar iPadOS pagrindinį ekraną, „Safari“ naudoja apple-touch-icon. Šiandien pakanka vieno 180x180 px PNG: iOS jį sumažina senesniems įrenginiams ir iPad. Pavadinkite jį apple-touch-icon.png ir padėkite šakniniame kataloge; iOS net pagal numatytuosius nustatymus ieško šio failo, jei nėra link žymos.

„Apple“ ikonos taisyklės:

• Jokio skaidrumo. iOS skaidrius pikselius užpildo juoda spalva, todėl skaidrus logotipas dažnai virsta juoda dėme. Pridėkite vientisą fono spalvą.
• Jokių suapvalintų kampų. iOS taiko savo suapvalintą kaukę. Pateikite pilną kvadratą.
• Svarbų turinį laikykite atokiau nuo pačių kraštų, nes kampai nupjaunami.

Kada reikia senųjų dydžių (57, 72, 76, 114, 120, 144, 152, 167)? Tik jei palaikote iOS 6 ar senesnę versiją arba norite tikslios pikselių kontrolės kiekvienam įrenginiui, pavyzdžiui, „iPad Pro“ (167 px) ir „iPad“ (152 px). Beveik kiekvienai svetainei 2026 m. pakanka vieno 180x180 failo. Toliau pateiktame maksimalaus suderinamumo rinkinyje kelli dydžiai įtraukti pilnumo dėlei.

„Android“ ir PWA ikonos: 192, 512 ir maskable

„Chrome“ sistemoje „Android“ ir kitos PWA palaikančios naršyklės ikonas skaito iš žiniatinklio programos manifesto, o ne iš <link rel="icon">. Kad programą būtų galima įdiegti, reikia bent 192x192 ir 512x512 PNG. 192 px ikona naudojama pagrindiniame ekrane ir programų paleidimo meniu; 512 px ikona rodoma pradžios ekranuose ir diegimo languose.

Maskable ikonos ir saugioji zona

„Android“ adaptyviosios ikonos, priklausomai nuo įrenginio, gali būti apkarpomos į apskritimą, „squircle“ ar kitą formą. Maskable ikona sukurta taip, kad ją būtų galima saugiai apkirpti: svarbus turinys turi būti saugiojoje zonoje – centruotame apskritime, kurio skersmuo yra 80 % vaizdo (spindulys lygus 40 % kraštinės). 512x512 failui tai reiškia, kad logotipą reikia laikyti apie 410 px skersmens apskritime, o fono spalvą išplėsti iki visų keturių kraštų, kad po kaukės nematytųsi tarpų.

Maskable ikoną deklaruokite kaip atskirą įrašą su "purpose": "maskable". Venkite "any maskable" viename faile: kaukei reikalingi tarpai atrodo per maži, kai ikona rodoma be kaukės.

manifest.json pavyzdys

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

Pateikite failą kaip application/manifest+json (arba application/json) ir susiekite jį iš kiekvieno puslapio naudodami <link rel="manifest" href="/manifest.json">. Kai kurie projektai jį pavadina site.webmanifest; pavadinimas nesvarbus, svarbi nuoroda.

„Windows“ plytelės ir browserconfig.xml

„Windows 8.1“ ir „Windows 10“ leidžia naudotojams prisegti svetainę prie meniu Pradėti, o IE11 ir senasis „Edge“ plytelių vaizdus skaito iš browserconfig.xml. Įprasti dydžiai: 70x70 (maža), 150x150 (vidutinė), 310x150 (plati) ir 310x310 (didelė). „Chromium“ pagrindu veikiantis „Edge“ vietoj to naudoja manifestą ir įprastus favicon, todėl tai yra senoji funkcija. Įtraukite ją tik jei jūsų auditorijoje vis dar yra senesnių „Windows“ konfigūracijų, pavyzdžiui, įmonių aplinkose.

<?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: naršyklės sąsajos nuspalvinimas

Meta žyma theme-color nurodo mobiliosioms naršyklėms (ir kai kurioms darbalaukio) kokią spalvą naudoti adreso juostai ar pavadinimo juostai. Tai nėra favicon, bet ji priklauso tam pačiam prekės ženklo rinkiniui. Galite nurodyti atskiras reikšmes šviesiajam ir tamsiajam režimui:

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

Minimalus šiuolaikinis rinkinys ir maksimalus suderinamumas

Minimalus šiuolaikinis rinkinys (rekomenduojama daugumai svetainių)

Penki failai padengia daugiau nei 99 % realaus naudojimo: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) ir dvi manifesto ikonos (192 ir 512). Pridėkite 96x96 PNG, jei svarbus matomumas „Google“ paieškoje, ir maskable ikoną, jei kuriate 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">

Maksimalaus suderinamumo rinkinys

Rinkitės jį, kai aptarnaujate plačią ar įmonių auditoriją arba norite padengti kiekvieną įmanomą klientą. Jis prideda aiškius PNG dydžius, senuosius „Apple“ dydžius, „Windows“ plyteles ir temos spalvas.

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

Atkreipkite dėmesį į šakninius kelius, prasidedančius /. Jie veikia bet kokio gylio puslapyje, o tai atveda mus prie dažniausių klaidų.

Dažniausios favicon klaidos ir kaip jas ištaisyti

1. Neteisingi keliai

Nuoroda kaip href="favicon.ico" atskleidžiama pagal dabartinį URL, todėl ji veikia puslapyje /, bet nustoja veikti /blog/post/. Naudokite šakninius (/favicon.ico) arba absoliučius URL. Taip pat patikrinkite, ar failai tikrai egzistuoja: atidarykite kiekvieną URL tiesiogiai naršyklėje ir įsitikinkite, kad grąžinamas HTTP 200, o ne nukreipimas į 404 puslapį ar prisijungimo sieną.

2. Trūkstamas arba neteisingas sizes atributas

Be sizes naršyklės turi atsisiųsti ikonas, kad jas patikrintų, ir gali pasirinkti netinkamą. Visada nurodykite sizes PNG nuorodose ir įsitikinkite, kad jis atitinka tikruosius pikselių matmenis. Failas, pažymėtas 32x32, bet iš tikrųjų 64x64, sukelia nenuoseklius rezultatus.

3. Agresyvus kešavimas

Naršyklės favicon kešuoja ilgai, dažnai nepriklausomai nuo puslapio talpyklos. Pakeitus prekės ženklą sena ikona gali išlikti kelias dienas. Pakeiskite failo pavadinimą arba pridėkite versijos užklausos eilutę (/favicon.ico?v=2) ir atnaujinkite link žymas. Priverstinis perkrovimas dažnai neatnaujina kortelės ikonos; paprastai padeda tiesiogiai atidaryti ikonos URL ir ją perkrauti.

4. Nekvadratiniai vaizdai

Favicon turi būti kvadratinės. Stačiakampis logotipas išplečiamas, apkarpomas arba apjuosiamas juostomis nenuspėjamai. Sukurkite atskirą kvadratinį ženklą, pavyzdžiui, inicialą ar simbolį, užuot mažinę platų žodinį logotipą.

5. Skaidrios Apple touch ikonos tampa juodos

iOS skaidrumą užpildo juoda spalva. Suteikite 180x180 ikonai nepermatomą foną ir iš anksto nesuapvalinkite kampų.

6. Maskable ikonos be saugiosios zonos

Jei logotipas liečia maskable ikonos kraštus, „Android“ jį nupjaus. Laikykite jį centriniame 80 % apskritime ir visą drobę užpildykite fono spalva.

7. Ikonų blokavimas robotams

Jei robots.txt draudžia jūsų favicon kelią, „Google“ negali jo gauti ir paieškos rezultatuose rodys bendrinę gaublio ikoną. Taip pat atminkite, kad „Google“ reikia favicon tame pačiame pagrindiniame kompiuteryje kaip ir puslapis ir ji atnaujinama tik retkarčiais, todėl pakeitimai gali pasirodyti po kelių dienų ar savaičių.

8. Pamirštama manifesto nuoroda ar paskirtys

Nesusietas manifestas arba toks, kuriame nėra 192 ir 512 px ikonų, neleidžia „Chrome“ parodyti diegimo pasiūlymo. Patikrinkite jį naršyklės kūrėjo įrankiuose, skirtuke Application.

Sugeneruokite visą rinkinį vienu paspaudimu

Kurti keliolika failų rankiniu būdu vaizdų redaktoriuje, paskui konvertuoti į ICO ir rašyti manifestą yra varginanti ir klaidų kupina užduotis. MakeFav iš vieno vaizdo, teksto ar jaustuko sugeneruoja visus aukščiau minėtus failus: kelių dydžių favicon.ico, PNG, SVG, Apple touch ikoną, 192/512 PNG, maskable ikoną, „Windows“ plyteles, manifest.json ir browserconfig.xml, taip pat paruoštą įklijuoti HTML fragmentą – viską viename ZIP atsisiuntime. Foną, tarpus ir formą galite tiksliai sureguliuoti redaktoriuje, esamą svetainę patikrinti favicon tikrintuvu, o generavimą automatizuoti naudodami kūrėjų išteklius.

Diegimo kontrolinis sąrašas

1. Įkelkite visus failus į savo svetainės šakninį katalogą.
2. Įklijuokite HTML fragmentą į kiekvieno puslapio <head> (arba į bendrą maketą).
3. Įsitikinkite, kad keliai yra šakniniai ir grąžina HTTP 200.
4. Patikrinkite šviesųjį ir tamsųjį režimą, iOS pagrindinio ekrano įdiegimą ir „Android“ įdiegimą.
5. Paleiskite tikrintuvą, kad aptiktumėte trūkstamus ar nesutampančius dydžius.
6. Jei pakeitėte seną ikoną, apeikite talpyklas naudodami versijos eilutę.

Dažniausiai užduodami klausimai

Ar 2026 m. vis dar reikia favicon.ico?

Taip. Nors šiuolaikinės naršyklės priima PNG ir SVG, daugelis robotų, naujienų skaitytuvų, el. pašto klientų ir senesnių naršyklių vis dar tiesiogiai prašo /favicon.ico. Kelių dydžių ICO su 16, 32 ir 48 px vaizdais yra mažas failas, apsaugantis nuo trūkstamų ikonų ir 404 klaidų.

Kokio dydžio turi būti favicon „Google“ paieškai?

„Google“ reikalauja kvadratinio favicon, kurio dydis yra 48 px kartotinis, bent 48x48. 96x96 PNG yra saugus pasirinkimas, taip pat palaikomas SVG. „Google“ taip pat reikia, kad failą galėtų nuskaityti robotai, todėl neblokuokite jo faile robots.txt. Atnaujinimai gali pasirodyti po kelių dienų ar savaičių.

Ar 180x180 pakanka Apple touch ikonai?

Beveik visoms svetainėms – taip. iOS ir iPadOS sumažina 180x180 PNG visiems dabartiniams įrenginiams. Senesni dydžiai (nuo 57 iki 152 px) svarbūs tik labai senoms iOS versijoms. Nepamirškite naudoti nepermatomo fono, kad ikona netaptų juoda.

Kas yra maskable ikona ir ar jos man reikia?

Maskable ikona yra 512x512 PNG, sukurtas „Android“ adaptyviųjų ikonų formoms. Svarbus jos turinys telpa centre esančiame 80 % skersmens apskritime, o fonas užpildo visą kvadratą. Jos reikia tik jei siūlote įdiegiamą PWA, tačiau ji padaro ikoną natūralią, o ne įsistačiusią į baltą apskritimą.

Kodėl mano sena favicon vis dar rodoma, kai ją pakeičiau?

Naršyklės favicon kešuoja atskirai ir ilgai. Pervardykite failą arba pridėkite versijos užklausos eilutę, pvz., ?v=2, atnaujinkite link žymas, tada tiesiogiai atidarykite ikonos URL ir ją perkraukite. Paieškos sistemoms gali prireikti ilgiau savo kopijai atnaujinti.