Favicon (zkratka pro favorite icon) je malá ikonka, která se zobrazuje v záložce prohlížeče vedle názvu webu, v oblíbených položkách nebo třeba v mobilních záložkách. I když je malá, hraje důležitou roli – zlepšuje rozpoznatelnost webu a působí profesionálně.
Obsah článku
Jak vytvořit favicon pro web
V tomto návodu vám ukážu, jak favicon vytvořit a nastavit.
1. Jaké má favicon rozměry a formáty
Nejdůležitější je připravit favicon ve správných rozměrech a formátu.
Dříve se používal soubor favicon.ico, dnes už lze využívat i modernější formáty.
| Rozměr | Doporučení použití |
|---|---|
| 16×16 px | klasický favicon do prohlížeče |
| 32×32 px | ikona pro moderní prohlížeče |
| 48×48 px | Windows ikony |
| 180×180 px | Apple iOS (ikonka na ploše) |
| 512×512 px | Android a PWA aplikace |
Nejlepší je vytvořit favicon ve větším rozlišení (např. 512×512 px ve formátu PNG nebo SVG) a pak jej zmenšit do potřebných velikostí.
2. Jak vytvořit favicon
Možností máte hned několik:
- Grafické programy – Photoshop, GIMP, Affinity Designer
→ vytvoříte ikonu ručně a uložíte jako PNG, ICO nebo SVG. - Generátory favicon online
- favicon.io
- realfavicongenerator.net
Tyto nástroje vám vygenerují všechny potřebné formáty a kód pro vložení do webu.
- Použití loga – většina webů jednoduše zmenší své logo do formátu čtverce a uloží ho jako favicon.
3. Jak nastavit favicon na webu
Jakmile máte připravený soubor favicon.ico nebo favicon.png, stačí jej nahrát na server a propojit s webem.
Vložte do sekce <head> svého HTML kód:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.png" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Pokud používáte WordPress, většina šablon má možnost nahrát favicon přímo v Nastavení → Vzhled → Přizpůsobit → Identita webu.
4. Tipy pro favicon
- Ikona by měla být jednoduchá a čitelná i v malém rozlišení.
- Ideálně používejte SVG nebo PNG s průhledným pozadím.
- Otestujte favicon na více zařízeních (PC, Android, iOS).
- Pokud chcete profesionální řešení, použijte Realfavicongenerator, který vám dá i náhledy pro různé platformy.
Favicon generator
Jako první je potřeba mít logo stránek, ideálně ve čtvercovém tvaru a s průhledným pozadím. Následně tento obrázek nahrajete na web https://favicomatic.com/. Na hlavní stránce kliknete na tlačítko Upload your image a vyberete z disku vaše počítače požadované logo.
Během chvíle se vám vygeneruje ikonka jak ve formátu 16×16 tak i 32×32 pixelů.
Kam nahrát soubor
Poté tento soubor stačí nahrát do kořenového adresáře webu (rootu) a bude se jmenovat favicon.ico.
V některých šablonách WordPress lze ikonu stránek nahrát přímo v administraci, bez použití externích webů.
V tématu Generatepress to lze přes volby Vzhled – Přizpůsobit – Základní informace a Ikona webu.
U šablony Mh Theme to nastavíte také přes volbu Vzhled – Přizpůsobit – Základní informace a Vybrat ikonu webu.
Často kladené otázky
Nejčastěji se používá PNG nebo ICO. SVG je moderní varianta s podporou v novějších prohlížečích.
Nejčastěji do kořenového adresáře webu (/favicon.ico), protože některé prohlížeče ji tam hledají automaticky.
Může jít o cache prohlížeče. Zkuste vymazat cache nebo favicon pojmenovat jinak a znovu vložit do HTML.
Není, ale bez ní web působí nedodělaně. Doporučuje se ji vždy nastavit.
Buďte první kdo přidá komentář