Vytvoření shortcut (favicon) ikony pro HTML stránky

Většina Internetových prohlížečů v současné době podporuje i tzv. shortcut ikony (favicony - což je zkrácenina ze slov "favorites icon") na webových stránkách, což jsou malé ikony, které jsou zobrazeny buď v URL baru nebo na záložce s danou stránkou, případně se zobrazují v seznamu bookmarků.

Vytvoření faviconu

Jako základ pro favicon nám poslouží obrázek o velikosti 16 x 16px, který může být buď ve formátu *.png, *.jpg nebo *.pnm. Tento obrázek můžeme vytvořit v libovolném grafickém editoru (například GIMP). Já pro tento účel využiji pouze příkazovou řádku a program convert, který je součástí programového balíku ImageMagick. Následujícím příkazem vytvořím obrázek o velikosti 16 x 16px a uložím jej pod názvem favicon.png.

convert -size 16x16 xc:yellow -stroke black -linewidth 2 -draw "line 2,2 12,12" \ 
-stroke black -linewidth 2 -draw "line 12,2 2,12" favicon.png

Takto vytvořený obrázek je následně zapotřebí zkonvertovat do formátu *.ico, což můžeme udělat s pomocí programu ppmtowinicon, který je součástí balíčku netpbm-progs a to následovným způsobem:

pngtopnm favicon.png | ppmtowinicon -output favicon.ico

Umístění faviconu do HTML stránky

Samotné umístění faviconu do HTML stránky je snadné. Stačí favicon nakopírovat do příslušného adresáře (například s obrázky) webu a v HTML kódu na něj uvést odkaz.

<html>
<head>
  <title> ... </title>
  <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" title="my website">
</head>
...

Naposledy změněno: 23.10.2006 12:17