Co je favicona a jak ji vyrobit z loga (2026)

Favicona je maličká ikona, která zastupuje váš web v záložce prohlížeče, v záložkách nebo na ploše telefonu. Vyrobte ji ze značky svého loga, zjednodušte ji, aby se četla v 16–32 pixelech, a dodejte minimální sadu pro rok 2026: SVG, ICO jako záložní a 180×180 apple-touch-icon.

Autor LogoSagaPublikováno
Na této stránce
  1. Co je favicona?
  2. Proč na faviconě záleží?
  3. Velikosti a formáty favicony, které potřebujete
  4. Jak vyrobit faviconu z loga
  5. Odkázání favicony v HTML
  6. Bonus: favicona, která se přizpůsobí tmavému režimu
  7. Otestování favicony
Totéž značka ve velikostech favicony, včetně verze pro záložku prohlížeče.
Favicona je značka vašeho loga, zjednodušená, aby zůstala jasná v maličkých velikostech.

Co je favicona?

Favicona (z „favorite icon“) je malý čtvercový obrázek, který zastupuje web v záložce prohlížeče, v záložkách, v historii a na ploše telefonu. Téměř vždy je to zjednodušená verze loga značky — konkrétně značky, protože na celý název v té velikosti není místo.

Proč na faviconě záleží?

Favicona je malý, ale stálý kus brandingu. S tuctem otevřených záložek je často jediný způsob, jak někdo váš web na první pohled najde, a ikona uložená na plochu sedí vedle vypilovaných ikon aplikací. Ostrá, značce věrná favicona vypadá promyšleně; chybějící nebo rozmazaná působí nedodělaně.

Velikosti a formáty favicony, které potřebujete

Tucet ikon, které staré návody vypisují, nepotřebujete. V roce 2026 je minimální, spolehlivá sada malá:

SouborVelikostÚčel
favicon.svgjakákolimoderní prohlížeče; umí tmavý režim
favicon.ico16 + 32záložní (starší prohlížeče)
apple-touch-icon.png180×180plocha iOS
PWA ikony (volitelné)192, 512instalovatelné webové aplikace

Velikosti jako 64×64, 96×96 a 128×128, které staré návody doporučují, jsou zastaralé — vynechte je. .ico je záložní, ne hlavní soubor: prohlížeče s podporou SVG dají přednost jemu.

Jak vyrobit faviconu z loga

  1. Začněte značkou, ne celým logem — název se v záložce nepřečte.
  2. Zjednodušte pro maličké velikosti. Zahoďte jemný detail, tenké linky a jemné přechody, které v 16–32 pixelech zmizí. Preferujte odvážné tvary a vysoký kontrast.
  3. Držte to čtvercové s trochou okraje, aby to nebylo namačkané na okraje záložky.
  4. Exportujte sadu — SVG, ICO a 180×180 PNG — z vektorového masteru svého loga.
Krok exportu v editoru LogoSaga, kde je favicon.svg zahrnut se soubory loga.
Export z vektorového masteru dá faviconu, která přesně odpovídá logu.

Protože SVG je ideální master formát, vyplatí se rozumět SVG vs PNG pro loga, než začnete exportovat.

Odkázání favicony v HTML

Na soubory odkažte z <head> svých stránek. Moderní, minimální sada vypadá takto:

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

Prohlížeče s podporou SVG použijí SVG; ostatní spadnou zpět na ICO.

Bonus: favicona, která se přizpůsobí tmavému režimu

SVG favicona umí nést vlastní styl pro tmavý režim. Vložte dovnitř SVG media query, aby značka měnila barvy podle motivu prohlížeče:

<style>
  path {
    fill: #18231d;
  }
  @media (prefers-color-scheme: dark) {
    path {
      fill: #eef1ea;
    }
  }
</style>

Chrome, Firefox a Edge to ctí; Safari zatím ne, tak jako záložní zvolte barvy čitelné na obou motivech.

Otestování favicony

Zkontrolujte ji v reálné záložce prohlížeče, ve světlém i tmavém, a na ploše telefonu. Protože prohlížeče favicony tvrdě cachují, po každé změně tvrdě obnovte — nebo vynuťte cache přejmenováním souboru či přidáním ?v=2. Pokud vypadá kalně v záložce, značku dál zjednodušte: favicona je poctivý test toho, jak dobře se logo zmenšuje.

Pokud si logo vytvoříte v LogoSaga, export už obsahuje favicon.svg vedle SVG a PNG loga, takže favicona vždy přesně odpovídá značce.

Vytvořte logo s odpovídající faviconou

Časté dotazy

Jakou velikost má mít favicona?

Dodejte škálovatelné SVG plus rastrové PNG velikosti: 32×32 je moderní standard pro záložky, 16×16 klasická malá velikost a 180×180 Apple touch icon. PWA navíc potřebují 192×192 a 512×512.

Jaký formát má favicona být — SVG, PNG, nebo ICO?

Použijte SVG pro moderní prohlížeče, ICO jako záložní pro starší a PNG pro apple-touch-icon a PWA velikosti. SVG je škálovatelné a umí se přizpůsobit tmavému režimu; ICO pokryje starší prohlížeče.

Může se favicona měnit v tmavém režimu?

Ano, s SVG faviconou. Vložte dovnitř SVG media query prefers-color-scheme a definujte světlé a tmavé barvy. Safari ji zatím nectí, tak zvolte neutrální barvu čitelnou na obojím.

Proč se moje favicona nezobrazuje nebo neaktualizuje?

Prohlížeče favicony agresivně cachují. Po změně tvrdě obnovte, nebo vynuťte cache přejmenováním souboru či přidáním query stringu jako favicon.svg?v=2, a ověřte, že link tagy v hlavičce stránky jsou správně.

Zdroje