Domů / Slovník pojmů / Favicon ico

Favicon ico

Favicon: Malá ikona s velkým významem pro váš web

Favicon je malá, ale důležitá součást každého webu. Přestože je často přehlížen, může výrazně ovlivnit uživatelskou zkušenost (UX), rozpoznatelnost značky a dokonce i důvěryhodnost vašeho webu. V tomto článku si vysvětlíme, co favicon je, jak funguje, proč je důležitý a jak ho správně implementovat.

Co je favicon?

Favicon (zkratka z favorite icon) je malá ikona, která se zobrazuje: ✅ V záložkách prohlížeče (vedle názvu stránky) ✅ V adresním řádku (u některých prohlížečů) ✅ V seznamu záložek (když si uživatel uloží váš web) ✅ V mobilních zařízeních (např. při přidání webu na domovskou obrazovku) ✅ V výsledcích vyhledávání (někdy u mobilních zařízení)

Příklad faviconu v praxi

Pokud navštívíte Google, uvidíte v záložce malé barevné "G". U Facebooku je to modré "f" a u YouTube červený obdélník s bílým tlačítkem přehrávání. Tyto ikony pomáhají uživatelům rychle rozpoznat váš web mezi desítkami otevřených záložek.

Proč je favicon důležitý?

I když favicon přímo neovlivňuje SEO (nepomůže vám dostat se na první místo ve vyhledávání), má několik klíčových výhod:

1. Zlepšuje uživatelskou zkušenost (UX)

  • Uživatelé rychleji najdou váš web mezi otevřenými záložkami.
  • Profesionální vzhled – web bez faviconu působí nedokončeně.
  • Důvěryhodnost – uživatelé lépe důvěřují webům, které vypadají pečlivě zpracované.

2. Posiluje značku (branding)

  • Favicon je vizitkou vaší značky – pokud je dobře navržen, lidé si ho zapamatují.
  • Konzistence – pokud máte logo, favicon by měl být jeho zjednodušenou verzí.

3. Může ovlivnit proklikovost (CTR) ve vyhledávání

  • Některé mobilní prohlížeče (např. Google Chrome) zobrazují favicon vedle výsledků vyhledávání.
  • Atraktivní ikona může zvýšit šanci, že uživatel klikne právě na váš odkaz.

4. Důležitý pro PWA (Progressive Web Apps)

  • Pokud máte PWA (webovou aplikaci, kterou lze nainstalovat na mobil), favicon se zobrazuje na domovské obrazovce jako ikona aplikace.

Jak by měl vypadat dobrý favicon?

1. Jednoduchost a čitelnost

  • Favicon je malý (obvykle 16×16 nebo 32×32 pixelů), takže musí být jasný i v miniaturě.
  • Příklady dobrých faviconů:
    • Google – jednoduché "G" v barvách značky.
    • Twitter – modrý ptáček (dříve) nebo černé "X".
    • Amazon – šipka od "A" k "Z" (symbolizuje široký sortiment).

❌ Špatné příklady:

  • Příliš složité loga (nečitelné v malém formátu).
  • Text, který není rozpoznatelný.
  • Příliš mnoho barev (způsobuje nepořádek).

2. Konzistence s brandem

  • Použijte barvy a tvary z vašeho loga.
  • Pokud máte maskota nebo symbol, zjednodušete ho pro favicon.

3. Správný formát a velikost

Formát Velikost Využití
.ico 16×16, 32×32, 48×48 Nejuniverzálnější, podporovaný všemi prohlížeči
.png 32×32, 64×64 Lepší kvalita, podpora průhlednosti
.svg Vektorový (libovolná velikost) Moderní, škálovatelný, ale ne všechny prohlížeče ho podporují

💡 Doporučení:

  • Minimálně vytvořte 16×16 a 32×32 pixelů (pro klasické prohlížeče).
  • Pro Retina displeje (Apple zařízení) přidejte 64×64 nebo 128×128.
  • Pokud používáte PWA, potřebujete 192×192 nebo 512×512 pro ikony na domovské obrazovce.

Jak vytvořit favicon?

1. Návrh faviconu

  • Zjednodušete své logo (odstraňte text, nechte jen symbol).
  • Použijte kontrastní barvy (aby byl vidět i na bílém pozadí).
  • Nástroje pro vytvoření faviconu:

2. Konverze do správného formátu

3. Optimalizace velikosti souboru

  • Favicon by měl být co nejmenší (ideálně pod 10 KB), aby se rychle načítal.
  • Komprimujte obrázek pomocí:

Jak přidat favicon na web?

Favicon se přidává do HTML kódu v sekci <head>. Existuje několik způsobů:

1. Základní implementace (pro většinu prohlížečů)

<link rel="icon" href="/favicon.ico" type="image/x-icon">
  • /favicon.ico – cesta k vašemu souboru (umístěte ho do kořenového adresáře webu).

2. Podpora více formátů (PNG, SVG)

<!-- Pro moderní prohlížeče (PNG) -->
<link rel="icon" href="/favicon.png" type="image/png">

<!-- Pro vektorové favicony (SVG) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

3. Favicon pro různé zařízení (Apple, Android, PWA)

<!-- Pro Apple zařízení (iPhone, iPad) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Pro Android a PWA -->
<link rel="manifest" href="/site.webmanifest">
  • site.webmanifest – soubor, který definuje ikony pro instalaci PWA.

4. Příklad kompletní implementace

<head>
    <!-- Základní favicon (ICO) -->
    <link rel="icon" href="/favicon.ico" type="image/x-icon">

    <!-- Alternativní formáty -->
    <link rel="icon" href="/favicon.png" type="image/png" sizes="32x32">
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">

    <!-- Pro Apple zařízení -->
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">

    <!-- Pro PWA (Progressive Web App) -->
    <link rel="manifest" href="/site.webmanifest">
</head>

Časté chyby při práci s faviconem

❌ 1. Favicon se nezobrazuje

  • Příčina: Špatná cesta k souboru nebo chybějící <link> tag.
  • Řešení: Zkontrolujte, zda je soubor v kořenovém adresáři (/favicon.ico) a zda je správně odkazován v HTML.

❌ 2. Favicon je rozmazaný

  • Příčina: Příliš malá nebo nekvalitní ikona.
  • Řešení: Použijte vektorový formát (SVG) nebo vyšší rozlišení (např. 64×64).

❌ 3. Favicon se načítá pomalu

  • Příčina: Příliš velký soubor.
  • Řešení: Optimalizujte velikost (max. 10 KB).

❌ 4. Favicon neodpovídá značce

  • Příčina: Špatný design (příliš složitý nebo nekonzistentní s logem).
  • Řešení: Vytvořte zjednodušenou verzi loga s jasnými barvami.

Favicon a SEO: Má vliv na vyhledávání?

❓ Přímo ne, ale nepřímo ano.

  • Google oficiálně potvrzuje, že favicon není rankingovým faktorem (neovlivňuje pozici ve vyhledávání).
  • Ale:
    • Zlepšuje UX → nižší míra okamžitého opuštění stránky (bounce rate).
    • Zvyšuje důvěryhodnost → uživatelé déle zůstávají na stránce.
    • Může ovlivnit CTR (proklikovost) v mobilních výsledcích, kde se někdy zobrazuje.

🔍 Google a favicony ve vyhledávání:

  • Od roku 2019 Google někdy zobrazuje favicony vedle výsledků vyhledávání (zejména na mobilech).
  • Pokud máte atraktivní ikonu, může to zvýšit šanci na kliknutí.

Best Practices: Jak mít perfektní favicon

✅ 1. Jednoduchost před vším

  • Favicon musí být čitelný i ve velikosti 16×16 pixelů.

✅ 2. Konzistence s brandem

  • Použijte barvy a tvary z vašeho loga.

✅ 3. Podpora více formátů

  • .ico (pro starší prohlížeče)
  • .png (pro lepší kvalitu)
  • .svg (pro moderní weby)

✅ 4. Rychlé načítání

  • Optimalizujte velikost souboru (max. 10 KB).

✅ 5. Aktualizujte při změně loga

  • Pokud změníte logo, nezapomeňte aktualizovat i favicon.

✅ 6. Testujte na různých zařízeních

  • Zkontrolujte, jak vypadá na PC, mobilu a tabletu.

Závěr: Favicon je malá věc s velkým dopadem

I když se může zdát, že favicon je nedůležitý detail, ve skutečnosti hraje klíčovou roli v: ✔ Uživatelské zkušenosti (UX) ✔ Rozpoznatelnosti značky ✔ Důvěryhodnosti webu ✔ Mobilní optimalizaci

Pokud ještě nemáte favicon, vytvořte ho co nejdříve! Je to jednoduchý krok, který může zvýšit profesionální dojem vašeho webu a usnadnit uživatelům navigaci.

Zdroje (APA citace)

Autor: Michal Binka Datum poslední úpravy: 15. září 2025

Co potřebujete najít?

Doporučujeme