Favicon, krátké spojení slov "favorite" a "icon", je malá, ale významná součást každé webové stránky. Jedná se o ikonu, která reprezentuje vaši stránku v záložkách prohlížeče, historii navštívených stránek, panelech a na dalších místech. Přidání favicony na váš web je snadný proces, který může výrazně zlepšit uživatelskou zkušenost a rozpoznatelnost vašeho webu. V následujícím článku vám ukážeme, jak na to.
Příprava favicony
Než začnete, budete potřebovat samotnou ikonu. Ideální velikost favicony je 16x16 nebo 32x32 pixelů. Faviconu můžete vytvořit v jakémkoliv grafickém editoru, který umožňuje ukládat obrázky ve formátu .ico, což je standardní formát pro tyto ikony. Alternativně můžete použít online generátory favicon, které vám umožní vytvořit nebo převést vaši ikonu do požadovaného formátu.
Vložení favicony do vašeho webu
Po přípravě ikony je čas ji přidat na váš web. Toho dosáhnete vložením HTML kódu do hlavičky (<head>) vašich webových stránek. Zde je základní příklad kódu, který můžete použít:
<link rel="icon" type="image/png" href="/favicon.png">
V tomto příkladu nahraďte favicon.png cestou k vaší faviconě. Pokud jste si vytvořili faviconu ve formátu .ico, vaše linka by měla vypadat takto:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
Podpora různých zařízení a prohlížečů
Moderní weby často používají více velikostí favicon pro různá zařízení a prohlížeče. K tomu můžete v hlavičce stránky přidat více odkazů na různé velikosti ikon. Například:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<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="manifest" href="/site.webmanifest">
Tento přístup zajišťuje, že vaše Webová stránka bude mít správnou ikonu na všech zařízeních a v různých prohlížečích.
Přidání favicony na váš web je jednoduchý krok, který může významně přispět k lepší uživatelské zkušenosti a profesionálnějšímu vzhledu vašeho webu. Postupujte podle výše uvedených kroků a ujistěte se, že vaše favicona je viditelná na všech zařízeních a ve všech prohlížečích. S trochou kreativity a technické znalosti můžete svůj web snadno odlišit od konkurence.
