Katere velikosti favicon potrebujete leta 2026? Idealen komplet

Leta 2026 idealen komplet favicon sestavljajo: datoteka favicon.ico s slikami velikosti 16, 32 in 48 px, PNG 96x96 (za Google Search), neobvezna ikona SVG, apple-touch-icon.png velikosti 180x180 ter PNG-ja 192x192 in 512x512 (in še maskable 512), navedeni v manifestu spletne aplikacije. Ploščice za Windows in starejše velikosti za Apple potrebujete le, če morate podpirati zelo stare naprave. V nadaljevanju je razloženo, zakaj je tako, s tabelo velikosti, takoj uporabnim HTML-jem in pogostimi napakami, ki se jim je treba izogniti.

Svet favicon je bil nekoč kaotičen: vsak brskalnik in operacijski sistem je zahteval svojo velikost, kar je ustvarilo razvpite bloke <head> z ile 20 vrsticami. Danes je večina tega zastarela. Sodobni brskalniki prilagodijo velikost ene dobre ikone, iOS želi eno velikost, Android pa prebere manifest. Ta članek loči tisto, kar je res potrebno, od tistega, kar je le lepo imeti.

Kratek odgovor: idealen komplet datotek favicon

• favicon.ico (16, 32, 48 px v eni datoteki) v korenski mapi spletnega mesta. Brskalniki, bralniki virov in številna orodja še vedno samodejno zahtevajo /favicon.ico.
• favicon.svg (neobvezno, a priporočljivo) za ostro upodobitev pri kateri koli velikosti in podporo temnemu načinu.
• PNG 16x16, 32x32 in 96x96 kot izrecne rezervne možnosti. Različica 96 px pomaga pri Google Search, ki zahteva večkratnik števila 48 px.
• apple-touch-icon.png velikosti 180x180, neprosojen, brez prosojnosti.
• PNG 192x192 in 512x512 v manifest.json ter maskable ikona 512x512 za Android.
• Meta oznaka theme-color za obarvanje uporabniškega vmesnika brskalnika v mobilnih napravah.
• Ploščice za Windows (70, 150, 310 px) z datoteko browserconfig.xml samo za starejši Windows in pripeta spletna mesta v IE11.

Tabela velikosti favicon: namen, imena datotek in prioriteta

Uporabite to tabelo kot kontrolni seznam. »Obvezno« pomeni, da bo običajno spletno mesto brez tega videti pokvarjeno ali nedokončano; »Priporočeno« pomeni jasno izboljšanje kakovosti; »Neobvezno« pomeni nišno ali starejšo uporabo.

favicon.ico: 16, 32 in 48 px v eni datoteki

Datoteka ICO je vsebnik, ki hrani več bitnih slik. Dober favicon.ico vsebuje slike 16x16, 32x32 in 48x48, tako da brskalnik ali operacijski sistem izbere najbližje ujemanje. Postavite ga v koren domene (https://example.com/favicon.ico). Tudi če vaš HTML kaže drugam, številni iskalni roboti, bralniki RSS in starejši brskalniki še vedno zahtevajo točno ta URL, zato se z njegovo prisotnostjo izognete odvečnim napakam 404 v dnevnikih.

Datoteke PNG preprosto ne preimenujte v .ico. Večina brskalnikov to prenese, nekatera orodja pa ga zavrnejo, poleg tega izgubite prednost več ločljivosti. Izvozite pravi ICO.

Favicone PNG: 16, 32 in 96 px

Povezave PNG z izrecnim atributom sizes omogočajo brskalniku, da izbere najboljšo sliko, ne da bi moral razčlenjevati ICO. V praksi 32x32 pokrije zavihke z visoko ločljivostjo, 16x16 pa je danes skoraj odveč. Velikost 96x96 je vredno dodati, ker Google Search prikazuje favicone ob rezultatih in zahteva kvadratno ikono, katere velikost je večkratnik števila 48 px (48x48, 96x96, 144x144 in tako naprej). Datoteka 96 px da Googlu ostrejši vir kot 48 px, ko jo pomanjša za mobilne rezultate.

Nasvet za oblikovanje: pri 16 px drobni detajli izginejo. Uporabite odebeljeno, preprosto obliko, visok kontrast in malo besedila ali nič. Ikono lahko prilagodite in si jo ogledate v urejevalniku MakeFav, preden jo izvozite.

Favicon SVG in temni način

Favicon SVG je ena sama majhna datoteka, ki ostane ostra pri vsaki gostoti zaslona. Podpirajo ga brskalniki na osnovi Chromiuma in Firefox. Podpora v Safariju je bila zgodovinsko omejena, zato se nikoli ne zanašajte samo na SVG: obdržite rezervni možnosti ICO in PNG.

Največja prednost je prilagajanje teme. Ker SVG lahko vsebuje CSS, lahko ikono prilagodite barvni shemi uporabnika s 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>

Upoštevajte, da medijska poizvedba odraža temo brskalnika ali operacijskega sistema, ki jo uporablja vrstica zavihkov. Ne sledi preklopniku teme na vašem spletnem mestu.

Ena znana posebnost: kadar sta navedena ICO in SVG, lahko Chrome izbere ICO. Če ICO deklarirate s sizes="32x32" in SVG navedete za njim, Chrome raje izbere SVG, kot je prikazano v spodnji kodi.

Ikona Apple touch: 180x180 in starejše velikosti

Ko uporabnik doda vaše spletno mesto na začetni zaslon iOS ali iPadOS, Safari uporabi apple-touch-icon. Danes zadošča ena sama datoteka PNG velikosti 180x180 px: iOS jo pomanjša za starejše naprave in iPade. Poimenujte jo apple-touch-icon.png in jo postavite v koren; iOS to datoteko celo privzeto poišče, če oznake link ni.

Pravila za ikono Apple:

• Brez prosojnosti. iOS prosojne slikovne pike zapolni s črno, zato se prosojen logotip pogosto spremeni v črno packo. Dodajte enobarvno ozadje.
• Brez zaobljenih vogalov. iOS uporabi lastno zaobljeno masko. Dostavite celoten kvadrat.
• Pomembno vsebino držite stran od samih robov, saj so vogali odrezani.

Kdaj potrebujete starejše velikosti (57, 72, 76, 114, 120, 144, 152, 167)? Samo če podpirate iOS 6 ali starejši ali želite natančen nadzor nad slikovnimi pikami za posamezno napravo pri iPadu Pro (167 px) in iPadu (152 px). Za skoraj vsako spletno mesto leta 2026 zadošča samo datoteka 180x180. Spodnja nastavitev za največjo združljivost zaradi popolnosti vključuje nekaj teh velikosti.

Ikone za Android in PWA: 192, 512 in maskable

Chrome v Androidu in drugi brskalniki s podporo PWA preberejo ikone iz manifesta spletne aplikacije, ne iz <link rel="icon">. Za možnost namestitve potrebujete vsaj PNG velikosti 192x192 in 512x512. Ikona 192 px se uporablja na začetnem zaslonu in v zaganjalniku aplikacij; ikona 512 px se prikaže na uvodnih zaslonih in v pogovornih oknih za namestitev.

Maskable ikone in varno območje

Prilagodljive ikone Androida se lahko glede na napravo obrežejo v krog, squircle ali drugo obliko. Maskable ikona je zasnovana tako, da jo je mogoče varno obrezati: pomembna vsebina mora biti znotraj varnega območja, osrednjega kroga s premerom 80 % slike (polmer je 40 % stranice). Pri datoteki 512x512 to pomeni, da logotip ostane znotraj kroga s premerom približno 410 px, barva ozadja pa se razteza do vseh štirih robov, da po maskiranju ni vrzeli.

Maskable ikono deklarirajte kot ločen vnos z "purpose": "maskable". Izogibajte se "any maskable" na eni datoteki: odmik, potreben za maskiranje, je videti premajhen, ko je ikona prikazana brez maske.

Primer datoteke 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"
    }
  ]
}

Datoteko strežite kot application/manifest+json (ali application/json) in jo povežite z vsake strani z <link rel="manifest" href="/manifest.json">. Nekateri projekti jo poimenujejo site.webmanifest; ime ni pomembno, pomembna je povezava.

Ploščice za Windows in browserconfig.xml

Windows 8.1 in 10 uporabnikom omogočata pripenjanje spletnega mesta v meni Start, IE11 in starejši Edge pa slike ploščic preberejo iz browserconfig.xml. Običajne velikosti so 70x70 (majhna), 150x150 (srednja), 310x150 (široka) in 310x310 (velika). Edge na osnovi Chromiuma namesto tega uporablja manifest in običajne favicone, zato gre za starejšo funkcijo. Vključite jo le, če med vašim občinstvom še vedno najdemo starejše namestitve Windows, na primer v podjetniških okoljih.

<?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: obarvanje uporabniškega vmesnika brskalnika

Meta oznaka theme-color mobilnim brskalnikom (in nekaterim namiznim) pove, katero barvo naj uporabijo za naslovno vrstico ali vrstico z naslovom. Ni favicon, a spada v isti komplet blagovne znamke. Za svetli in temni način lahko podate ločeni vrednosti:

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

Minimalna sodobna nastavitev proti največji združljivosti

Minimalna sodobna nastavitev (priporočeno za večino spletnih mest)

Pet datotek pokrije več kot 99 % uporabe v resničnem svetu: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) in ikoni manifesta (192 in 512). Dodajte PNG 96x96, če vam je pomembna vidnost v Google Search, in maskable ikono, če objavljate 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">

Nastavitev za največjo združljivost

Izberite jo, kadar strežete široko ali poslovno občinstvo ali želite pokriti vse mogoče odjemalce. Doda izrecne velikosti PNG, starejše velikosti za Apple, ploščice za Windows in barve teme.

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

Opazite poti, relativne na koren, ki se začnejo z /. Delujejo na vsaki globini strani, kar nas pripelje do najpogostejših napak.

Pogoste napake pri favicon in kako jih odpraviti

1. Napačne poti

Povezava, kot je href="favicon.ico", se razreši relativno glede na trenutni URL, zato deluje na /, na /blog/post/ pa ne. Uporabite poti, relativne na koren (/favicon.ico), ali absolutne URL-je. Preverite tudi, ali datoteke res obstajajo: vsak URL odprite neposredno v brskalniku in preverite, da vrne HTTP 200, ne preusmeritve na stran 404 ali prijavno steno.

2. Manjkajoč ali napačen atribut sizes

Brez sizes morajo brskalniki ikone prenesti, da jih pregledajo, in lahko izberejo napačno. Vedno navedite sizes pri povezavah PNG in poskrbite, da ustreza dejanskim dimenzijam v slikovnih pikah. Datoteka z oznako 32x32, ki je dejansko 64x64, povzroča nedosledne rezultate.

3. Agresivno predpomnjenje

Brskalniki favicone predpomnijo dolgo, pogosto neodvisno od predpomnilnika strani. Po prenovi blagovne znamke lahko stara ikona ostane več dni. Spremenite ime datoteke ali dodajte poizvedovalni niz z različico (/favicon.ico?v=2) in posodobite oznake link. Trda osvežitev pogosto ne osveži ikone zavihka; odpiranje URL-ja ikone neposredno in ponovno nalaganje običajno pomaga.

4. Nekvadratne slike

Favicon mora biti kvadraten. Pravokoten logotip se nepredvidljivo raztegne, obreže ali dobi črne robove. Oblikujte namenski kvadratni znak, na primer začetnico ali simbol, namesto da pomanjšate širok besedni logotip.

5. Prosojne ikone Apple touch, ki postanejo črne

iOS prosojnost zapolni s črno. Ikoni 180x180 dajte neprosojno ozadje in vogalov ne zaobljajte vnaprej.

6. Maskable ikone brez varnega območja

Če se logotip dotika robov maskable ikone, ga bo Android odrezal. Držite ga znotraj osrednjega kroga 80 % in z barvo ozadja zapolnite celotno platno.

7. Blokiranje ikon za iskalne robote

Če robots.txt prepoveduje pot do vašega favicona, ga Google ne more prenesti in bo v rezultatih iskanja prikazal splošno ikono globusa. Upoštevajte tudi, da Google potrebuje favicon na istem gostitelju kot stran in ga osvežuje le občasno, zato lahko spremembe trajajo dneve ali tedne.

8. Pozabljena povezava do manifesta ali nameni ikon

Manifest, ki ni povezan ali nima ikon 192 in 512 px, v Chromu prepreči poziv za namestitev. Preverite ga v razvijalskih orodjih brskalnika pod zavihkom Application.

Ustvarite celoten komplet z enim klikom

Ročno ustvarjanje ducata datotek v urejevalniku slik, nato pretvorba v ICO in pisanje manifesta je dolgočasno in nagnjeno k napakam. MakeFav iz ene same slike, besedila ali emojija ustvari vse zgoraj naštete datoteke: večvelikostni favicon.ico, PNG-je, SVG, ikono Apple touch, PNG-ja 192/512, maskable ikono, ploščice za Windows, manifest.json in browserconfig.xml ter HTML odlomek, pripravljen za lepljenje, vse v enem prenosu ZIP. V urejevalniku lahko natančno nastavite ozadje, odmik in obliko, z preverjevalnikom favicon preverite obstoječe spletno mesto, ustvarjanje pa avtomatizirate prek virov za razvijalce.

Kontrolni seznam za objavo

1. Naložite vse datoteke v koren svojega spletnega mesta.
2. Prilepite HTML odlomek v <head> vsake strani (ali v skupno predlogo).
3. Poskrbite, da so poti relativne na koren in vračajo HTTP 200.
4. Preverite svetli in temni način, namestitev na začetni zaslon iOS in namestitev v Androidu.
5. Zaženite preverjevalnik, da odkrijete manjkajoče ali neujemajoče se velikosti.
6. Če ste zamenjali staro ikono, predpomnilnike obidite z nizom z različico.

Pogosta vprašanja

Ali leta 2026 še potrebujem favicon.ico?

Da. Čeprav sodobni brskalniki sprejemajo PNG in SVG, številni iskalni roboti, bralniki virov, e-poštni odjemalci in starejši brskalniki še vedno neposredno zahtevajo /favicon.ico. Večvelikostni ICO s slikami 16, 32 in 48 px je majhna datoteka, ki prepreči manjkajoče ikone in napake 404.

Kolikšna naj bo velikost favicona za Google Search?

Google zahteva kvadratni favicon, katerega velikost je večkratnik števila 48 px, vsaj 48x48. PNG 96x96 je varna izbira, podprt pa je tudi SVG. Google potrebuje tudi, da je datoteka dostopna iskalnim robotom, zato je ne blokirajte v robots.txt. Posodobitve se lahko pokažejo šele čez dneve ali tedne.

Ali je 180x180 dovolj za ikono Apple touch?

Za skoraj vsa spletna mesta, da. iOS in iPadOS PNG 180x180 pomanjšata za vsako trenutno napravo. Starejše velikosti (od 57 do 152 px) so pomembne le za zelo stare različice iOS. Ne pozabite uporabiti neprosojnega ozadja, da ikona ne postane črna.

Kaj je maskable ikona in ali jo potrebujem?

Maskable ikona je PNG 512x512, zasnovan za prilagodljive oblike ikon v Androidu. Njena pomembna vsebina je znotraj kroga s premerom 80 % v sredini, ozadje pa zapolni cel kvadrat. Potrebujete jo le, če ponujate PWA, ki ga je mogoče namestiti, a ikona zaradi nje izgleda domače, namesto da bi sedela v belem krogu.

Zakaj se moj stari favicon še vedno prikazuje, ko sem ga zamenjal?

Brskalniki favicone predpomnijo ločeno in dolgo časa. Preimenujte datoteko ali dodajte poizvedovalni niz z različico, kot je ?v=2, posodobite oznake link, nato pa odprite URL ikone neposredno in ga ponovno naložite. Iskalnikom lahko osvežitev lastne kopije traja dlje.