Jaké velikosti favicon potřebujete v roce 2026? Ideální sada

V roce 2026 vypadá ideální sada favicon takto: soubor favicon.ico obsahující obrázky 16, 32 a 48 px, PNG 96x96 (pro Google Search), volitelná favicona ve formátu SVG, apple-touch-icon.png 180x180 a PNG 192x192 a 512x512 (plus maskable 512) deklarované ve web app manifestu. Dlaždice pro Windows a starší velikosti pro Apple jsou potřeba, jen pokud musíte podporovat opravdu staré zařízení. Níže vysvětlujeme proč, a to s tabulkou velikostí, hotovým HTML a běžnými chybami, kterým se vyhnout.

Svět favicon býval chaotický: každý prohlížeč a operační systém chtěl vlastní velikost, což vedlo k nechvalně známým dvacetiřádkovým blokům <head>. Dnes je většina z toho zastaralá. Moderní prohlížeče si poradí s jednou dobrou ikonou, iOS chce jednu velikost a Android čte manifest. Tento článek odděluje to, co je skutečně nutné, od toho, co je jen příjemný bonus.

Stručná odpověď: ideální sada souborů favicon

• favicon.ico (16, 32, 48 px v jednom souboru) v kořenovém adresáři webu. Prohlížeče, čtečky kanálů a mnoho nástrojů si stále automaticky vyžádá /favicon.ico.
• favicon.svg (volitelné, ale doporučené) pro ostré zobrazení v jakékoli velikosti a podporu tmavého režimu.
• PNG 16x16, 32x32 a 96x96 jako explicitní záloha. Verze 96 px pomáhá ve vyhledávání Google, které vyžaduje násobek 48 px.
• apple-touch-icon.png ve velikosti 180x180, neprůhledná, bez průhlednosti.
• PNG 192x192 a 512x512 v souboru manifest.json, plus maskable ikona 512x512 pro Android.
• Meta tag theme-color pro obarvení uživatelského rozhraní prohlížeče na mobilu.
• Dlaždice pro Windows (70, 150, 310 px) se souborem browserconfig.xml jen pro starší Windows a připnuté weby v IE11.

Tabulka velikostí favicon: účel, názvy souborů a priorita

Použijte tuto tabulku jako kontrolní seznam. "Povinné" znamená, že běžný web bez toho bude vypadat rozbitě nebo nedokončeně; "Doporučené" znamená jasné zlepšení kvality; "Volitelné" znamená okrajové nebo zastaralé použití.

favicon.ico: 16, 32 a 48 px v jednom souboru

Soubor ICO je kontejner, který obsahuje několik bitmap. Dobrý favicon.ico zahrnuje obrázky 16x16, 32x32 a 48x48, aby si prohlížeč nebo OS mohl vybrat nejbližší odpovídající. Umístěte jej do kořene své domény (https://example.com/favicon.ico). I když vaše HTML ukazuje jinam, mnoho crawlerů, RSS čteček a starších prohlížečů si stále vyžádá přesně tuto adresu, takže jeho existence vám ušetří záznamy o chybách 404 v logu.

Jednoduše nepřejmenovávejte PNG na .ico. Většina prohlížečů to toleruje, ale některé nástroje takový soubor odmítnou a přijdete o výhodu více rozlišení. Exportujte skutečné ICO.

Favicony PNG: 16, 32 a 96 px

Odkazy na PNG s explicitním atributem sizes umožní prohlížeči vybrat nejlepší bitmapu, aniž by musel zpracovávat ICO. V praxi 32x32 pokrývá karty na displejích s vysokým DPI a 16x16 je dnes téměř nadbytečné. Velikost 96x96 stojí za přidání, protože Google Search zobrazuje favicony vedle výsledků a vyžaduje čtvercovou ikonu, jejíž velikost je násobkem 48 px (48x48, 96x96, 144x144 a tak dále). Soubor 96 px dává Googlu ostřejší zdroj než 48 px, když ho zmenšuje pro mobilní výsledky.

Tip pro návrh: v 16 px zmizí jemné detaily. Používejte výrazný, jednoduchý tvar, vysoký kontrast a málo textu nebo žádný. Ikonu můžete před exportem upravit a zobrazit si její náhled v editoru MakeFav.

Favicona SVG a tmavý režim

Favicona SVG je jediný drobný soubor, který zůstává ostrý při jakékoli hustotě displeje. Podporují ji prohlížeče založené na Chromiu a Firefox. Podpora v Safari byla historicky omezená, proto se nikdy nespoléhejte jen na SVG: ponechte zálohy ICO a PNG.

Největší výhodou je přizpůsobení vzhledu. Protože SVG může obsahovat CSS, můžete ikonu přizpůsobit barevnému schématu uživatele pomocí 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>

Všimněte si, že media query odráží motiv prohlížeče nebo OS, který používá lišta karet. Nesleduje přepínač motivu na vašem vlastním webu.

Jedna známá zvláštnost: když je uvedeno ICO i SVG, Chrome může vybrat ICO. Deklarujete-li ICO s sizes="32x32" a SVG uvedete až poté, Chrome dá přednost SVG, jak ukazuje kód níže.

Apple touch icon: 180x180 a starší velikosti

Když uživatel přidá váš web na plochu iOS nebo iPadOS, Safari použije apple-touch-icon. Dnes stačí jediné PNG 180x180 px: iOS ho zmenší pro starší zařízení a iPady. Pojmenujte ho apple-touch-icon.png a umístěte do kořene; iOS tento soubor dokonce hledá ve výchozím nastavení, pokud neexistuje žádný tag link.

Pravidla pro ikonu Apple:

• Žádná průhlednost. iOS vyplní průhledné pixely černou, takže průhledné logo se často změní v černou kaňku. Přidejte plnou barvu pozadí.
• Žádné zaoblené rohy. iOS aplikuje vlastní zaoblenou masku. Dodejte plný čtverec.
• Důležitý obsah držte dál od samotných okrajů, protože rohy jsou oříznuty.

Kdy potřebujete starší velikosti (57, 72, 76, 114, 120, 144, 152, 167)? Jen pokud podporujete iOS 6 nebo starší, nebo chcete přesnou kontrolu nad pixely pro jednotlivá zařízení u iPadu Pro (167 px) a iPadu (152 px). Pro téměř každý web v roce 2026 stačí samotný soubor 180x180. Nastavení s maximální kompatibilitou níže obsahuje pro úplnost několik z nich.

Ikony pro Android a PWA: 192, 512 a maskable

Chrome na Androidu a další prohlížeče podporující PWA čtou ikony z web app manifestu, nikoli z <link rel="icon">. Pro instalovatelnost potřebujete alespoň PNG 192x192 a 512x512. Ikona 192 px se používá na ploše a v launcheru aplikací; ikona 512 px se objevuje na úvodních obrazovkách a v instalačních dialozích.

Maskable ikony a bezpečná zóna

Adaptivní ikony Androidu mohou být oříznuty do kruhu, squirclu nebo jiného tvaru podle zařízení. Maskable ikona je navržena tak, aby šla bezpečně oříznout: důležitý obsah musí ležet uvnitř bezpečné zóny, vycentrovaného kruhu o průměru 80 % obrázku (poloměr se rovná 40 % strany). U souboru 512x512 to znamená držet logo uvnitř kruhu o průměru přibližně 410 px a rozšířit barvu pozadí ke všem čtyřem okrajům, aby po maskování nezůstaly žádné mezery.

Deklarujte maskable ikonu jako samostatnou položku s "purpose": "maskable". Vyhněte se "any maskable" u jednoho souboru: odsazení potřebné pro maskování vypadá příliš malé, když se ikona zobrazí bez masky.

Příklad souboru 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"
    }
  ]
}

Soubor servírujte s typem application/manifest+json (nebo application/json) a odkazujte na něj z každé stránky pomocí <link rel="manifest" href="/manifest.json">. Některé projekty ho pojmenovávají site.webmanifest; na názvu nezáleží, záleží na odkazu.

Dlaždice Windows a browserconfig.xml

Windows 8.1 a 10 umožňují uživatelům připnout web do nabídky Start a IE11 a starší Edge čtou obrázky dlaždic ze souboru browserconfig.xml. Obvyklé velikosti jsou 70x70 (malá), 150x150 (střední), 310x150 (široká) a 310x310 (velká). Edge založený na Chromiu místo toho používá manifest a běžné favicony, takže jde o zastaralou funkci. Zahrňte ji jen tehdy, pokud vaše publikum stále zahrnuje starší konfigurace Windows, například v podnikovém prostředí.

<?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: obarvení uživatelského rozhraní prohlížeče

Meta tag theme-color říká mobilním prohlížečům (a některým desktopovým), jakou barvu použít pro adresní řádek nebo záhlaví okna. Není to favicona, ale patří ke stejné sadě brandingu. Můžete zadat samostatné hodnoty pro světlý 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ální moderní nastavení vs. maximální kompatibilita

Minimální moderní nastavení (doporučené pro většinu webů)

Pět souborů pokryje více než 99 % reálného použití: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) a dvě ikony manifestu (192 a 512). Přidejte PNG 96x96, pokud vám záleží na viditelnosti ve vyhledávání Google, a maskable ikonu, pokud nasazujete 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">

Nastavení s maximální kompatibilitou

Zvolte ho, když obsluhujete široké nebo podnikové publikum, nebo když chcete pokrýt každého možného klienta. Přidává explicitní velikosti PNG, starší velikosti Apple, dlaždice Windows a barvy motivu.

<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šimněte si cest relativních ke kořeni, které začínají znakem /. Fungují v jakékoli hloubce stránky, což nás přivádí k nejčastějším chybám.

Časté chyby u favicon a jak je opravit

1. Špatné cesty

Odkaz jako href="favicon.ico" se vyhodnocuje relativně k aktuální adrese URL, takže funguje na /, ale selže na /blog/post/. Používejte cesty relativní ke kořeni (/favicon.ico) nebo absolutní adresy URL. Zkontrolujte také, že soubory skutečně existují: otevřete každou adresu přímo v prohlížeči a ujistěte se, že vrací HTTP 200, nikoli přesměrování na stránku 404 nebo přihlašovací zeď.

2. Chybějící nebo špatný atribut sizes

Bez sizes si prohlížeče musí ikony stáhnout, aby je prozkoumaly, a mohou vybrat špatnou. Vždy uvádějte sizes u odkazů na PNG a ujistěte se, že odpovídá skutečným rozměrům v pixelech. Soubor označený jako 32x32, který má ve skutečnosti 64x64, způsobuje nekonzistentní výsledky.

3. Agresivní cachování

Prohlížeče ukládají favicony do cache na dlouhou dobu, často nezávisle na cache stránky. Po změně brandingu se stará ikona může držet několik dní. Změňte název souboru nebo přidejte verzi do query stringu (/favicon.ico?v=2) a aktualizujte tagy link. Tvrdé obnovení stránky ikonu karty často neaktualizuje; obvykle pomůže otevřít adresu ikony přímo a znovu ji načíst.

4. Nečtvercové obrázky

Favicony musí být čtvercové. Obdélníkové logo se nepředvídatelně roztáhne, ořízne nebo se zobrazí s pruhy. Navrhněte samostatnou čtvercovou značku, například iniciálu nebo symbol, místo zmenšování širokého logotypu.

5. Průhledné ikony Apple touch, které zčernají

iOS vyplňuje průhlednost černou. Dejte ikoně 180x180 neprůhledné pozadí a rohy předem nezaoblujte.

6. Maskable ikony bez bezpečné zóny

Pokud se logo dotýká okrajů maskable ikony, Android ho odřízne. Držte ho uvnitř středového kruhu o 80 % a celé plátno vyplňte barvou pozadí.

7. Blokování ikon pro crawlery

Pokud robots.txt zakazuje cestu k vaší faviconě, Google ji nemůže načíst a ve výsledcích vyhledávání zobrazí obecnou ikonu zeměkoule. Pamatujte také, že Google potřebuje, aby byla favicona na stejném hostiteli jako stránka, a obnovuje ji jen občas, takže změny se mohou projevit až za dny či týdny.

8. Zapomenutý odkaz na manifest nebo chybějící purpose

Manifest, který není propojen nebo nemá ikony 192 a 512 px, brání zobrazení výzvy k instalaci v Chrome. Ověřte ho ve vývojářských nástrojích prohlížeče na záložce Application.

Vygenerujte celou sadu jedním kliknutím

Vytvářet tucet souborů ručně v obrazovém editoru, pak je převádět na ICO a psát manifest je zdlouhavé a náchylné k chybám. MakeFav vygeneruje všechny výše uvedené soubory z jediného obrázku, textu nebo emoji: víceveliskostní favicon.ico, PNG, SVG, Apple touch icon, PNG 192/512, maskable ikonu, dlaždice Windows, manifest.json a browserconfig.xml, plus HTML úryvek připravený k vložení, a to vše v jednom stažení ZIP. Pozadí, odsazení a tvar můžete doladit v editoru, existující web ověřit pomocí kontroly favicon a generování zautomatizovat přes zdroje pro vývojáře.

Kontrolní seznam pro nasazení

1. Nahrajte všechny soubory do kořene svého webu.
2. Vložte HTML úryvek do <head> každé stránky (nebo do sdíleného layoutu).
3. Ujistěte se, že cesty jsou relativní ke kořeni a vracejí HTTP 200.
4. Vyzkoušejte světlý i tmavý režim, instalaci na plochu iOS a instalaci na Android.
5. Spusťte kontrolu, která odhalí chybějící nebo nesouhlasící velikosti.
6. Pokud jste nahradili starou ikonu, obejděte cache pomocí řetězce s verzí.

Často kladené otázky

Potřebuji v roce 2026 stále favicon.ico?

Ano. Ačkoli moderní prohlížeče akceptují PNG a SVG, mnoho crawlerů, čteček kanálů, e-mailových klientů a starších prohlížečů si stále vyžádá přímo /favicon.ico. Víceveliskostní ICO s obrázky 16, 32 a 48 px je malý soubor, který předchází chybějícím ikonám a chybám 404.

Jak velká má být favicona pro vyhledávání Google?

Google vyžaduje čtvercovou faviconu, jejíž velikost je násobkem 48 px, minimálně 48x48. PNG 96x96 je bezpečná volba a podporováno je také SVG. Google také potřebuje, aby byl soubor procházitelný, takže ho neblokujte v souboru robots.txt. Aktualizace se mohou projevit až za dny či týdny.

Stačí 180x180 pro Apple touch icon?

Pro téměř všechny weby ano. iOS a iPadOS zmenší PNG 180x180 pro každé současné zařízení. Starší velikosti (57 až 152 px) mají význam jen pro velmi staré verze iOS. Nezapomeňte použít neprůhledné pozadí, aby ikona nezčernala.

Co je maskable ikona a potřebuji ji?

Maskable ikona je PNG 512x512 navržené pro adaptivní tvary ikon Androidu. Její důležitý obsah leží uvnitř kruhu o průměru 80 % uprostřed a pozadí vyplňuje celý čtverec. Potřebujete ji jen tehdy, pokud nabízíte instalovatelnou PWA, ale díky ní ikona působí nativně a neleží v bílém kruhu.

Proč se stará favicona stále zobrazuje, i když jsem ji změnil(a)?

Prohlížeče ukládají favicony do cache samostatně a na dlouhou dobu. Přejmenujte soubor nebo přidejte verzi do query stringu, například ?v=2, aktualizujte tagy link a poté otevřete adresu ikony přímo a znovu ji načtěte. Vyhledávačům může obnovení jejich vlastní kopie trvat déle.