Co je favicon?
Favicon je malá ikonka webu, která se zobrazuje v panelu prohlížeče, záložkách, historii, vyhledávání a často i na domovské obrazovce mobilu při přidání webu jako zástupce. Pomáhá rozpoznatelnosti značky, zvyšuje důvěryhodnost a zlepšuje UX.
Doporučené formáty a velikosti
- SVG (pokud je možné): ostré na všech zařízeních, lehké.
- PNG: běžná volba (průhledné pozadí).
- ICO: historicky nutné pro starší prohlížeče, dnes spíše doplněk.
Velikosti (praktický set):
- 16×16 (klasická favicon)
- 32×32 (HiDPI)
- 180×180 (Apple touch icon)
- 192×192 a 512×512 (Android/Chrome – PWA)
Tip: Exportujte min. 32×32 PNG + 180×180 PNG + 512×512 PNG. Pokud můžete, přidejte SVG.
Jak favicon rychle vytvořit
- Vezměte logo/symbol v jednoduchém tvaru (bez drobných detailů).
- Exportujte do SVG a PNG (viz velikosti výše).
- Otestujte kontrast na tmavém i světlém pozadí.
Jak favicon nastavit ve WordPressu (nejrychlejší cesta)
- Nastavení → Vzhled → Přizpůsobit → Identita webu
- Nahrajte Ikonu webu (Site Icon) – WP sám vytvoří varianty.
- Uložte změny a vyprázdněte cache (pokud používáte plugin na cachování).
Jak favicon nastavit na statickém webu
Nahrajte soubory do kořenové složky webu a vložte do <head>:
<link rel=”icon” href=”/favicon.svg” type=”image/svg+xml”>
<link rel=”alternate icon” href=”/favicon.ico”>
<link rel=”apple-touch-icon” sizes=”180×180″ href=”/apple-touch-icon.png”>
<link rel=”icon” type=”image/png” sizes=”32×32″ href=”/favicon-32.png”>
<link rel=”icon” type=”image/png” sizes=”16×16″ href=”/favicon-16.png”>
Poznámka: Mnoho moderních prohlížečů vezme /favicon.ico automaticky, ale explicitní <link> je spolehlivější.
Časté chyby
- Příliš detailní logo (v malém rozměru se „rozpadne“).
- Chybí varianta pro Apple/Android, ikona je pak ořezaná nebo rozmazaná.
- Špatný kontrast (ikona splývá s UI prohlížeče).
- Cache – po výměně ikony se dlouho zobrazuje stará. Vymažte cache prohlížeče / CDN.
Rychlá kontrola
- Otevřete web v anonymním okně → favikonka se zobrazuje?
- Připněte stránku na mobilní domovskou obrazovku → ikona je ostrá?
- Zkontrolujte rozlišení v devtools (Network → požadavky na favicon).
FAQ
Je SVG favicon bezpečná volba?
Ano, moderní prohlížeče ji podporují a je perfektně ostrá. Mějte ale i PNG fallback.
Musím mít .ico soubor?
U starších prohlížečů se hodí, ale většině webů dnes stačí SVG/PNG + správné <link>.
Proč se mi stále zobrazuje stará ikonka?
Cache. Vyčistěte prohlížeč, CDN a případně změňte název souboru (cache-buster).
