favikonTakéfavorite icon, shortcut icon, site icon, ikona webu, ikona stránkyZákladní
Definice
Favicon je malá ikona přiřazená k webové stránce nebo webové aplikaci, kterou prohlížeče zobrazují hlavně v panelech, záložkách, historii a někdy i ve výsledcích vyhledávání. Pomáhá uživateli rychle poznat web, posiluje značku a obvykle se nastavuje pomocí HTML odkazu na soubor ikony.
Proč favicon vznikla
Favicon doplňuje stránku o malý vizuální identifikátor. Prohlížeč ji zobrazuje v panelu, v seznamu záložek, v historii, někdy i v adresním řádku nebo v nabídce otevřených panelů. Uživatel tak pozná web rychleji než podle textového titulku, zvlášť když má otevřené desítky karet.
Původně šlo hlavně o soubor favicon.ico umístěný v kořeni webu. Moderní weby ale obvykle deklarují ikonu přímo v HTML, protože potřebují různé formáty, velikosti a chování napříč zařízeními. Favicon není jen dekorace: špatně zvolená ikona může zhoršit orientaci uživatele a ve výsledcích vyhledávání působit nedůvěryhodně.
Kam favicon prohlížeč bere
Nejspolehlivější zápis je element <link rel="icon" href="/favicon.svg"> v části <head>. Prohlížeč si podle atributů rel, href, type a případně sizes vybere vhodný soubor. Pokud deklarace chybí, některé prohlížeče zkusí historickou cestu /favicon.ico.
Praktická implementace často kombinuje více odkazů. SVG se dobře škáluje a hodí se pro moderní prohlížeče, ICO zůstává užitečné kvůli kompatibilitě a PNG se používá pro specifické velikosti. Webová aplikace může mít navíc ikony ve Web App Manifestu, které se používají například při instalaci na plochu nebo domovskou obrazovku.
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="alternate icon" href="/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">Formát není totéž co vzhled
Favicon musí fungovat v extrémně malé velikosti. Detailní logo, tenké linky nebo dlouhý nápis se v panelu prohlížeče často slijí do nečitelné skvrny. Dobrá favicon proto bývá zjednodušená značka, monogram nebo výrazný tvar s dostatečným kontrastem.
Technický formát řeší doručení souboru, ale použitelnost řeší design. SVG může být ostré na libovolném displeji, přesto může být špatné, pokud obsahuje příliš mnoho detailů. PNG může být dobře připravené, ale při změně pozadí prohlížeče ztratit čitelnost. Test v reálných panelech prohlížeče je důležitější než náhled ve velkém editoru.
Cache a změny ikony
Favicon se často ukládá do cache agresivněji, než vývojáři čekají. Po výměně souboru proto může stará ikona zůstat v prohlížeči, v záložkách nebo ve vyhledávači ještě nějakou dobu. Samotné přepsání souboru na serveru nemusí stačit k okamžitému výsledku u všech uživatelů.
Běžná praxe je změnit URL souboru při nové verzi, například /favicon-v2.svg nebo /favicon.svg?v=2. Nová adresa prohlížeči signalizuje, že nejde o stejný uložený objekt. Vyhledávače si ikonu aktualizují vlastním tempem a zároveň kontrolují, zda je soubor dostupný pro jejich crawler.
Vliv na důvěryhodnost a SEO vzhled
Favicon sama o sobě nenahradí kvalitní obsah ani technické SEO. Favicon ale ovlivňuje, jak web vypadá v prostředích, kde uživatel rychle skenuje více možností: výsledky hledání, oblíbené položky, panely nebo mobilní přepínače aplikací. Konzistentní ikona pomáhá rozpoznatelnosti značky.
Vyhledávače a platformy mohou mít vlastní pravidla pro velikost, dostupnost a vhodnost ikony. Favicon by proto měla být veřejně dostupná, neměla by vyžadovat přihlášení a měla by odpovídat identitě webu. Nevhodná nebo generická ikona může snížit šanci, že si uživatel web správně zapamatuje.
Příklady z praxe
Rozlišení administrace od veřejného webu
Firemní administrace má v prohlížeči otevřené stejné názvy panelů jako produkční web. Vývojář přidá samostatnou favicon s písmenem „A“, takže administrace je v kartách okamžitě rozeznatelná. Starší prohlížeče dostanou záložní soubor ICO.
<link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="alternate icon" href="/favicon.ico" type="image/x-icon">Výměna loga po rebrandingu
E-shop po rebrandingu přepíše jen původní soubor favicon.ico, ale část zákazníků dál vidí staré logo v záložkách. Tým nasadí favicon pod novou URL a aktualizuje HTML hlavičku. Prohlížeče začnou stahovat nový soubor místo použití staré cache.
<link rel="icon" href="/brand-2026/favicon.svg" type="image/svg+xml"> <link rel="alternate icon" href="/brand-2026/favicon.ico" type="image/x-icon">
Časté omyly
- MýtusStačí nahrát favicon.ico do kořene webu a není potřeba nic řešit v HTML.
- Ve skutečnostiSoubor v kořeni může fungovat jako historická záloha, ale explicitní deklarace v HTML dává větší kontrolu nad formátem, typem a verzí ikony. Moderní weby často používají více ikon pro různé prostředí.
- MýtusFavicon může být zmenšené firemní logo v plné podobě.
- Ve skutečnostiPlné logo se v malé velikosti často stane nečitelné. Lepší favicon bývá zjednodušený symbol, monogram nebo výrazný tvar navržený speciálně pro malé rozměry.
- MýtusPo změně souboru se favicon musí okamžitě změnit všem uživatelům.
- Ve skutečnostiFavicon se často drží v cache prohlížeče, v záložkách nebo v indexu vyhledávače. Změna URL ikony obvykle urychlí načtení nové verze, ale některá prostředí se aktualizují až později.
Časté dotazy
- Jaký formát favicon je nejlepší pro běžný web?
- Favicon může být ve formátu ICO, PNG, SVG nebo v jiném formátu podporovaném konkrétním prohlížečem. Praktická kombinace bývá SVG pro moderní prohlížeče a ICO jako kompatibilní záloha. PNG se hodí tam, kde potřebujete přesně připravené rastrové velikosti. Samotná podpora formátu ale nestačí: ikona musí zůstat čitelná v malém rozměru a soubor musí být veřejně dostupný.
- Proč se po nasazení pořád zobrazuje stará favicon?
- Favicon se nemusí změnit hned, protože prohlížeče a vyhledávače si ikony ukládají do cache. Přepsání souboru na stejné adrese proto někdy nestačí. Spolehlivější je změnit URL ikony, například použít novou cestu nebo verzi v názvu souboru. Vyhledávače navíc aktualizují zobrazenou ikonu až po dalším zpracování stránky a souboru.
- Má favicon vliv na SEO?
- Favicon může mírně ovlivnit chování uživatele ve výsledcích hledání, protože web působí rozpoznatelněji a důvěryhodněji. Favicon ale není náhrada za technické SEO, relevantní obsah ani kvalitní titulek stránky. Pro vyhledávače je důležité hlavně to, aby ikona splňovala jejich pravidla, byla dostupná crawlerům a nepůsobila zavádějícím dojmem.
- Stačí favicon místo ikon ve Web App Manifestu?
- Favicon a ikona ve Web App Manifestu řeší příbuzné, ale ne totožné situace. Favicon používá hlavně prohlížeč pro panely, záložky a další prvky rozhraní. Ikony v manifestu slouží webové aplikaci při instalaci, na domovské obrazovce nebo v systémových přehledech. Moderní projekt často potřebuje obojí, aby značka působila konzistentně v prohlížeči i jako aplikace.
Zdroje
- Favicon(otevře se v novém okně)
- HTML Standard(otevře se v novém okně)
- Define a favicon to show in search results(otevře se v novém okně)
- Favicon(otevře se v novém okně)
Související pojmy
