Koje veličine favicona trebate 2026.? Idealan set

Idealan set favicona u 2026. godini čine: favicon.ico koji sadrži slike od 16, 32 i 48 px, PNG 96x96 (za Google Search), neobavezni SVG favicon, apple-touch-icon.png od 180x180 te PNG-ovi od 192x192 i 512x512 (plus maskable 512) deklarirani u web app manifestu. Windows pločice i stare Apple veličine potrebne su samo ako morate podržati vrlo stare uređaje. U nastavku objašnjavamo zašto, uz tablicu veličina, gotov HTML i česte pogreške koje valja izbjegavati.

Svijet favicona nekad je bio kaotičan: svaki preglednik i operacijski sustav tražio je svoju veličinu, što je rezultiralo zloglasnim blokovima od 20 redaka u <head>. Danas je većina toga zastarjela. Moderni preglednici skaliraju jednu dobru ikonu, iOS želi jednu veličinu, a Android čita manifest. Ovaj članak razdvaja ono što je doista potrebno od onoga što je samo poželjno.

Kratak odgovor: idealan set datoteka favicona

• favicon.ico (16, 32, 48 px u jednoj datoteci) u korijenu web-mjesta. Preglednici, čitači feedova i mnogi alati i dalje automatski traže /favicon.ico.
• favicon.svg (neobavezno, ali preporučeno) za oštar prikaz u bilo kojoj veličini i podršku za tamni način rada.
• PNG 16x16, 32x32 i 96x96 kao eksplicitne zamjene. Verzija od 96 px pomaže u Google Searchu, koji zahtijeva višekratnik od 48 px.
• apple-touch-icon.png veličine 180x180, neprozirna, bez transparentnosti.
• PNG 192x192 i 512x512 u manifest.json, plus maskable ikona 512x512 za Android.
• theme-color meta oznaka za bojanje sučelja preglednika na mobitelu.
• Windows pločice (70, 150, 310 px) s browserconfig.xml samo za stari Windows i prikvačene stranice u IE11.

Tablica veličina favicona: namjena, nazivi datoteka i prioritet

Koristite ovu tablicu kao kontrolni popis. „Obavezno” znači da će uobičajeno web-mjesto bez toga izgledati pokvareno ili nedovršeno; „Preporučeno” znači jasno poboljšanje kvalitete; „Neobavezno” znači nišnu ili zastarjelu upotrebu.

favicon.ico: 16, 32 i 48 px u jednoj datoteci

ICO datoteka je spremnik koji sadrži nekoliko bitmapa. Dobar favicon.ico uključuje slike 16x16, 32x32 i 48x48 kako bi preglednik ili operacijski sustav mogao odabrati najbližu. Postavite ga u korijen domene (https://example.com/favicon.ico). Čak i ako vaš HTML upućuje drugamo, mnogi crawleri, RSS čitači i stariji preglednici i dalje traže upravo taj URL, pa ćete ga imati kako biste izbjegli suvišne 404 zapise u logovima.

Nemojte jednostavno preimenovati PNG u .ico. Većina preglednika to tolerira, ali neki alati to odbijaju, a gubite i prednost više razlučivosti. Izvezite pravi ICO.

PNG faviconi: 16, 32 i 96 px

PNG poveznice s eksplicitnim atributom sizes omogućuju pregledniku da odabere najbolju bitmapu bez parsiranja ICO-a. U praksi 32x32 pokriva kartice visoke gustoće piksela, a 16x16 je danas gotovo suvišan. Veličinu 96x96 vrijedi dodati jer Google Search prikazuje favicone uz rezultate i zahtijeva kvadratnu ikonu čija je veličina višekratnik od 48 px (48x48, 96x96, 144x144 i tako dalje). Datoteka od 96 px daje Googleu oštriji izvor od one od 48 px kada smanjuje sliku za mobilne rezultate.

Savjet za dizajn: na 16 px sitni detalji nestaju. Koristite smion, jednostavan oblik, visok kontrast i malo teksta ili nimalo. Ikonu možete doraditi i pregledati u MakeFav uredniku prije izvoza.

SVG favicon i tamni način rada

SVG favicon je jedna sićušna datoteka koja ostaje oštra na bilo kojoj gustoći zaslona. Podržavaju ga preglednici temeljeni na Chromiumu i Firefox. Podrška u Safariju povijesno je bila ograničena, stoga se nikada nemojte oslanjati samo na SVG: zadržite ICO i PNG kao zamjene.

Najveća prednost je tematiziranje. Budući da SVG može sadržavati CSS, ikonu možete prilagoditi korisnikovoj shemi boja pomoću 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>

Imajte na umu da media upit odražava temu preglednika ili operacijskog sustava, koju koristi traka kartica. Ne prati prekidač teme na vašem web-mjestu.

Jedna poznata začkoljica: kada su navedeni i ICO i SVG, Chrome može odabrati ICO. Deklariranjem ICO-a s sizes="32x32" i navođenjem SVG-a nakon toga Chrome će preferirati SVG, kao što je prikazano u kodu u nastavku.

Apple touch ikona: 180x180 i stare veličine

Kada korisnik doda vaše web-mjesto na početni zaslon iOS-a ili iPadOS-a, Safari koristi apple-touch-icon. Danas je dovoljan jedan PNG od 180x180 px: iOS ga smanjuje za starije uređaje i iPade. Nazovite ga apple-touch-icon.png i postavite u korijen; iOS tu datoteku čak traži prema zadanim postavkama ako ne postoji link oznaka.

Pravila za Apple ikonu:

• Bez transparentnosti. iOS prozirne piksele ispunjava crnom, pa se prozirni logotip često pretvori u crnu mrlju. Dodajte punu boju pozadine.
• Bez zaobljenih kutova. iOS primjenjuje vlastitu zaobljenu masku. Dostavite cijeli kvadrat.
• Važan sadržaj držite podalje od samih rubova jer se kutovi režu.

Kada su vam potrebne stare veličine (57, 72, 76, 114, 120, 144, 152, 167)? Samo ako podržavate iOS 6 ili stariji ili želite točnu kontrolu piksela po uređaju za iPad Pro (167 px) i iPad (152 px). Za gotovo svako web-mjesto u 2026. sama datoteka 180x180 sasvim je dovoljna. Postava za maksimalnu kompatibilnost u nastavku radi potpunosti uključuje nekoliko njih.

Android i PWA ikone: 192, 512 i maskable

Chrome na Androidu i drugi preglednici s podrškom za PWA čitaju ikone iz web app manifesta, a ne iz <link rel="icon">. Za mogućnost instalacije trebate barem jedan PNG od 192x192 i jedan od 512x512. Ikona od 192 px koristi se na početnom zaslonu i u pokretaču aplikacija; ikona od 512 px pojavljuje se na zaslonima dobrodošlice i u dijalozima za instalaciju.

Maskable ikone i sigurna zona

Adaptivne ikone na Androidu mogu se obrezati u krug, squircle ili drugi oblik, ovisno o uređaju. Maskable ikona dizajnirana je tako da se sigurno obreže: važan sadržaj mora biti unutar sigurne zone, centriranog kruga promjera 80% slike (polumjer je 40% stranice). Za datoteku 512x512 to znači da logotip držite unutar kruga promjera oko 410 px te da boju pozadine proširite do sva četiri ruba kako se nakon maskiranja ne bi vidjele praznine.

Maskable ikonu deklarirajte kao zaseban unos s "purpose": "maskable". Izbjegavajte "any maskable" na jednoj datoteci: razmak potreban za maskiranje izgleda premalo kada se ikona prikazuje bez maske.

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

Poslužite datoteku kao application/manifest+json (ili application/json) i povežite je sa svake stranice pomoću <link rel="manifest" href="/manifest.json">. Neki projekti nazivaju je site.webmanifest; naziv nije bitan, bitna je poveznica.

Windows pločice i browserconfig.xml

Windows 8.1 i 10 korisnicima omogućuju prikvačivanje web-mjesta na izbornik Start, a IE11 i stari Edge čitaju slike pločica iz browserconfig.xml. Uobičajene veličine su 70x70 (malo), 150x150 (srednje), 310x150 (široko) i 310x310 (veliko). Edge temeljen na Chromiumu umjesto toga koristi manifest i obične favicone, pa je ovo zastarjela značajka. Uključite je samo ako vaša publika još uvijek obuhvaća starije Windows postave, primjerice u korporativnim okruženjima.

<?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: bojanje sučelja preglednika

Meta oznaka theme-color govori mobilnim preglednicima (i nekim desktop preglednicima) koju boju koristiti za adresnu traku ili naslovnu traku. To nije favicon, ali pripada istom skupu brendiranja. Možete navesti zasebne vrijednosti za svijetli i tamni način rada:

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

Minimalna moderna postava naspram maksimalne kompatibilnosti

Minimalna moderna postava (preporučeno za većinu web-mjesta)

Pet datoteka pokriva preko 99% stvarne upotrebe: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) i dvije ikone iz manifesta (192 i 512). Dodajte PNG 96x96 ako vam je bitna vidljivost u Google Searchu, a maskable ikonu ako isporučujete 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">

Postava za maksimalnu kompatibilnost

Odaberite ovo kada služite široku ili poslovnu publiku ili kada želite pokriti svakog mogućeg klijenta. Dodaje eksplicitne PNG veličine, stare Apple veličine, Windows pločice i boje 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>

Primijetite putanje relativne na korijen koje počinju s /. One rade na bilo kojoj dubini stranice, što nas dovodi do najčešćih pogrešaka.

Česte pogreške s faviconima i kako ih ispraviti

1. Pogrešne putanje

Poveznica poput href="favicon.ico" razrješava se u odnosu na trenutni URL, pa radi na /, ali ne radi na /blog/post/. Koristite putanje relativne na korijen (/favicon.ico) ili apsolutne URL-ove. Provjerite i da datoteke doista postoje: otvorite svaki URL izravno u pregledniku i uvjerite se da vraća HTTP 200, a ne preusmjeravanje na 404 stranicu ili stranicu za prijavu.

2. Nedostajući ili pogrešan atribut sizes

Bez atributa sizes preglednici moraju preuzeti ikone da bi ih pregledali i mogu odabrati pogrešnu. Uvijek deklarirajte sizes na PNG poveznicama i pazite da odgovara stvarnim dimenzijama u pikselima. Datoteka označena kao 32x32 koja je zapravo 64x64 uzrokuje nedosljedne rezultate.

3. Agresivno keširanje

Preglednici dugo keširaju favicone, često neovisno o kešu stranice. Nakon redizajna brenda stara ikona može ostati danima. Promijenite naziv datoteke ili dodajte verziju u query string (/favicon.ico?v=2) i ažurirajte link oznake. Tvrdo osvježavanje često ne osvježi ikonu kartice; otvaranje URL-a ikone izravno i njegovo ponovno učitavanje obično uspije.

4. Slike koje nisu kvadratne

Faviconi moraju biti kvadratni. Pravokutni logotip bit će razvučen, obrezan ili okružen prazninama na nepredvidiv način. Dizajnirajte posebnu kvadratnu oznaku, poput inicijala ili simbola, umjesto smanjivanja širokog logotipa s tekstom.

5. Prozirne Apple touch ikone koje postanu crne

iOS transparentnost ispunjava crnom. Ikoni 180x180 dodajte neprozirnu pozadinu i nemojte unaprijed zaobljavati kutove.

6. Maskable ikone bez sigurne zone

Ako logotip dodiruje rubove maskable ikone, Android će ga odrezati. Držite ga unutar središnjeg kruga od 80% i cijelo platno ispunite bojom pozadine.

7. Blokiranje ikona za crawlere

Ako robots.txt zabranjuje putanju vašeg favicona, Google ga ne može dohvatiti i u rezultatima pretraživanja prikazat će generičku ikonu globusa. Imajte na umu i da Google treba favicon na istom hostu kao i stranica te ga osvježava tek povremeno, pa promjene mogu postati vidljive tek nakon nekoliko dana ili tjedana.

8. Zaboravljena poveznica na manifest ili namjene ikona

Manifest koji nije povezan ili kojemu nedostaju ikone od 192 i 512 px sprječava upit za instalaciju u Chromeu. Provjerite ga u alatima za razvojne programere preglednika, u kartici Application.

Generirajte cijeli set jednim klikom

Ručno izrađivati desetak datoteka u uredniku slika, zatim ih pretvarati u ICO i pisati manifest zamorno je i podložno pogreškama. MakeFav generira sve gore navedene datoteke iz jedne slike, teksta ili emojija: viševeličinski favicon.ico, PNG-ove, SVG, Apple touch ikonu, PNG-ove 192/512, maskable ikonu, Windows pločice, manifest.json i browserconfig.xml, plus HTML isječak spreman za lijepljenje, sve u jednom ZIP preuzimanju. Pozadinu, razmak i oblik možete fino podesiti u uredniku, provjeriti postojeće web-mjesto pomoću provjere favicona te automatizirati generiranje putem resursa za razvojne programere.

Kontrolni popis za objavu

1. Učitajte sve datoteke u korijen svojeg web-mjesta.
2. Zalijepite HTML isječak u <head> svake stranice (ili zajedničkog layouta).
3. Pazite da su putanje relativne na korijen i da vraćaju HTTP 200.
4. Provjerite svijetli i tamni način rada, instalaciju na početni zaslon iOS-a i instalaciju na Androidu.
5. Pokrenite provjeru kako biste uhvatili nedostajuće ili neusklađene veličine.
6. Ako ste zamijenili staru ikonu, zaobiđite keš verzijom u query stringu.

Često postavljana pitanja

Treba li mi još uvijek favicon.ico u 2026.?

Da. Iako moderni preglednici prihvaćaju PNG i SVG, mnogi crawleri, čitači feedova, klijenti e-pošte i stariji preglednici i dalje izravno traže /favicon.ico. ICO s više veličina, sa slikama od 16, 32 i 48 px, mala je datoteka koja sprječava nedostajuće ikone i 404 pogreške.

Koje veličine treba biti favicon za Google Search?

Google zahtijeva kvadratni favicon čija je veličina višekratnik od 48 px, najmanje 48x48. PNG 96x96 siguran je izbor, a podržan je i SVG. Google također treba da je datoteka dostupna crawleru, stoga je ne blokirajte u robots.txt. Ažuriranja mogu postati vidljiva tek nakon nekoliko dana ili tjedana.

Je li 180x180 dovoljno za Apple touch ikonu?

Za gotovo sva web-mjesta, da. iOS i iPadOS smanjuju PNG 180x180 za svaki trenutni uređaj. Starije veličine (od 57 do 152 px) važne su samo za vrlo stare verzije iOS-a. Ne zaboravite koristiti neprozirnu pozadinu kako ikona ne bi postala crna.

Što je maskable ikona i treba li mi?

Maskable ikona je PNG 512x512 dizajniran za adaptivne oblike ikona na Androidu. Njezin važan sadržaj nalazi se unutar kruga promjera 80% u sredini, a pozadina ispunjava cijeli kvadrat. Trebate je samo ako nudite PWA koji se može instalirati, ali zahvaljujući njoj ikona izgleda nativno umjesto da stoji u bijelom krugu.

Zašto se moj stari favicon i dalje prikazuje nakon što sam ga promijenio?

Preglednici keširaju favicone zasebno i dugo. Preimenujte datoteku ili dodajte verziju u query string, primjerice ?v=2, ažurirajte link oznake, a zatim izravno otvorite URL ikone i ponovno ga učitajte. Tražilicama može trebati dulje da osvježe vlastitu kopiju.