Aké veľkosti favicon potrebujete v roku 2026? Ideálna sada

V roku 2026 vyzerá ideálna sada favicon takto: súbor favicon.ico obsahujúci obrázky 16, 32 a 48 px, PNG 96x96 (pre Vyhľadávanie Google), voliteľná favicon vo formáte SVG, apple-touch-icon.png 180x180 a PNG 192x192 a 512x512 (plus maskable 512) deklarované v manifeste webovej aplikácie. Dlaždice pre Windows a staršie veľkosti Apple potrebujete iba vtedy, ak musíte podporovať veľmi staré zariadenia. Nižšie nájdete vysvetlenie prečo, spolu s tabuľkou veľkostí, hotovým HTML a najčastejšími chybami, ktorým sa treba vyhnúť.

Svet favicon býval chaotický: každý prehliadač a operačný systém chcel vlastnú veľkosť, z čoho vznikli neslávne známe 20-riadkové bloky <head>. Dnes je väčšina z toho zastaraná. Moderné prehliadače zmenšia jednu kvalitnú ikonu, iOS chce jednu veľkosť a Android číta manifest. Tento článok oddeľuje to, čo je skutočne potrebné, od toho, čo je len príjemným bonusom.

Stručná odpoveď: ideálna sada súborov favicon

• favicon.ico (16, 32, 48 px v jednom súbore) v koreňovom adresári webu. Prehliadače, čítačky kanálov a mnohé nástroje si stále automaticky pýtajú /favicon.ico.
• favicon.svg (voliteľný, ale odporúčaný) pre ostré zobrazenie v akejkoľvek veľkosti a podporu tmavého režimu.
• PNG 16x16, 32x32 a 96x96 ako explicitné záložné varianty. Verzia 96 px pomáha vo Vyhľadávaní Google, ktoré vyžaduje násobok 48 px.
• apple-touch-icon.png vo veľkosti 180x180, nepriehľadný, bez priehľadnosti.
• PNG 192x192 a 512x512 v manifest.json, plus maskable ikona 512x512 pre Android.
• Meta tag theme-color na farebné ladenie používateľského rozhrania prehliadača v mobile.
• Dlaždice pre Windows (70, 150, 310 px) so súborom browserconfig.xml iba pre staršie Windows a pripnuté stránky v IE11.

Tabuľka veľkostí favicon: účel, názvy súborov a priorita

Použite túto tabuľku ako kontrolný zoznam. „Povinné“ znamená, že bežný web bez toho bude vyzerať pokazene alebo nedokončene; „Odporúčané“ znamená jasné zlepšenie kvality; „Voliteľné“ znamená nišové alebo staršie použitie.

favicon.ico: 16, 32 a 48 px v jednom súbore

Súbor ICO je kontajner, ktorý obsahuje niekoľko bitmáp. Dobrý favicon.ico obsahuje obrázky 16x16, 32x32 a 48x48, aby si prehliadač alebo operačný systém mohol vybrať najbližšiu zhodu. Umiestnite ho do koreňa svojej domény (https://example.com/favicon.ico). Aj keď váš HTML kód odkazuje inam, mnohé prehľadávače, čítačky RSS a staršie prehliadače si stále pýtajú presne túto adresu URL, takže jej existencia vám ušetrí zbytočné chyby 404 v logoch.

Jednoducho nepremenúvajte PNG na .ico. Väčšina prehliadačov to toleruje, ale niektoré nástroje to odmietnu a prídete o výhodu viacerých rozlíšení. Exportujte skutočný súbor ICO.

Favicon vo formáte PNG: 16, 32 a 96 px

Odkazy na PNG s explicitným atribútom sizes umožňujú prehliadaču vybrať najlepšiu bitmapu bez analýzy súboru ICO. V praxi 32x32 pokrýva karty s vysokým DPI a 16x16 je dnes takmer nadbytočné. Veľkosť 96x96 sa oplatí pridať, pretože Google zobrazuje favicon vedľa výsledkov vyhľadávania a vyžaduje štvorcovú ikonu, ktorej veľkosť je násobkom 48 px (48x48, 96x96, 144x144 atď.). Súbor 96 px poskytuje Googlu ostrejší zdroj ako 48 px, keď ho zmenšuje pre mobilné výsledky.

Tip pre dizajn: pri 16 px zmiznú jemné detaily. Použite výrazný, jednoduchý tvar, vysoký kontrast a málo textu alebo žiadny. Ikonu môžete upraviť a zobraziť jej náhľad v editore MakeFav ešte pred exportom.

Favicon vo formáte SVG a tmavý režim

Favicon vo formáte SVG je jeden malý súbor, ktorý zostáva ostrý pri akejkoľvek hustote obrazovky. Podporujú ho prehliadače založené na Chromiu a Firefox. Podpora v Safari bola historicky obmedzená, preto sa nikdy nespoliehajte iba na SVG: ponechajte záložné varianty ICO a PNG.

Najväčšou výhodou je prispôsobenie téme. Keďže SVG môže obsahovať CSS, ikonu môžete prispôsobiť farebnej schéme používateľa pomocou 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>

Upozorňujeme, že media query odráža tému prehliadača alebo operačného systému, ktorú používa panel kariet. Nenasleduje prepínač témy na vašom vlastnom webe.

Jedna známa zvláštnosť: keď sú uvedené ICO aj SVG, Chrome si môže vybrať ICO. Ak deklarujete ICO s sizes="32x32" a SVG uvediete až potom, Chrome uprednostní SVG, ako ukazuje kód nižšie.

Apple touch icon: 180x180 a staršie veľkosti

Keď používateľ pridá váš web na domovskú obrazovku iOS alebo iPadOS, Safari použije apple-touch-icon. Dnes stačí jediné PNG s rozmermi 180x180 px: iOS ho zmenší pre staršie zariadenia a iPady. Pomenujte ho apple-touch-icon.png a uložte do koreňa; iOS tento súbor predvolene hľadá aj vtedy, ak neexistuje žiadny značka link.

Pravidlá pre ikonu Apple:

• Žiadna priehľadnosť. iOS vypĺňa priehľadné pixely čiernou, takže priehľadné logo sa často zmení na čiernu škvrnu. Pridajte jednofarebné pozadie.
• Žiadne zaoblené rohy. iOS použije vlastnú zaoblenú masku. Dodajte celý štvorec.
• Dôležitý obsah udržujte ďalej od okrajov, pretože rohy sa orežú.

Kedy potrebujete staršie veľkosti (57, 72, 76, 114, 120, 144, 152, 167)? Iba ak podporujete iOS 6 alebo starší, alebo chcete presnú kontrolu pixelov pre jednotlivé zariadenia pri iPade Pro (167 px) a iPade (152 px). Pre takmer každý web v roku 2026 postačuje samotný súbor 180x180. Konfigurácia s maximálnou kompatibilitou nižšie obsahuje niekoľko z nich pre úplnosť.

Ikony pre Android a PWA: 192, 512 a maskable

Chrome v Androide a ďalšie prehliadače podporujúce PWA čítajú ikony z manifestu webovej aplikácie, nie z <link rel="icon">. Pre inštalovateľnosť potrebujete minimálne PNG 192x192 a 512x512. Ikona 192 px sa používa na domovskej obrazovke a v spúšťači aplikácií; ikona 512 px sa zobrazuje na úvodných obrazovkách a v inštalačných dialógoch.

Maskable ikony a bezpečná zóna

Adaptívne ikony Androidu sa môžu orezať do kruhu, squircle alebo iného tvaru v závislosti od zariadenia. Maskable ikona je navrhnutá tak, aby sa dala bezpečne orezať: dôležitý obsah musí byť vnútri bezpečnej zóny, vycentrovaného kruhu s priemerom 80 % obrázka (polomer sa rovná 40 % strany). Pri súbore 512x512 to znamená držať logo v kruhu s priemerom približne 410 px a rozšíriť farbu pozadia až ku všetkým štyrom okrajom, aby po maskovaní nevznikli medzery.

Maskable ikonu deklarujte ako samostatný záznam s "purpose": "maskable". Nepoužívajte "any maskable" na jednom súbore: odsadenie potrebné na maskovanie pôsobí príliš malé, keď sa ikona zobrazí bez masky.

Príklad 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"
    }
  ]
}

Poskytujte súbor ako application/manifest+json (alebo application/json) a odkážte naň z každej stránky pomocou <link rel="manifest" href="/manifest.json">. Niektoré projekty ho pomenúvajú site.webmanifest; na názve nezáleží, záleží na odkaze.

Dlaždice pre Windows a browserconfig.xml

Windows 8.1 a 10 umožňujú používateľom pripnúť web do ponuky Štart a IE11 a starší Edge čítajú obrázky dlaždíc zo súboru browserconfig.xml. Obvyklé veľkosti sú 70x70 (malá), 150x150 (stredná), 310x150 (široká) a 310x310 (veľká). Edge založený na Chromiu používa namiesto toho manifest a bežné favicon, takže ide o staršiu funkciu. Zahrňte ju iba vtedy, ak vaše publikum stále zahŕňa staršie konfigurácie Windows, napríklad vo firemnom prostredí.

<?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: farebné ladenie rozhrania prehliadača

Meta tag theme-color hovorí mobilným prehliadačom (a niektorým desktopovým), akú farbu použiť pre adresný riadok alebo záhlavie okna. Nie je to favicon, ale patrí do tej istej brandingovej sady. Môžete zadať samostatné hodnoty pre svetlý a tmavý režim:

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

Minimálna moderná konfigurácia vs. maximálna kompatibilita

Minimálna moderná konfigurácia (odporúčaná pre väčšinu webov)

Päť súborov pokryje viac ako 99 % reálneho použitia: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) a dve ikony v manifeste (192 a 512). Pridajte PNG 96x96, ak vám záleží na viditeľnosti vo Vyhľadávaní Google, a maskable ikonu, ak nasadzujete 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">

Konfigurácia s maximálnou kompatibilitou

Zvoľte ju, keď obsluhujete široké alebo podnikové publikum, alebo keď chcete pokryť každého možného klienta. Pridáva explicitné veľkosti PNG, staršie veľkosti Apple, dlaždice pre Windows a farby tém.

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

Všimnite si cesty relatívne ku koreňu, ktoré začínajú znakom /. Fungujú v akejkoľvek hĺbke stránky, čo nás privádza k najčastejším chybám.

Časté chyby pri favicon a ako ich opraviť

1. Nesprávne cesty

Odkaz ako href="favicon.ico" sa vyhodnocuje relatívne k aktuálnej adrese URL, takže funguje na /, ale na /blog/post/ sa pokazí. Používajte cesty relatívne ku koreňu (/favicon.ico) alebo absolútne adresy URL. Skontrolujte tiež, či súbory skutočne existujú: otvorte každú adresu URL priamo v prehliadači a uistite sa, že vracia HTTP 200, nie presmerovanie na stránku 404 alebo prihlasovaciu stránku.

2. Chýbajúci alebo nesprávny atribút sizes

Bez sizes si prehliadače musia ikony stiahnuť, aby ich preskúmali, a môžu vybrať nesprávnu. Vždy uvádzajte sizes pri odkazoch na PNG a uistite sa, že zodpovedá skutočným rozmerom v pixeloch. Súbor označený 32x32, ktorý má v skutočnosti 64x64, spôsobuje nekonzistentné výsledky.

3. Agresívne ukladanie do vyrovnávacej pamäte

Prehliadače ukladajú favicon do vyrovnávacej pamäte na dlhý čas, často nezávisle od vyrovnávacej pamäte stránky. Po zmene brandingu môže stará ikona zostať zobrazená aj niekoľko dní. Zmeňte názov súboru alebo pridajte verziu do reťazca dopytu (/favicon.ico?v=2) a aktualizujte značky link. Tvrdé opätovné načítanie často ikonu karty neobnoví; zvyčajne pomôže otvoriť adresu URL ikony priamo a obnoviť ju.

4. Neštvorcové obrázky

Favicon musí byť štvorcový. Obdĺžnikové logo sa nepredvídateľne roztiahne, orezá alebo dostane okraje. Navrhnite samostatnú štvorcovú značku, napríklad iniciálu alebo symbol, namiesto zmenšovania širokého logotypu.

5. Priehľadné Apple touch icon, ktoré zčernejú

iOS vypĺňa priehľadnosť čiernou. Dajte ikone 180x180 nepriehľadné pozadie a rohy vopred nezaobľujte.

6. Maskable ikony bez bezpečnej zóny

Ak sa logo dotýka okrajov maskable ikony, Android ho odreže. Udržujte ho vo vnútri stredového kruhu s 80 % a celé plátno vyplňte farbou pozadia.

7. Blokovanie ikon pre prehľadávače

Ak robots.txt zakazuje cestu k vášmu favicon, Google ho nemôže načítať a vo výsledkoch vyhľadávania zobrazí všeobecnú ikonu glóbusu. Pamätajte tiež, že Google potrebuje favicon na rovnakom hostiteľovi ako stránka a obnovuje ho len občas, takže zmeny sa môžu prejaviť až po dňoch či týždňoch.

8. Zabudnutý odkaz na manifest alebo chýbajúce purposes

Manifest, ktorý nie je prepojený alebo v ktorom chýbajú ikony 192 a 512 px, bráni zobrazeniu výzvy na inštaláciu v Chrome. Overte ho vo vývojárskych nástrojoch prehliadača na karte Application.

Vygenerujte celú sadu jedným kliknutím

Vytváranie tucta súborov ručne v grafickom editore, ich následná konverzia do ICO a písanie manifestu je zdĺhavé a náchylné na chyby. MakeFav vygeneruje všetky vyššie uvedené súbory z jedného obrázka, textu alebo emoji: viacveľkostný favicon.ico, PNG, SVG, Apple touch icon, PNG 192/512, maskable ikonu, dlaždice pre Windows, manifest.json a browserconfig.xml, plus hotový HTML úryvok na vloženie, a to všetko v jednom stiahnuteľnom ZIP-e. Pozadie, odsadenie a tvar môžete doladiť v editore, existujúci web overiť pomocou kontroly favicon a generovanie automatizovať cez zdroje pre vývojárov.

Kontrolný zoznam nasadenia

1. Nahrajte všetky súbory do koreňa svojho webu.
2. Vložte HTML úryvok do <head> každej stránky (alebo do zdieľanej šablóny).
3. Uistite sa, že cesty sú relatívne ku koreňu a vracajú HTTP 200.
4. Skontrolujte svetlý a tmavý režim, inštaláciu na domovskú obrazovku iOS a inštaláciu v Androide.
5. Spustite kontrolu, aby ste odhalili chýbajúce alebo nezhodné veľkosti.
6. Ak ste nahradili starú ikonu, obíďte vyrovnávaciu pamäť pomocou reťazca s verziou.

Často kladené otázky

Potrebujem v roku 2026 stále favicon.ico?

Áno. Hoci moderné prehliadače akceptujú PNG a SVG, mnohé prehľadávače, čítačky kanálov, e-mailoví klienti a staršie prehliadače si stále pýtajú priamo /favicon.ico. Viacveľkostné ICO s obrázkami 16, 32 a 48 px je malý súbor, ktorý zabráni chýbajúcim ikonám a chybám 404.

Akú veľkosť by mal mať favicon pre Vyhľadávanie Google?

Google vyžaduje štvorcový favicon, ktorého veľkosť je násobkom 48 px, minimálne 48x48. Bezpečnou voľbou je PNG 96x96, podporované je aj SVG. Google tiež potrebuje, aby bol súbor prehľadateľný, preto ho neblokujte v robots.txt. Aktualizácie sa môžu prejaviť až po dňoch či týždňoch.

Stačí 180x180 pre Apple touch icon?

Pre takmer všetky weby áno. iOS a iPadOS zmenšia PNG 180x180 pre každé aktuálne zariadenie. Staršie veľkosti (57 až 152 px) sú dôležité len pre veľmi staré verzie iOS. Nezabudnite použiť nepriehľadné pozadie, aby ikona nezčernela.

Čo je maskable ikona a potrebujem ju?

Maskable ikona je PNG 512x512 navrhnuté pre adaptívne tvary ikon Androidu. Jej dôležitý obsah sa nachádza vo vnútri kruhu s priemerom 80 % v strede a pozadie vypĺňa celý štvorec. Potrebujete ju iba vtedy, ak ponúkate inštalovateľnú PWA, ale vďaka nej ikona vyzerá natívne a nezostane v bielom kruhu.

Prečo sa moja stará favicon stále zobrazuje, hoci som ju zmenil?

Prehliadače ukladajú favicon do vyrovnávacej pamäte osobitne a na dlhý čas. Premenujte súbor alebo pridajte verziu do reťazca dopytu, napríklad ?v=2, aktualizujte značky link a potom otvorte adresu URL ikony priamo a obnovte ju. Vyhľadávačom môže trvať dlhšie, kým obnovia svoju vlastnú kópiu.