Jak vytvořit favicon pro váš web

Favicon je malá ikona, která se zobrazuje v záložce prohlížeče vedle názvu stránky. Každý profesionální web na kvalitním hostingu by měl favicon mít. I když se zdá jako nepatrný detail, je favicon ve skutečnosti velmi důležitým prvkem vaší značky na internetu. Bez něj váš web působí neprofesionálně a návštěvníci hůř poznají vaši záložku mezi desítkami otevřených stránek.

Co je favicon a proč na něm záleží?

Favicon (zkratka z „favorites icon") je malá ikona zobrazovaná na mnoha místech: v záložce prohlížeče, v seznamu záložek, v historii prohlížení, na domovských obrazovkách mobilních zařízení a dokonce i ve výsledcích vyhledávání Google. Tato ikona pomáhá uživatelům rychle identifikovat váš web a přispívá k profesionálnímu vzhledu vaší online prezentace.

Z pohledu uživatelské zkušenosti je favicon klíčový. S dobrým faviconem a kvalitním názvem webu bude váš web snadno rozpoznatelný. Když má uživatel otevřených 15 záložek, je favicon jediným způsobem, jak vizuálně rozpoznat, která záložka patří vašemu webu. Bez faviconu zobrazuje prohlížeč obecnou ikonu glóbu nebo prázdného dokumentu, což okamžitě vyvolá neprofesionální dojem.

Jaké velikosti faviconu jsou potřeba?

Moderní prohlížeče a zařízení vyžadují favicony v různých velikostech. Zde jsou ty nejdůležitější:

16x16 pixelů – klasická velikost pro záložku prohlížeče. To je minimální velikost, kterou by měl mít každý web.

32x32 pixelů – používá se pro záložky a hlavní panel ve Windows. Velmi častá velikost.

48x48 pixelů – ikona webu ve Windows. Používá se, když si uživatel přidá zástupce na plochu.

180x180 pixelů (apple-touch-icon) – pro zařízení iOS, když si uživatel přidá web na domovskou obrazovku. Apple tuto velikost používá pro všechna zařízení iPhone a iPad.

192x192 a 512x512 pixelů – pro zařízení s Androidem a Progresivní webové aplikace (PWA). Tyto velikosti se definují v souboru manifestu webové aplikace.

Kromě standardního formátu .ico, který podporuje více velikostí v jednom souboru, se dnes používají i formáty .png a .svg. Formát SVG je obzvlášť praktický, protože se škáluje bez ztráty kvality.

Jak vytvořit favicon – nástroje

Existuje několik způsobů, jak favicon vytvořit, od zcela bezplatných až po profesionální nástroje:

RealFaviconGenerator.net – Jde o nejlepší bezplatný nástroj pro generování faviconů. Nahrajete jeden obrázek (doporučená velikost 512x512 nebo větší) a nástroj automaticky vygeneruje všechny potřebné velikosti včetně apple-touch-icon, ikon pro Android a dlaždicových ikon pro Windows. Generuje také HTML kód, který stačí zkopírovat do hlavičky webu.

Favicon.io – Jednoduchý nástroj, který umožňuje vytvořit favicon z textu, emoji nebo nahraného obrázku. Hodí se zejména, když chcete favicon obsahující iniciály vaší značky – stačí zadat písmena, zvolit font a barvu a nástroj vygeneruje všechny potřebné soubory.

Canva – Pokud chcete mít nad designem větší kontrolu, můžete pomocí Canvy vytvořit ikonu o velikosti 512x512 a poté použít RealFaviconGenerator k vygenerování všech velikostí.

Adobe Illustrator nebo Figma – Pro profesionální designéry, kteří chtějí plnou kontrolu. Vytvořte ikonu v SVG a exportujte ji v požadovaných velikostech.

Tipy pro dobrý design faviconu

Favicon je extrémně malý, takže design musí být jednoduchý a rozpoznatelný. Zde jsou klíčové tipy:

Používejte jednoduché tvary – písmena, geometrické formy nebo stylizované symboly. Detailní loga nejsou při 16x16 pixelech vidět. Pokud má vaše logo text, použijte jen iniciály nebo ikonografický prvek.

Volte kontrastní barvy, které dobře fungují na světlém i tmavém pozadí. Mnoho prohlížečů má tmavý režim, takže otestujte, jak váš favicon vypadá na obou pozadích.

Vyhněte se přílišnému množství detailů. Při 16x16 pixelech je vidět každý pixel. U faviconů platí, že méně je více.

Jak přidat favicon na WordPress web

WordPress má vestavěný systém pro nastavení faviconu zvaný „Ikona webu" (Site Icon). Postup je následující:

1. Přejděte v administraci WordPressu do Vzhled > Přizpůsobit.

2. Klikněte na Identita webu.

3. V sekci Ikona webu klikněte na „Vybrat obrázek" a nahrajte svou ikonu. WordPress doporučuje obrázek o velikosti alespoň 512x512 pixelů.

4. WordPress automaticky vygeneruje všechny potřebné velikosti a přidá příslušné meta značky do hlavičky webu.

To je nejjednodušší metoda a funguje se všemi moderními šablonami WordPressu. Nepotřebujete žádné doplňky ani ruční úpravy kódu.

Jak přidat favicon na HTML web

U statických HTML webů je třeba ručně přidat značky link do sekce <head> vašeho HTML. Po vygenerování všech velikostí faviconu pomocí RealFaviconGenerator získáte kód podobný tomuto:

Soubor favicon.ico umístěte do kořenového adresáře webu (vedle index.html). Poté do sekce head přidejte značky link pro různé velikosti: link rel="icon" pro standardní favicon, link rel="apple-touch-icon" pro zařízení iOS a link rel="manifest" pro podporu PWA.

Je důležité, aby byly soubory dostupné na cestách, které jste uvedli v HTML. Doporučuje se, aby favicon.ico byl v kořenovém adresáři, protože mnoho prohlížečů tento soubor na daném místě automaticky hledá.

Testování faviconu

Po instalaci favicon otestujte takto: otevřete web v různých prohlížečích (Chrome, Firefox, Safari, Edge), přidejte si web do záložek a zkontrolujte, že se ikona zobrazuje, otestujte na mobilu a použijte nástroj RealFaviconGenerator Checker, který ověří, že jsou všechny velikosti správně implementovány.

Mějte na paměti, že prohlížeče favicony agresivně cachují. Pokud jste favicon změnili a změnu nevidíte, zkuste tvrdé obnovení (Ctrl+Shift+R) nebo vymažte cache prohlížeče. K cestě faviconu můžete také přidat parametr query stringu, který obnovení vynutí.

Závěr

Favicon je malý, ale důležitý detail, který přispívá k profesionálnímu vzhledu vašeho webu. S bezplatnými nástroji jako RealFaviconGenerator je vytvoření a implementace faviconu otázkou 10 minut. Tento prvek nezanedbávejte – je součástí prvního dojmu, který váš web na návštěvníky udělá.