Favicon (zkratka pro "favorite icon") je malá ikona, která reprezentuje vaši webovou stránku v prohlížeči uživatele. Typicky se zobrazuje v záložkách prohlížeče vedle názvu stránky, v historii prohlížeče, a také jako ikona, když si uživatel uloží odkaz na vaši stránku na plochu nebo do záložek. Vytvoření a implementace favicon na vaší webové stránce je důležitým krokem pro zvýšení její rozpoznatelnosti a profesionality. Následující kroky vám ukážou, jak toho dosáhnout.
1. Vytvoření favicon
a. Volba designu: Favicon by měl být jednoduchý, rozpoznatelný a v souladu s vaší značkou. Vzhledem k velmi malému rozměru (obvykle 16x16, 32x32, nebo 64x64 pixelů) by design měl být co nejméně složitý.
b. Nástroje pro vytvoření: K vytvoření favicon můžete použít grafické editory jako Adobe Photoshop, GIMP, nebo online nástroje určené speciálně pro tvorbu favicon, jako jsou Favicon.io nebo RealFaviconGenerator.
c. Formáty souborů: Nejčastějším formátem pro favicon je ICO, který podporuje více velikostí v jednom souboru. Nicméně, moderní webové prohlížeče podporují i další formáty jako PNG, GIF, nebo SVG.
2. Přidání favicon na webovou stránku
Po vytvoření favicon je potřeba ho přidat do kódu vaší Webové stránky. Toho dosáhnete vložením odkazu na favicon do hlavičky HTML dokumentu.
a. Standardní implementace: Vložte následující kód do <head> části vašeho HTML dokumentu:
<link rel="icon" href="/cesta/k/ikoně/favicon.ico" type="image/x-icon">
b. Podpora různých zařízení: Pro lepší podporu na různých zařízeních a prohlížečích můžete do hlavičky přidat více verzí favicon v různých velikostech a formátech. Příklad:
<link rel="icon" sizes="16x16" href="/cesta/k/ikoně/favicon-16x16.png">
<link rel="icon" sizes="32x32" href="/cesta/k/ikoně/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/cesta/k/ikoně/apple-touch-icon.png">
3. Testování
Po přidání favicon do vaší webové stránky je důležité ověřit, že se ikona správně zobrazuje ve všech hlavních prohlížečích. To můžete provést otevřením vaší stránky v různých prohlížečích a zařízeních. Existují také online nástroje, které vám mohou pomoci favicon testovat, například RealFaviconGenerator.
Optimalizace a best practices
- Ujistěte se, že váš favicon je ve vysoké kvalitě a jasně identifikovatelný.
- Používejte konzistentní design favicon napříč všemi vašimi webovými stránkami a aplikacemi.
- Testujte zobrazení favicon na různých zařízeních a v různých prohlížečích, aby bylo zajištěno jeho správné fungování.
Vytvoření a implementace favicon je poměrně jednoduchý proces, který však může výrazně přispět k profesionálnímu vzhledu vaší webové stránky a zlepšení uživatelské zkušenosti.
