Favicon: Malá ikona s velkým vlivem na značku

Otevřete prohlížeč. Podívejte se na záložky. Vidíte ty drobné ikonky vedle názvu stránek?

To jsou favicony. A i když měří pouhých 16x16 pixelů, mohou rozhodnout o tom, zda si váš web někdo zapamatuje.

Pracuji s weby malých firem přes 10 let. A favicon je jedna z věcí, které majitelé nejčastěji opomíjejí. Přitom správně navržená ikona pomáhá budovat důvěru a odlišit se od konkurence.

V tomto článku vám ukážu, co favicon je, proč na něm záleží a jak si ho vytvořit sami bez grafika.

Co je favicon

Ikona webu (favicon, zkratka z "ikona oblíbených" - favorite icon) je malá ikona reprezentující váš web. Termín pochází z roku 1999, kdy Microsoft představil Internet Explorer 5 a umožnil webům zobrazovat vlastní ikonu v seznamu oblíbených stránek.

Od té doby se favicon stal standardem. Dnes je součástí každého profesionálního webu.

Kde se favicon zobrazuje

Favicon se nezobrazuje jen v záložkách prohlížeče. Najdete ho na mnoha místech:

• Záložky prohlížeče - vedle názvu stránky v tabu
• Seznam oblíbených - v bookmarks a historii
• Výsledky vyhledávání Google - od roku 2019 (mobilní) a 2023 (desktop) Google zobrazuje favicon přímo v SERP
• Mobilní zástupci - když si někdo přidá váš web na plochu telefonu
• Čtečky RSS - u odebíraných článků
• Sdílené odkazy - v některých aplikacích a chatech

Proč je favicon důležitý

1. Rozpoznatelnost značky: Když má uživatel otevřeno 15 záložek, favicon je jediný vizuální prvek, podle kterého pozná váš web. Logo v záhlaví mu nepomůže.

2. Profesionalita: Web bez faviconu vypadá nedokončeně. Zobrazuje se výchozí ikona prohlížeče (prázdný dokument nebo zeměkoule), což působí amatérsky.

3. Důvěryhodnost ve vyhledávání: Google zobrazuje favicon v mobilních výsledcích hledání. Weby s kvalitní ikonou vypadají legitimněji a mohou mít vyšší míru prokliku (CTR).

4. Uživatelský zážitek: Favicon pomáhá orientaci. Uživatel rychleji najde vaši záložku mezi desítkami dalších.

Rozměry a formáty favicon

Tady to začíná být komplikované. Různá zařízení vyžadují různé velikosti.

Základní rozměry

ICO vs PNG vs vektorová grafika

ICO (favicon.ico) Tradiční formát, který funguje všude. Výhodou je, že jeden soubor může obsahovat více velikostí najednou (16, 32, 48 px). Nevýhodou je větší velikost souboru.

PNG Modernější volba s dobrou kompresí. Pro každou velikost potřebujete samostatný soubor. Podporují ho všechny moderní prohlížeče.

SVG Vektorový formát, který se škáluje do libovolné velikosti bez ztráty kvality. Ideální pro jednoduché grafické značky. Podpora v desktopových prohlížečích je dobrá (Chrome, Firefox, Edge, Safari), ale iOS Safari SVG favicony nepodporuje. Doporučení: Použijte kombinaci ICO (pro starší prohlížeče) a SVG (pro moderní). Generátory to za vás vyřeší automaticky.

Apple touch icon

Apple zařízení (iPhone, iPad) používají speciální ikonu o velikosti 180x180 px. Když si někdo přidá váš web na plochu iOS zařízení, zobrazí se právě tato ikona.

Bez ní iOS použije screenshot vašeho webu, což vypadá hrozně.

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Jak vytvořit favicon

Z loga

Nejlepší favicon vzniká zjednodušením vašeho loga. Na ploše 16x16 pixelů nemáte prostor pro detaily.

Pravidla:

• Použijte pouze symbol/ikonu, ne celé logo s textem
• Zjednodušte tvary na minimum
• Zvolte výrazné kontrastní barvy
• Otestujte čitelnost při malé velikosti

Pokud máte logo s písmeny, použijte jen iniciálu. Pokud máte grafický symbol, ořízněte ho.

Online generátory

Pro většinu malých firem jsou online generátory nejlepší volbou. Nahrají váš obrázek a vygenerují všechny potřebné velikosti a formáty.

RealFaviconGenerator.net Nejkompletnější nástroj zdarma. Generuje favicony pro všechna zařízení včetně kódu k vložení.

Favicon.io Jednodušší alternativa. Umožňuje vytvořit favicon i z textu nebo emoji.

Canva Pokud nemáte logo, můžete si jednoduché logo a favicon vytvořit přímo v Canvě.

Favicon pro různá zařízení

Profesionální přístup zahrnuje vytvoření optimalizovaných verzí pro každou platformu:

1. Prohlížeče: favicon.ico (multi-size) + favicon.svg
2. Apple: apple-touch-icon.png (180x180)
3. Android: android-chrome-192x192.png, android-chrome-512x512.png
4. Windows: mstile-150x150.png

RealFaviconGenerator vám vygeneruje všechny najednou včetně souboru site.webmanifest pro PWA.

Jak přidat favicon na web

WordPress

Nejjednodušší způsob. WordPress má favicon zabudovaný od verze 4.3.

1. Jděte do Vzhled -> Přizpůsobit -> Identita webu
2. Klikněte na Vybrat ikonu webu
3. Nahrajte obrázek minimálně 512x512 px
4. WordPress automaticky vytvoří všechny potřebné velikosti

Pokud používáte CMS jako WordPress, máte favicon vyřešený za 2 minuty.

Shoptet

1. Přihlaste se do administrace
2. Jděte do Nastavení -> Nastavení šablony
3. Najděte sekci Favicon nebo Ikona webu
4. Nahrajte soubor favicon.ico (32x32 nebo 48x48 px)

HTML kód

Pro custom weby vložte do sekce <head> tento kód:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<link rel="manifest" href="/site.webmanifest">

<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">

Soubory umístěte do kořenového adresáře webu (vedle index.html).

Favicon a SEO: Je to ranking faktor?

Přímý vliv na pozice ve vyhledávání? Ne.

Google nikdy nepotvrdil, že favicon je ranking faktor. Váš web nebude výš v pozicích jen proto, že máte hezkou ikonu.

Ale nepřímý vliv existuje:

1. CTR ve výsledcích - Profesionálně vypadající výsledek s faviconem může mít vyšší proklikovost. A CTR je signál, který Google sleduje.

2. Důvěryhodnost (E-E-A-T) - Web bez faviconu působí nedůvěryhodně. A důvěryhodnost je součástí hodnocení kvality.

3. Brandové vyhledávání - Konzistentní vizuální identita (logo, favicon, barvy) posiluje rozpoznatelnost značky a brandové vyhledávání.

Takže i když favicon není přímý ranking faktor, jeho absence může negativně ovlivnit metriky, které Google sleduje.

Souvislost se SEO

Favicon je technický prvek webu, který přímo ovlivňuje, jak váš web vypadá ve výsledcích vyhledávání. Od roku 2019 Google zobrazuje favicony v mobilních výsledcích a od března 2023 i v desktopových výsledcích vedle URL adresy. Kvalitní a rozpoznatelná ikona tak může zvýšit míru prokliku (CTR) - uživatelé přirozeně klikají na výsledky, které vypadají profesionálně a důvěryhodně. Web bez faviconu nebo s výchozí ikonou působí nedokončeně a může ztratit kliky ve prospěch konkurence.

Z technického hlediska SEO je důležité správně implementovat favicon podle Google Guidelines. Google vyžaduje, aby favicon byl čtvercový, měl alespoň 48x48 pixelů a byl přístupný pro crawlování (nezablokovaný v robots.txt). Špatně nastavený favicon se v SERP nezobrazí nebo se zobrazí generická ikona. Zkontrolujte v Google Search Console, zda váš favicon Google správně indexuje.

Favicon také souvisí s celkovou technickou kvalitou webu, kterou Google hodnotí v rámci E-E-A-T signálů. Profesionálně vypadající web s konzistentní vizuální identitou buduje důvěru uživatelů i vyhledávačů. Nezapomeňte na správné meta tagy pro favicon, Apple Touch Icon pro iOS zařízení a web manifest pro PWA aplikace. Tyto technické detaily sice nejsou přímými ranking faktory, ale přispívají k celkovému vnímání kvality vašeho webu.

Často kladené otázky

1. Jak velký by měl být favicon?

Minimálně 16x16 pixelů pro základní zobrazení. Pro pokrytí všech zařízení vytvořte zdrojový obrázek 512x512 px a nechte generátor vytvořit menší verze.

2. Jaký formát favicon je nejlepší?

Pro maximální kompatibilitu použijte kombinaci: favicon.ico (pro starší prohlížeče) a favicon.svg (pro moderní). SVG má výhodu, že se škáluje bez ztráty kvality.

3. Proč se mi favicon nezobrazuje?

Nejčastější příčiny: špatná cesta k souboru, cache prohlížeče (vymažte ji), nebo chybí správný HTML tag v hlavičce. Zkontrolujte konzoli prohlížeče (F12) pro případné chyby.

4. Můžu použít emoji jako favicon?

Ano, technicky to jde. Ale nedoporučuji to. Emoji vypadají jinak na různých zařízeních a nepůsobí profesionálně. Pro firemní web použijte vlastní grafiku.

5. Jak často měnit favicon?

Zřídka nebo vůbec. Favicon je součástí vaší vizuální identity jako logo. Měňte ho pouze při rebrandingu nebo významné změně značky. Časté změny matou uživatele.

Závěr

Favicon je drobnost, která zabere 10 minut práce a slouží roky. Přesto na něj mnoho firem zapomíná.

Pokud ještě nemáte favicon, použijte RealFaviconGenerator.net, nahrajte své logo a do 5 minut máte hotovo.

A pokud řešíte celkovou optimalizaci webu pro vyhledávače, favicon je jen malý kousek skládačky.

Potřebujete pomoct s technickým SEO?

Favicon je základ. Ale co rychlost webu, správné přesměrování, indexace a strukturovaná data? Provedu technický audit vašeho webu a odhalím, co brzdí vaše pozice.

Chci technický audit webu

Související články

• PageSpeed Insights: Jak číst metriky a zrychlit web
• SERP features: Jak získat zvýrazněné pozice ve vyhledávání
• CTR: Jak zvýšit míru prokliku