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.

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.

Jak vytvořit ikonu

Nejlepší je netvořit ji, ale někde zkopírovat. Pokud vám toto minimalistické řešení přijde nudné, pak:

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 nové prohlížeče

Pro šestou verzi Internet Exploreru je prý možno definovat ikonu ke každé stránce zvlášť (ne pouze jednu pro celý adresář). 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). 

Výše zmíněný zápis zřejmě respektují 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, kdežto Opera 8 už zase jo.

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. Je tomu tak v Mozille a v Opeře, ovšem v Exploreru 6 mi to tak nefunguje.

rel="icon"

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

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

Všimněte si, že se dá používat i obrázek typu png a gif a zápis atributu rel je odlišný. Jak jsem později zjistil, zápis type je nepovinný.

Pokud se jako ikona použije gif, může být i animovaný, což ovšem sežere akorát Mozilla. Opera animovaný gif zobrazit odmítá a ikonu v takovém případě nezobrazí vůbec.

Novější verze Mozilly 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.

Teoreticky lze použít i zápis "shortcut icon" z toho důvodu, že správně fungující prohlížeče mají hodnoty atributu rel chápat jako položky oddělené mezerou (přitom "shortcut icon" obsahuje "icon").

Platí to pozdější

Pokud se budete pokoušet oba zápisy zkombinovat, nemá to cenu. Vždycky platí jenom poslední zápis, ať už se to zapíše přes "shortcut icon" nebo jenom "icon".

Podpora favicon.ico

Občas favicon záhadně nefunguje. 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.

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB

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 Tvorba webu

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.