Kādi favicon izmēri ir vajadzīgi 2026. gadā? Ideālais komplekts

2026. gadā ideālais favicon komplekts ir šāds: favicon.ico ar 16, 32 un 48 px attēliem, 96x96 PNG (Google meklētājam), neobligāts SVG favicon, 180x180 apple-touch-icon.png un 192x192 un 512x512 PNG (kā arī maskable 512), kas norādīti tīmekļa lietotnes manifestā. Windows flīzes un vecie Apple izmēri ir vajadzīgi tikai tad, ja jāatbalsta ļoti vecas ierīces. Zemāk paskaidrots, kāpēc tā, kopā ar izmēru tabulu, gatavu HTML kodu un biežākajām kļūdām, no kurām izvairīties.

Favicon joma agrāk bija juceklīga: katra pārlūkprogramma un operētājsistēma prasīja savu izmēru, un rezultātā radās bēdīgi slavenie 20 rindiņu garie <head> bloki. Mūsdienās lielākā daļa no tā ir novecojusi. Modernie pārlūki mērogo vienu labu ikonu, iOS vēlas vienu izmēru, bet Android nolasa manifestu. Šis raksts nošķir to, kas tiešām vajadzīgs, no tā, kas ir tikai vēlams.

Īsā atbilde: ideālais favicon failu komplekts

• favicon.ico (16, 32, 48 px vienā failā) vietnes saknē. Pārlūki, plūsmu lasītāji un daudzi rīki joprojām automātiski pieprasa /favicon.ico.
• favicon.svg (neobligāts, bet ieteicams) asam attēlojumam jebkurā izmērā un tumšā režīma atbalstam.
• PNG 16x16, 32x32 un 96x96 kā skaidri norādīti rezerves varianti. 96 px versija palīdz Google meklētājam, kas pieprasa izmēru, kas dalās ar 48 px.
• apple-touch-icon.png izmērā 180x180, necaurspīdīga, bez caurspīdīguma.
• 192x192 un 512x512 PNG failā manifest.json, kā arī maskable 512x512 ikona Android ierīcēm.
• theme-color meta tags pārlūka saskarnes tonēšanai mobilajās ierīcēs.
• Windows flīzes (70, 150, 310 px) ar browserconfig.xml tikai vecajam Windows un IE11 piespraustajām vietnēm.

Favicon izmēru tabula: mērķis, failu nosaukumi un prioritāte

Izmanto šo tabulu kā kontrolsarakstu. “Obligāts” nozīmē, ka bez tā parasta vietne izskatīsies bojāta vai nepabeigta; “Ieteicams” nozīmē skaidru kvalitātes uzlabojumu; “Neobligāts” nozīmē nišas vai novecojušu izmantošanu.

favicon.ico: 16, 32 un 48 px vienā failā

ICO fails ir konteiners, kurā ir vairākas bitkartes. Labs favicon.ico ietver 16x16, 32x32 un 48x48 attēlus, lai pārlūks vai operētājsistēma varētu izvēlēties vistuvāko. Novieto to sava domēna saknē (https://example.com/favicon.ico). Pat ja tavs HTML norāda citur, daudzi rāpuļprogrammas, RSS lasītāji un vecāki pārlūki joprojām pieprasa tieši šo URL, tāpēc, ja fails ir, žurnālos nebūs liekas 404 kļūdu.

Nepārdēvē PNG par .ico. Lielākā daļa pārlūku to pieņem, bet daži rīki to noraida, un tu zaudē vairāku izšķirtspēju priekšrocību. Eksportē īstu ICO.

PNG favicon: 16, 32 un 96 px

PNG saites ar skaidri norādītu sizes ļauj pārlūkam izvēlēties labāko bitkarti, neanalizējot ICO. Praksē 32x32 aptver augsta blīvuma cilnes, un 16x16 mūsdienās ir gandrīz lieks. Vērts pievienot 96x96 izmēru, jo Google meklētājs rāda favicon blakus rezultātiem un pieprasa kvadrātveida ikonu, kuras izmērs dalās ar 48 px (48x48, 96x96, 144x144 un tā tālāk). 96 px fails Google dod asāku avotu nekā 48 px, kad tas samazina attēlu mobilajiem rezultātiem.

Dizaina padoms: 16 px izmērā smalkas detaļas pazūd. Izmanto drosmīgu, vienkāršu formu, augstu kontrastu un maz teksta vai vispār bez tā. Pirms eksportēšanas vari pielāgot un priekšskatīt savu ikonu MakeFav redaktorā.

SVG favicon un tumšais režīms

SVG favicon ir viens niecīgs fails, kas paliek ass jebkurā ekrāna blīvumā. To atbalsta uz Chromium balstīti pārlūki un Firefox. Safari atbalsts vēsturiski bijis ierobežots, tāpēc nekad nepaļaujies tikai uz SVG: saglabā ICO un PNG rezerves variantus.

Lielākā priekšrocība ir tematizēšana. Tā kā SVG var saturēt CSS, ikonu var pielāgot lietotāja krāsu shēmai ar 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>

Ņem vērā, ka mediju vaicājums atspoguļo pārlūka vai operētājsistēmas motīvu, ko izmanto cilņu josla. Tas neseko motīva pārslēdzējam tavā vietnē.

Viena zināma īpatnība: ja ir norādīti gan ICO, gan SVG, Chrome var izvēlēties ICO. Ja ICO norāda ar sizes="32x32" un SVG min pēc tā, Chrome dod priekšroku SVG, kā parādīts zemāk esošajā kodā.

Apple touch ikona: 180x180 un vecie izmēri

Kad lietotājs pievieno tavu vietni iOS vai iPadOS sākuma ekrānam, Safari izmanto apple-touch-icon. Mūsdienās pietiek ar vienu 180x180 px PNG: iOS to samazina vecākām ierīcēm un iPad. Nosauc to apple-touch-icon.png un novieto saknē; iOS pat pēc noklusējuma meklē šo failu, ja link tags nav norādīts.

Noteikumi Apple ikonai:

• Bez caurspīdīguma. iOS caurspīdīgos pikseļus aizpilda ar melnu, tāpēc caurspīdīgs logotips bieži pārvēršas melnā traipā. Pievieno vienlaidu fona krāsu.
• Bez noapaļotiem stūriem. iOS piemēro savu noapaļoto masku. Iesniedz pilnu kvadrātu.
• Svarīgāko saturu tur tālāk no pašām malām, jo stūri tiek apgriezti.

Kad vajadzīgi vecie izmēri (57, 72, 76, 114, 120, 144, 152, 167)? Tikai tad, ja atbalsti iOS 6 vai vecāku versiju vai vēlies precīzu pikseļu kontroli katrai ierīcei iPad Pro (167 px) un iPad (152 px) gadījumā. Gandrīz katrai vietnei 2026. gadā pietiek ar vienu 180x180 failu. Zemāk redzamais maksimālās saderības komplekts dažus no tiem ietver pilnības labad.

Android un PWA ikonas: 192, 512 un maskable

Chrome pārlūkā Android ierīcēs un citos PWA atbalstošos pārlūkos ikonas tiek nolasītas no tīmekļa lietotnes manifesta, nevis no <link rel="icon">. Lai lietotni varētu instalēt, vajadzīgs vismaz viens 192x192 un viens 512x512 PNG. 192 px ikonu izmanto sākuma ekrānā un lietotņu palaidējā; 512 px ikona parādās sākuma ekrānos (splash screen) un instalēšanas dialogos.

Maskable ikonas un drošā zona

Android adaptīvās ikonas atkarībā no ierīces var tikt apgrieztas aplī, squircle vai citā formā. Maskable ikona ir veidota tā, lai to varētu droši apgriezt: svarīgajam saturam jāatrodas drošajā zonā — centrētā aplī ar diametru 80% no attēla (rādiuss ir 40% no malas). 512x512 failam tas nozīmē, ka logotips jātur aplī ar aptuveni 410 px diametru, bet fona krāsa jāvelk līdz visām četrām malām, lai pēc maskēšanas neparādītos spraugas.

Deklarē maskable ikonu kā atsevišķu ierakstu ar "purpose": "maskable". Izvairies no "any maskable" vienam failam: maskēšanai nepieciešamais atkāpju apjoms izskatās pārāk mazs, kad ikona tiek rādīta bez maskas.

manifest.json piemērs

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

Pasniedz failu kā application/manifest+json (vai application/json) un saisti to no katras lapas ar <link rel="manifest" href="/manifest.json">. Daži projekti to sauc par site.webmanifest; nosaukumam nav nozīmes, svarīga ir saite.

Windows flīzes un browserconfig.xml

Windows 8.1 un 10 ļauj lietotājiem piespraust vietni Start izvēlnei, un IE11 un vecais Edge flīžu attēlus nolasa no browserconfig.xml. Parastie izmēri ir 70x70 (maza), 150x150 (vidēja), 310x150 (plata) un 310x310 (liela). Uz Chromium balstītais Edge tā vietā izmanto manifestu un parastos favicon, tāpēc šī ir novecojusi funkcija. Iekļauj to tikai tad, ja tava auditorija joprojām izmanto vecākas Windows konfigurācijas, piemēram, korporatīvajā vidē.

<?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: pārlūka saskarnes tonēšana

Meta tags theme-color norāda mobilajiem pārlūkiem (un dažiem darbvirsmas pārlūkiem), kādu krāsu izmantot adreses joslai vai virsraksta joslai. Tā nav favicon, bet pieder pie tā paša zīmola elementu kopas. Gaišajam un tumšajam režīmam vari norādīt atsevišķas vērtības:

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

Minimālā moderna konfigurācija pret maksimālo saderību

Minimālā moderna konfigurācija (ieteicama lielākajai daļai vietņu)

Pieci faili aptver vairāk nekā 99% reālās lietošanas: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) un divas manifesta ikonas (192 un 512). Pievieno 96x96 PNG, ja svarīga redzamība Google meklētājā, un maskable ikonu, ja veido 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">

Maksimālās saderības konfigurācija

Izvēlies šo, ja apkalpo plašu vai uzņēmumu auditoriju vai vēlies aptvert katru iespējamo klientu. Tā pievieno skaidri norādītus PNG izmērus, vecos Apple izmērus, Windows flīzes un motīva krāsas.

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

Ievēro ceļus attiecībā pret sakni, kas sākas ar /. Tie darbojas jebkurā lapas dziļumā, kas mūs noved pie biežākajām kļūdām.

Biežākās favicon kļūdas un kā tās labot

1. Nepareizi ceļi

Saite, piemēram, href="favicon.ico", tiek atrisināta attiecībā pret pašreizējo URL, tāpēc tā darbojas lapā /, bet nedarbojas lapā /blog/post/. Izmanto ceļus attiecībā pret sakni (/favicon.ico) vai absolūtos URL. Pārbaudi arī, vai faili tiešām pastāv: atver katru URL tieši pārlūkā un pārliecinies, ka tas atgriež HTTP 200, nevis pāradresāciju uz 404 lapu vai pieteikšanās sienu.

2. Trūkstošs vai nepareizs sizes atribūts

Bez sizes pārlūkiem ikonas jālejupielādē, lai tās pārbaudītu, un tie var izvēlēties nepareizo. Vienmēr norādi sizes PNG saitēm un pārliecinies, ka tas atbilst īstajiem pikseļu izmēriem. Fails, kas apzīmēts kā 32x32, bet patiesībā ir 64x64, rada nekonsekventus rezultātus.

3. Agresīva kešatmiņa

Pārlūki favicon kešo ilgi, bieži neatkarīgi no lapas kešatmiņas. Pēc pārzīmološanas vecā ikona var saglabāties vairākas dienas. Nomaini faila nosaukumu vai pievieno versijas vaicājuma virkni (/favicon.ico?v=2) un atjaunini link tagus. Pilna pārlāde bieži neatsvaidzina cilnes ikonu; parasti palīdz ikonas URL atvēršana tieši un pārlādēšana.

4. Nekvadrātveida attēli

Favicon jābūt kvadrātveida. Taisnstūrveida logotips tiek izstiepts, apgriezts vai ievietots ar melnajām joslām neparedzami. Izveido īpašu kvadrātveida zīmi, piemēram, iniciāli vai simbolu, nevis samazini platu vārdzīmi.

5. Caurspīdīgas Apple touch ikonas, kas kļūst melnas

iOS caurspīdīgumu aizpilda ar melnu. Dod 180x180 ikonai necaurspīdīgu fonu un neapaļo stūrus iepriekš.

6. Maskable ikonas bez drošās zonas

Ja logotips skar maskable ikonas malas, Android to nogriezīs. Tur to centrālajā 80% aplī un aizpildi visu audeklu ar fona krāsu.

7. Ikonu bloķēšana rāpuļprogrammām

Ja robots.txt aizliedz piekļuvi tavam favicon ceļam, Google to nevar ielādēt un meklēšanas rezultātos rādīs vispārēju globusa ikonu. Atceries arī, ka Google nepieciešams, lai favicon atrastos tajā pašā resursdatorā (host), kur lapa, un tas to atsvaidzina tikai laiku pa laikam, tāpēc izmaiņas var parādīties pēc dažām dienām vai nedēļām.

8. Aizmirsta manifesta saite vai mērķi (purpose)

Manifests, kas nav piesaistīts vai kam nav 192 un 512 px ikonu, neļauj Chrome parādīt instalēšanas uzvedni. Validē to pārlūka izstrādātāju rīkos cilnē Application.

Izveido visu komplektu ar vienu klikšķi

Izveidot desmitiem failu ar roku attēlu redaktorā, pēc tam konvertēt uz ICO un uzrakstīt manifestu ir apnicīgi un kļūdaini. MakeFav ģenerē visus iepriekš minētos failus no viena attēla, teksta vai emoji: vairāku izmēru favicon.ico, PNG, SVG, Apple touch ikonu, 192/512 PNG, maskable ikonu, Windows flīzes, manifest.json un browserconfig.xml, kā arī gatavu ielīmējamu HTML fragmentu — viss vienā ZIP lejupielādē. Redaktorā vari precizēt fonu, atkāpes un formu, ar favicon pārbaudītāju pārbaudīt esošu vietni un automatizēt ģenerēšanu, izmantojot izstrādātāju resursus.

Ieviešanas kontrolsaraksts

1. Augšupielādē visus failus savas vietnes saknē.
2. Ielīmē HTML fragmentu katras lapas <head> (vai savā kopīgajā izkārtojumā).
3. Pārliecinies, ka ceļi ir norādīti attiecībā pret sakni un atgriež HTTP 200.
4. Pārbaudi gaišo un tumšo režīmu, instalēšanu iOS sākuma ekrānā un instalēšanu Android ierīcē.
5. Palaid pārbaudītāju, lai atrastu trūkstošus vai neatbilstošus izmērus.
6. Ja nomainīji veco ikonu, apej kešatmiņu ar versijas virkni.

Biežāk uzdotie jautājumi

Vai 2026. gadā joprojām vajag favicon.ico?

Jā. Lai gan modernie pārlūki pieņem PNG un SVG, daudzas rāpuļprogrammas, plūsmu lasītāji, e-pasta klienti un vecāki pārlūki joprojām tieši pieprasa /favicon.ico. Vairāku izmēru ICO ar 16, 32 un 48 px attēliem ir mazs fails, kas novērš trūkstošas ikonas un 404 kļūdas.

Kādam jābūt favicon izmēram Google meklētājam?

Google pieprasa kvadrātveida favicon, kura izmērs dalās ar 48 px, vismaz 48x48. 96x96 PNG ir drošs risinājums, un SVG arī tiek atbalstīts. Google nepieciešams arī, lai fails būtu pieejams rāpuļprogrammām, tāpēc neaizliedz to failā robots.txt. Atjauninājumi var parādīties pēc dažām dienām vai nedēļām.

Vai ar 180x180 pietiek Apple touch ikonai?

Gandrīz visām vietnēm — jā. iOS un iPadOS samazina 180x180 PNG katrai pašreizējai ierīcei. Vecākie izmēri (no 57 līdz 152 px) ir svarīgi tikai ļoti vecām iOS versijām. Neaizmirsti izmantot necaurspīdīgu fonu, lai ikona nekļūtu melna.

Kas ir maskable ikona un vai man tāda vajadzīga?

Maskable ikona ir 512x512 PNG, kas paredzēts Android adaptīvo ikonu formām. Tās svarīgākais saturs atrodas centrā 80% diametra aplī, un fons aizpilda visu kvadrātu. Tā vajadzīga tikai tad, ja piedāvā instalējamu PWA, taču tā liek ikonai izskatīties dabiskai, nevis stāvēt baltā aplī.

Kāpēc mana vecā favicon joprojām rādās pēc tam, kad es to nomainīju?

Pārlūki favicon kešo atsevišķi un uz ilgu laiku. Pārdēvē failu vai pievieno versijas vaicājuma virkni, piemēram, ?v=2, atjaunini link tagus un pēc tam atver ikonas URL tieši un pārlādē to. Meklētājprogrammām savas kopijas atsvaidzināšana var aizņemt ilgāk.