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 nebo na oušku karty nějaký obrázek.

ikonka Oskarmobilu

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

favicon.ico

Ikona je obrázek a 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". Prapůvodní využití této ikony bylo totiž jako ilustrační obrázek při uložení stránky do oblíbených.

Umístění ikony

Pokud se ikona bude jmenovat favicon.ico a bude v kořeni webu, prohlížeče ji naleznou automaticky.

Jestliže chcete (nebo musíte) mít ikonu jinde, snadno na ni lze odkázat pomocí tagu <link>. Zápis je tento:

<link rel="shortcut icon" href="ikony/web.ico" type="image/x-icon">

V příkladu určuje atribut href umístění ikony, v tomto případě v adresáři ikony. Pak se může i libovolně jmenovat.

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.

Od doby, co existují chytré telefony, může být ikona

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 ikonkami, které mají na oušku záložky.

Ikony pro mobily

Zatímco desktopové počítače používají favicony pro vykreslení na ouškách záložek nebo před adresou, mobilní prohlížeče podle mých zkušeností příliš favicony nezobrazují. To jim ale nebrání v jejich stahování na pozadí. V logu vidím, že si mobilní prohlížeč pro faviconu sáhne, ale nikde ji nezobrazí.

Například Safari na iPhone faviconu zobrazí jenom při přepínání záložek.

Důležitější jsou pro mobily jejich proprietální ikony, které si také zkoušejí stahovat. Používají je ale pouze v situaci, kdy si uživatel chce stránku přidat do oblíbených nebo na plochu. Tyto proprietální ikony mají asi dvanáct různých rozměrů, protože se výrobci prohlížečů a operačních systémů nejsou schopni dohodnout, jak velká má taková ikona být.

V případě Safari pro iPhony a iPady se prohlížeč snaží z rootu webu sáhnout si ikony pojmenované takto a v tomto pořadí:

přičemž ta oblast 120x120 se liší podle toho, jaký je to přesně iPhone nebo iPad. Může to být 144x144, 180x180 apod. Předem ale nevím, jakou velikost bude Safari chtít. Což je jedna zrada. Z toho plyne, že bych tam správně měl mít asi 12 rozměrů ikon. Druhá zrada je to, že v naprosté většině případů prohlížeč tu ikonu vůbec nijak nepoužije.

Dementi, fakt.

Poznámka k precomposed: jestli jsem to pochopil správně, liší se ikona s -precomposed tím, že má předem uříznuté zaoblené růžky.

V praxi to tedy řeším tak, že žádné apple-touch-icon-* na webu nemám. Když si náhodou někdo mou stránku dá na plochu, tak se jako ikona vytvoří malý screenshot. To sice není ideální, ale přijde mi to lepší než mít v rootu webu bordel z nějakých ikon.

 

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.