Design/UX

Favicon (Ikona webu)

Co je to favicon?

Favicon (zkratka z "favorite icon") je malá ikonka, která reprezentuje váš web v záložce prohlížeče, v seznamu oblíbených stránek, ve výsledcích vyhledávání Google a na mobilních zařízeních. Když otevřete web v prohlížeči, vidíte vedle názvu stránky v tabu malý obrázek – to je právě favicon. Tato drobná grafika má obrovský význam pro rozpoznatelnost značky a profesionální vzhled webu.

Historie faviconu sahá až do roku 1999, kdy ho Microsoft poprvé implementoval v Internet Exploreru 5. Původně to byl jednoduše soubor favicon.ico umístěný v kořenovém adresáři webu. Dnes je favicon mnohem sofistikovanější – moderní weby používají celou sadu ikon v různých rozměrech a formátech, aby vypadaly perfektně na všech zařízeních od desktopových prohlížečů po mobilní telefony a tablety.

Z pohledu uživatele je favicon nesmírně užitečný. Když máte otevřených 20 záložek v prohlížeči, text názvů stránek často není vidět – vidíte jen ikony. Dobře navržený favicon umožňuje okamžitě vizuálně identifikovat váš web mezi desítkami jiných otevřených stránek. To je obzvlášť důležité, protože průměrný uživatel má současně otevřeno 10-20 záložek. Favicon také zvyšuje důvěryhodnost – profesionální web má vždy favicon, zatímco web bez faviconu může působit amatérsky nebo nedokončeně.

Jak favicon funguje v praxi?

Z technického hlediska se favicon implementuje pomocí HTML tagu v sekci <head> vaší stránky. Základní implementace vypadá takto: <link rel="icon" type="image/x-icon" href="/favicon.ico">. Prohlížeč pak stáhne tento soubor a zobrazí ho v záložce, v historii prohlížení, v seznamu záložek a dalších místech. Moderní přístup zahrnuje více variant pro různá použití.

Pro maximální kompatibilitu a kvalitu doporučuji vytvořit několik verzí faviconu. Klasický favicon.ico soubor (16x16 a 32x32 pixelů) umístěný v kořenovém adresáři webu zajišťuje kompatibilitu se staršími prohlížeči. PNG soubory ve velikostech 32x32, 192x192 a 512x512 pixelů slouží pro moderní prohlížeče a mobilní zařízení. Apple touch ikona (180x180 pixelů) se zobrazí, když uživatel přidá váš web na plochu iPhone nebo iPadu. SVG favicon nabízí vektorovou kvalitu a možnost reagovat na dark mode.

Google zobrazuje favicon ve výsledcích vyhledávání od roku 2019, což dělá favicon ještě důležitějším. Favicon ve vyhledávání pomáhá zvýšit CTR (míru prokliků) – lidé spíše kliknou na výsledek s rozpoznatelnou ikonou známé značky. Google má přísná pravidla pro favicony ve vyhledávání – musí být čtvercový, mít alespoň 48x48 pixelů a být viditelný a rozpoznatelný i v malém rozlišení. Pokud váš favicon nesplňuje požadavky, Google může zobrazit defaultní ikonu glóbusu.

Favicon se také cachuje v prohlížeči, což znamená, že když změníte favicon na živém webu, návštěvníci nemusí vidět novou verzi okamžitě. Pro vynucení aktualizace můžete přidat parametr verze do URL: href="/favicon.ico?v=2". To říká prohlížeči, že jde o nový soubor a měl by ho stáhnout znovu.

Výhody použití favicon

  • Zvýšená rozpoznatelnost značky

    • Favicon je součástí vizuální identity vaší značky. Když uživatelé vidí vaši charakteristickou ikonu v záložkách, okamžitě ji spojí s vaším brandem. To posiluje brand awareness a pomáhá vytvářet konzistentní vizuální identitu napříč všemi touchpointy. Favicon často používá zjednodušenou verzi loga nebo charakteristickou barvu značky.

  • Profesionální vzhled webu

    • Web bez faviconu působí nedokončeně nebo amatérsky. Profesionální weby mají vždy favicon, který ladí s celkovým designem. Je to jeden z těch malých detailů, které dělají rozdíl mezi amatérským a profesionálním webem. Podobně jako správně nastavená typografie nebo konzistentní barevná paleta.

  • Lepší orientace v záložkách

    • V moderním prohlížení je běžné mít otevřených 10-30 záložek současně. Když jsou záložky zúžené, text názvu stránky často není vidět – vidíte jen ikony. Výrazný, dobře navržený favicon umožňuje uživatelům rychle najít váš web mezi ostatními záložkami. To zlepšuje uživatelskou zkušenost a snižuje frustraci.

  • Vyšší CTR ve vyhledávání

    • Favicon ve výsledcích vyhledávání Google přitahuje pozornost a zvyšuje důvěryhodnost. Studie ukazují, že výsledky s rozpoznatelným faviconem známých značek mají vyšší míru prokliků. Lidé důvěřují známým značkám a favicon pomáhá výsledek okamžitě identifikovat jako váš web.

  • Viditelnost v mobilních zařízeních

    • Na mobilních zařízeních se favicon zobrazuje na domovské obrazovce, když si uživatel přidá web mezi oblíbené. Apple touch ikona vytvoří app-like ikonu, která vypadá jako nativní aplikace. To zvyšuje pravděpodobnost, že se uživatelé k vašemu webu budou vracet – ikona na ploše je mnohem viditelnější než záložka v prohlížeči.

  • Konzistence napříč platformami

    • Správně implementovaný favicon zajišťuje, že vaše značka vypadá konzistentně ve všech prohlížečích (Chrome, Firefox, Safari, Edge), na všech zařízeních (desktop, mobil, tablet) a ve všech kontextech (záložky, historie, vyhledávání). To je klíčové pro silnou brand identity.

Nevýhody a úskalí favicon

  • Náročnost návrhu pro malé rozměry

    • Navrhnout ikonu, která je čitelná a rozpoznatelná při velikosti 16x16 nebo 32x32 pixelů, je výzva. Nemůžete použít komplikované detaily nebo jemný text – musíte zjednodušit a stylizovat. Logo, které vypadá skvěle ve velkém formátu, často nefunguje jako favicon bez úprav. To vyžaduje designérské dovednosti nebo profesionální pomoc.

  • Technická komplexita implementace

    • Pro optimální podporu napříč všemi zařízeními a prohlížeči potřebujete vytvořit mnoho variant – ICO soubor s více velikostmi, PNG v různých rozlišeních, Apple touch ikony, případně SVG. Pak musíte správně implementovat všechny linky v HTML. Pro začátečníky může být konfuzní pochopit, která velikost se kde používá.

  • Problémy s cachováním

    • Favicon se agresivně cachuje v prohlížečích, což znamená, že když změníte favicon, návštěvníci mohou vidět starou verzi i několik dní nebo týdnů. To je frustrující, když potřebujete rychle aktualizovat ikonu. Řešení zahrnuje přidání verze do URL nebo vyčištění cache, ale nemáte kontrolu nad uživatelským prohlížečem.

  • Obtížná viditelnost detailů

    • V tak malém rozlišení nemůžete komunikovat složité informace. Jemné barevné přechody se ztrácejí, text je nečitelný, malé detaily splývají. Musíte se spokojit s velmi jednoduchým designem – ideálně jedno písmeno, jednoduchý symbol nebo výrazná barva. To může být limitující pro značky s komplexním logem.

  • Různé zobrazení v různých režimech

    • S příchodem dark mode v prohlížečích může favicon navržený pro světlé pozadí špatně vypadat na tmavém pozadí a naopak. SVG favicon podporuje media queries pro dark mode, ale ICO a PNG ne. To znamená kompromisy nebo nutnost vytvořit dvě verze pro světlý a tmavý režim.

Praktické tipy pro vytvoření perfektního favicon

  • Začněte s velkým rozlišením

    • Vytvořte favicon nejprve v rozlišení 512x512 pixelů nebo ještě větším. Pak ho můžete zmenšit na potřebné velikosti. Je mnohem jednodušší zmenšovat než zvětšovat bez ztráty kvality. V grafických editorech jako Figma, Adobe Illustrator nebo Photoshop vytvořte čtvercový canvas a návrh vektorově, pokud je to možné.

  • Držte design jednoduchý

    • Při 16x16 pixelech nemáte prostor pro složitost. Nejlepší favicony používají jednoduché tvary – jeden symbol, písmeno nebo geometrický tvar. Podívejte se na favicony velkých značek: Google (barevné "G"), Facebook (bílé "f" na modrém), Twitter (modrý pták). Všechny jsou extrémně jednoduché, ale okamžitě rozpoznatelné.

  • Používejte výrazné barvy

    • Favicon musí vynikat mezi desítkami jiných ikon v záložkách. Používejte vaše primární brand barvy, ale zajistěte dostatečný kontrast. Testujte, jak favicon vypadá na bílém i tmavém pozadí. Příliš světlé barvy se mohou ztratit na světlém pozadí prohlížeče.

  • Vytvořte kompletní sadu velikostí

    • Minimální sada zahrnuje: favicon.ico (16x16, 32x32), favicon-32x32.png, favicon-192x192.png (Android Chrome), favicon-512x512.png, apple-touch-icon.png (180x180). Pro pokročilé použijte i SVG favicon s podporou dark mode.

  • Testujte napříč zařízeními

    • Než favicon nasadíte na živý web, otestujte ho ve všech hlavních prohlížečích (Chrome, Firefox, Safari, Edge), na desktopu i mobilu. Zkontrolujte, jak vypadá v záložkách, v historii, v seznamu záložek. Ověřte si ho i v Google Search Console – Google vám řekne, jestli váš favicon splňuje jejich požadavky.

  • Použijte generátor favicon

    • Online nástroje jako RealFaviconGenerator.net nebo Favicon.io automaticky vygenerují všechny potřebné velikosti a formáty z jednoho zdrojového obrázku. Poskytnou vám i hotový HTML kód pro implementaci. To šetří hodiny manuální práce a zajišťuje, že nezapomenete na žádnou variantu.

  • Optimalizujte velikost souborů

    • I když jsou favicony malé obrázky, stále je dobré je optimalizovat. Pro PNG použijte nástroje jako TinyPNG pro kompresi bez ztráty kvality. To zrychlí načítání, i když rozdíl bude minimální – jde o princip optimalizace všeho na webu pro lepší performance.

Optimalizujte velikost souborů: I když jsou favicony malé obrázky, stále je dobré je optimalizovat. Pro PNG použijte nástroje jako TinyPNG pro kompresi bez ztráty kvality. To zrychlí načítání, i když rozdíl bude minimální – jde o princip optimalizace všeho na webu pro lepší performance.

Formáty a velikosti favicon v roce 2025

  • ICO formát (favicon.ico)

    • Stále potřebný pro starší prohlížeče. Vytvořte soubor s embedded velikostmi 16x16 a 32x32 pixelů. Umístěte ho do kořenového adresáře webu (/favicon.ico), kde ho prohlížeče hledají automaticky i bez HTML tagu.

  • PNG formát

    • Moderní prohlížeče preferují PNG pro lepší kompresi a kvalitu. Doporučuji velikosti: 32x32 (základní), 192x192 (Android Chrome), 512x512 (high-res displayy). Implementujte pomocí: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

  • Apple Touch Icon

    • Pro iOS zařízení vytvořte apple-touch-icon.png o velikosti 180x180 pixelů. Když uživatel přidá váš web na plochu iPhonu nebo iPadu, tato ikona se použije. Měla by být bez zakulacených rohů nebo stínu – iOS to přidá automaticky.

  • SVG favicon

    • Nejmodernější formát – vektorový, škálovatelný a může podporovat dark mode pomocí CSS media queries. Podporován v Safari, Chrome a Firefox. Implementace: <link rel="icon" type="image/svg+xml" href="/favicon.svg">. Uvnitř SVG můžete použít @media (prefers-color-scheme: dark) pro změnu barev v dark mode.

  • Web App Manifest

    • Pro progressive web apps vytvořte manifest.json soubor s odkazy na ikony různých velikostí. To zajistí, že PWA bude mít správné ikony při instalaci na zařízení.

Nejčastější otázky o favicon

Co je to favicon? Rozbalit

Favicon (favorite icon) je malá ikonka reprezentující web, která se zobrazuje v záložce prohlížeče, v seznamu oblíbených záložek, ve výsledcích vyhledávání Google a na mobilních zařízeních při uložení webu na plochu. Typicky má rozměry 16x16 až 512x512 pixelů v závislosti na použití. Pomáhá s okamžitou vizuální identifikací webu a zvyšuje rozpoznatelnost značky.

Jaký formát favicon použít? Rozbalit

Doporučuji použít kombinaci formátů pro maximální kompatibilitu: favicon.ico pro klasickou podporu starších prohlížečů (16x16, 32x32 pixelů), PNG soubory různých velikostí (32x32, 192x192, 512x512) pro moderní prohlížeče a mobilní zařízení, apple-touch-icon.png (180x180) pro iOS, a moderní SVG favicon pro vektorovou kvalitu a podporu dark mode. ICO soubor umístěte do kořenového adresáře webu.

Proč je favicon důležitý? Rozbalit

Favicon zvyšuje rozpoznatelnost značky v přeplněných záložkách prohlížeče, kde často není vidět text názvu stránky – jen ikony. Vypadá profesionálně a buduje důvěru. Pomáhá uživatelům rychle najít váš web mezi desítkami otevřených tabů. Zobrazuje se ve výsledcích vyhledávání Google, což může zvýšit CTR (míru prokliků). Vytváří konzistentní brand image napříč všemi platformami. Web bez faviconu působí nedokončeně a amatérsky.

Jak vytvořit favicon krok za krokem? Rozbalit

1) Vytvořte čtvercový design ve vysokém rozlišení (512x512 nebo větší) s jednoduchým, rozpoznatelným symbolem. 2) Exportujte nebo použijte generátor favicon (např. RealFaviconGenerator.net) pro vytvoření všech potřebných velikostí a formátů. 3) Nahrajte soubory na server do složky /images/ a favicon.ico do kořenového adresáře. 4) Přidejte HTML tagy do <head> sekce. 5) Otestujte v různých prohlížečích a zařízeních. 6) Ověřte v Google Search Console, že splňuje požadavky pro zobrazení ve vyhledávání.

Související pojmy

Brand Vizuální identita HTML SEO UX