Představte si to: Procházíte spoustu otevřených záložek v prohlížeči na mobilu a najednou vás upoutá maličká ikona, která vám okamžitě připomene váš oblíbený web. To je favicon – žádná maličkost, ale opravdový maják pro návštěvníky. Jeden náš klient z e-commerce měl bez faviconu CTR v Google vyhledávání jen ubohých 0,8 %. Přidali jsme ikonu a hned to vyskočilo na 1,5 %! To znamenalo stovky navíc kliků každý měsíc. V roce 2025 jsou favicony ještě důležitější díky aktualizovaným doporučením Google, kde se zdůrazňuje vysoké rozlišení a formát SVG. Tento článek vám ukáže, jak favicon rychle vytvořit bez nutnosti být designérským guru, a jak ho zapojit do webu. Navíc se podělíme o praktické rady, aby váš site vypadal profesionálně a přitahoval víc návštěvníků.
Favicon (z anglického "favorite icon") je ta čtvercová ikonka spojená s vaším webem. Obvykle jde o zjednodušené logo, první písmeno značky nebo symbol, který vystihuje téma stránky. Kde se objevuje? V záložkách prohlížeče vedle nadpisu, v záložkách, v mobilním vyhledávání Google (nalevo od URL) a dokonce i na zástupcích na ploše nebo na obrazovce telefonu.
Ale proč se tím zabývat? Za prvé, rozpoznatelnost značky: Ikona se zapamatuje líp než obyčejný text. Za druhé, pohodlí – mezi hromadou otevřených stránek funguje jako kompas. A za třetí, SEO výhoda: Weby s favicony působí uceleněji a Google je ve výsledcích zobrazuje, což zvyšuje klikatelnost o 6–20 % podle designu. V roce 2025, kdy se Progressive Web Apps (PWA) šíří jako houby po dešti, favicony pomáhají webům vypadat jako nativní aplikace.
Příklad z naší praxe: Jeden klient na WordPressu spustil site bez faviconu – CTR jen 0,8 %. Po přidání přes nástroj RealFaviconGenerator a optimalizaci pro SVG to vyskočilo na 1,5 %. Pro online obchod to znamenalo skutečné prodeje, ne jen víc návštěv.
Google favicony plně začleňuje do mobilního i desktopového vyhledávání. Od roku 2023 se objevují nalevo od URL a v 2025 už i ve větších velikostech pro lepší viditelnost na vysokých rozlišeních. Doporučení Google: Čtvercový formát (1:1), minimálně 8x8 pixelů, ale důrazně radí aspoň 48x48 pro ostrost. Bez ikony web vypadá mdle, což snižuje CTR. Studie ukazují, že dobrý favicon může kliky zvednout až o 20 %.
Pokud je hosting pomalý, favicon se nemusí načíst včas – a sbohem SEO bonus. Vyberte si rychlé servery s SSD, jako Hostiserver, aby ikona zablikala hned. Chcete-li dále zvýšit rychlost svého webu, podívejte se na našich 5 nejlepších způsobů, jak zrychlit svůj web, kde odhalíme tajemství optimalizace pro lepší umístění ve vyhledávání a uživatelský zážitek.
Nelekejte se, pokud nemáte designéra po ruce. Zde jsou čtyři cesty podle toho, co máte k dispozici:
Trend pro 2025: Přecházejte na SVG – škáluje se bez ztráty kvality, ideální pro Retina displeje.
Testovali jsme jich desítky a tady jsou naši favoriti – jednoduché, rychlé a připravené na současné formáty:
Rada: Nahrávejte čtvercový obrázek ve vysoké kvalitě, aby se vyhnuli pixelaci. A vždy testujte na mobilech!
Favicon musí být čtvercový. Zde je aktualizovaná tabulka podle doporučení Google a prohlížečů – s důrazem na vyšší rozlišení pro PWA a Retina.
| Zařízení/Platforma | Doporučené velikosti (pixely) | Poznámky |
|---|---|---|
| Desktop (prohlížeče) | 16x16, 32x32, 48x48, 96x96 | Minimálně 48x48 pro Google. |
| Android | 36x36, 48x48, 72x72, 96x96, 144x144, 192x192, 512x512 | 512x512 pro PWA. |
| iOS (standardní) | 57x57, 76x76, 120x120, 152x152 | Pro iPhone/iPad. |
| iOS (Retina) | 114x114, 180x180, 256x256 | Vyšší pro ostrost. |
| PWA a vysoké DPI | 256x256, 512x512 | Škáluje se SVG. |
Formáty:
Doporučujeme .svg pro maximální flexibilitu.
Nahrajte soubor: Do kořenového adresáře webu (např. vasweb.cz/favicon.ico). Dobrý hosting zajistí bleskové načtení.
Přidejte HTML: Do tagu :
<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml"> <link rel="icon" href="/favicon.ico" type="image/x-icon">
Pro SVG přidejte sizes="any".
Pro WordPress: V "Nastavení > Obecné" nahrajte, nebo vložte kód do header.php. Pro favicon v WordPress zkuste pluginy jako Favicon by RealFaviconGenerator. Aby vaše favicon a celý váš web WordPress fungovaly hladce, je důležité vybrat si spolehlivého poskytovatele hostingu. Jak na to, se dozvíte v našem článku „Jak si vybrat hosting pro WordPress“.
Problém s zobrazením? Vyčistěte cache prohlížeče, zkontrolujte robots.txt (neblokujte) a velikost souboru.
Na desktopu – 32x32 pro ostrost. Android má rád až 512x512 pro PWA. iOS – 180x180 pro Retina. Vždy testujte na skutečných zařízeních!
V 2025: Zaměření na SVG, aby se vyhnuli více souborům – prohlížeče to škálují samy. A nezapomeňte na rychlost: Pomalé načítání znamená ztrátu návštěvníků.
Vytvořit favicon není žádná věda – je to investice do vaší značky. Vyzkoušejte to sami a uvidíte, jak web ožije! Pokud máte otázky, pište do komentářů.