Ikona stránky

nazývaná též favicon.ico

Možná jste si někdy všimli, že máte v prohlížeči před adresou stránky nějaký obrázek.

Příklad ikony oblíbené adresy

ikonka Oskarmobilu

ikonka služby freesms

vyhledávací služba Atomz

Jak zařídit, aby se ta ikona zobrazovala i čtenářům vaší stránky?

Internet Explorer: oblíbené

Čtenáře používající Internet Explorer musíte napřed přesvědčit, aby si vaši stránku přidal do oblíbených. Bez toho to nejde. (Nejlepší metodou takového přesvědčování je kvalita stránek.)

Jakmile si čtenář přidá stránku k oblíbeným, podívá se jeho prohlížeč (Internet Explorer) ještě jednou na server a hledá tam patřičnou ikonu. Pokud ji nalezne, bude tuto ikonu napříště zobrazovat před adresou a ve výpisu oblíbených stránek.

U jiných prohlížečů než Internet Explorer nemusí uživatel přidávat stránku do oblíbených.

favicon.ico

Ikona má přesné jméno -- favicon.ico . Jak pravděpodobně víte, ico je přípona formátu ikony. Raději ji vždy píšu malými písmeny.

Slovo "favicon" je zřejmě zkratkou anglického "favorite icon".

Umístění ikony

Ikona se musí jmenovat favicon.ico, jinak ji prohlížeče nenaleznou. Různé verze Internet Exploreru se ale liší v tom, kde ji primárně hledají. Některé ji na serveru hledají ve stejném adresáři, jako je oblíbená stránka, jiné v rootu webu (tedy na symbolické adrese http://něco.něco.cz/favicon.ico).

Podle mých zkušeností se dívají spíše do rootu webu. (Ocením vaše poznatky, protože nemám čas to moc testovat.) S tím je ale spojený problém v případě, že publikujete na veřejném serveru bez třetí domény, např. www.mujweb.cz/www/vasejmeno, protože prohlížeč bude favicon.ico hledat na adrese www.mujweb.cz/favicon.ico. Tam ji nenajde, nebo přinejlepším najde nějakou úplně jinou. Neznám řešení.

Jak vytvořit ikonu

Nejlepší je netvořit ji, ale někde zkopírovat. Pokud vám toto minimalistické řešení přijde nudné, budete na tvorbu a úpravu ikon potřebovat nějaký grafický program (například windowsovské Malování). Pokud program nepodporuje přímo formát *.ico, uložte obrázek do souboru *.bmp (16 x 16 bodů) a pak ho prostě přejmenujte na favicon.ico. Není to úplně košer postup, ale pro tento účel někdy dostačuje. Někdy to ale nefunguje, pak je potřeba použít specializovaný konverzní program (zkuste třeba http://www.winterdrache.de/freeware/png2ico/) nebo on-line nástroj (doporučuji http://www.chami.com/html-kit/services/favicon/ -- zadejte obrázek ze svého disku a pak Download Favicon)

Vlastnosti ikony

Ikona může mít rozměry 32 x 32 nebo 16 x 16, ba i jiné. Pro případ oblíbené webové ikony vřele doporučuji rozměr 16 x 16, protože se větší stejně ve většině případů zobrazovat nebude. Větší rozměr by vás jenom pletl při práci a výsledně by se zdeformoval. (Tuto chybu jsem samozřejmě také udělal.)

Multiformat ICO

Vilém Málek radí následující:

Vyplatí se ikonu vytvořit jako tzv. multiformát ICO (a nikoli PNG, který to neumí) Mela by obsahovat jednu verzi ikony ve velikosti 16x16 pixelů a v 16 barvách (ta se použije v prohlížeči) a také verzi ve velikosti 32x32 bodu ve 256 barvách (použije se při uložení ikony na pracovní plochu a také tehdy, když má uživatel nastaven monitor na vysoké rozlišení a zapnuty tzv. "velké" ikony).

Podoba ikony

Pokud někomu přijde rozměr 16 x 16 jako výborný tvůrčí prostor, tak mě tedy ne. Opravdu nemá smysl tvořit nějaké umělecké dílo. Zvolte něco jednoduchého.

ikonka OskarmobiluZářným příkladem může být červeno-bílá ikonka Oskara.

Stejně jediným účelem ikonky je zaujmout čtenářovo oko mezi jinými oblíbenými položkami, které mají v menu před sebou jenom bílou stránku s modrým éčkem.

Řešení pro IE 6

Pro šestou verzi Internet Exploreru je prý možno definovat ikonu ke každé stránce zvlášť (ne pouze jednu pro celý adresář). Navíc se ikona má zobrazovat v každém případě, ne pouze v případě přidání stránky do oblíbených. Zápis by měl vypadat takto: 

<link rel="shortcut icon" href="ikona.ico">

Tento tag se samozřejmě dává do hlavičky (je to podobné linkování stylopisu). 

Podle informací od Viléma Málka (děkuji) výše zmíněný zápis respektuje i Mozilla minimálně od verze 1.6 a Opera od verze 7. Jak jsem zjistil později, Opera 7.5 už to zase nebere.

Řešení pro Mozillu a Operu

Na stránkách prohlížeče Mozilla je uvedeno následující použítí:

<link href="favicon.png" rel="icon" type="image/png" />

Funkčnost jsem netestoval. Kdyby to ale fungovalo, tak je zajímavé, že se dá používat i obrázek typu png a zápis atributu rel je odlišný.

Některé verze Mozilly (prý 1.1 a 1.2) prý navíc načítají soubor favicon.ico i bez toho, aniž by byla stránka přidána do oblíbených nebo obsahovala link. Upozornil mě na to zejména dj Padák. K tomu dodává:

Trochu jsem dumal nad těma ikonama vedle adresy a sledoval, co dělají jednotlivé prohlížeče. Mozilla 1.2.1cz načetla ikonu bez jakéhokoliv zápisu. Jen nevím, jestli tu *.ico nebo *.png...

Statistika

Pokud náhodou máte na serveru nastavené logování, můžete si z počtu přístupů na stránky udělat statistiku o "oblibě" vašich stránek. To můžete i bez ikony, protože v logu se "favicon.ico 404 nenalezeno" také zobrazí. Mimochodem, tímto způsobem jsem existenci nějaké "favicon" objevil.

Aktualizace 2004: favicon stahuje spousta softwaru i bez toho, aniž by si uživatel stránku uložil do oblíbených. Pro statistické účely už je to zcela nepoužitelné.

Podpora

Pouze Internet Explorer verze 4 a vyšší, Mozilla (nevím, od které verze). Jiný problém je v tom, že to občas záhadně nefunguje ani na těchto prohlížečích. Možná to závisí na nějakém nastavení, které neznám. Než začnete propadat depresi a šílet, že to nefunguje, zkuste si to na více než jednom počítači. Jo a taky to zřejmě nefunguje při testování z lokálního disku.

Vilém Málek nabízí následující vysvětlení:

MSIE si ikonu ukládá do systémové cache, kde vydrží maximální jeden měsíc, ostatní prohlížeče používají většinou své vlastní programové složky, takže je trvanlivost ikony neomezená. Pokud však dojde k poškození cache ikon systému Windows, všechny prohlížeče jsou stejně v loji. Z mechanismu ukládání ikon také vyplývá jejich nepřenostitelnost. (I když v bookmarcích třeba MSIE používá speciální element, kterým si adresu ikony trvale ukládá -- jenže ji později ignoruje.)

V květnu 2001 jsem si na linuxovském prohlížeči Konqueror (tak nějak se to píše) všimnul, že ikonu zobrazuje v adrese i před ne-oblíbenými stránkami. 

Uživatelská ikona

Ke svým oblíbeným položkám si přes jejich vlastnosti můžete navolit vlastní ikonu z disku.

o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

Základy Prvky stránek Barvy Provoz webu

Jak psát web píše Yuhů, Dušan Janovský. Kontakt. Poslední aktualizace 13. února 2005.