Favicon je malý obrázek, který se dříve zobrazoval v adresním řádku prohlížeče. Dnes jej uvidíte spíše v záložkách a vedle adres, které si uloží návštěvník mezi oblíbené do lišty prohlížeče. Ačkoliv se nezdají jako nějak zvláště užitečné, mohou odlišit váš web od ostatních a pomoci s budováním osobní značky. Pokud máte komerční stránky, měli byste zvážit použít logo jako favicon.

Obecně se jako favicon používá obrázek o velikosti 16×16 pixelů ve formátu ICO. Moderní prohlížeče už zvládají 32×32 pixelů a formát PNG. Pokud ale chcete zachovat zpětnou kompatibilitu neobejdete se bez konverze do ICO. ICO je multiformát, to znamená že bude obsahovat jak 16×16 pixelu v 16 barvách tak i 32×32 pixelů v 265 barvách.

Doporučuji si obrázek nejdříve vytvořit v nějakém grafickém editoru. Můj oblíbený je GIMP. Ačkoliv se nejedná o Photoshop, umí toho opravdu hodně, ale hlavně je zdarma. Chce to si s ním pár hodin pohrát, projít pár tutoriálů a můžete jej používat prakticky na cokoliv. Na vytvoření favicon vám však bude stačit i Kreslení ve Windows.

Začnete obrázkem o velikosti 128×128. Nemá moc cenu řešit detaily o většinu stejně přijdete. Po dokončení obrázku jej zmenšete na 32×32 pixelů. Uložte do formátu PNG.

Konvertování z PNG do ICO proveďte prostřednictvím některého z online nástrojů. Například Favicon generator. Existují na to i offline nástroje. Na pár obrázků je ale zbytečné je instalovat.

Obrázek, který získáte se musí jmenovat favicon.ico. Dále jej musíte nahrát do hlavního adresáře, tak aby se nacházel na: vašedoména.cz/favicon.ico K tomu je ideální připojit se k hostingu přes FTP.

Teď je nutné vložit (mezi tagy head) do hlavičky stránky následující kód:

<link rel="icon" href="http://vašedoména.cz/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://vašedoména.cz/favicon.ico" type="image/x-icon" />

vašedoména.cz samozřejmě nahraďte vlastní doménou. V případě že používáte www, tak jej nezapomeňte přidat.

To můžete udělat pomocí nějakého pluginu. Umí to například některé SEO pluginy. Popřípadě zvolit nějaký na to specializovaný, který umí přidávat kód do hlavičky (header). Dále je možné editovat přímo šablonu (theme). Informace hlavičky se nachází většinou v souboru header.php. Pozor v případě aktualizace šablony bude nutné vložit kód znovu.

Favicon okamžitě neuvidíte. Prohlížeč většinou pracuje s cache a je nutné dát minimálně CTRL+F5. Popřípadě můžete použít FaviconValidator.

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInBuffer this page