Jak vytvořit ikony pro webové stránky

Přihlásit neb zaregistrovat.

Články

ikonu stránky

Bookmark this page

	Del.icio.us
	Digg it
	StumbleUpon
	Yahoo MyWeb
	Furl it

Jak vytvořit ikonu webové stránky (fav-ikonu)?

20. září 2005

Tento návod popisuje, jak přiřadit internetovým stránkám ikonku tak, aby se zobrazovala návštěvníkům v adresním řádku a v oblíbených položkách. Uvedené postupy fungují s prohlížeči Internet Explorer i Mozilla Firefox.

Tento návod předpokládá, že máte základní znalosti o ikonách a HTML.

Fav-ikona dává webovým stránkám charakter

Fav-ikona je malý obrázek zobrazovaný internetovým prohlížečem v adresním řádku, v okně s oblíbenými položkami a v menu. Fav-ikony jsou podporovány Internet Explorerem i Mozillou Firefoxem.

Fav-ikona v Mozille Firefox.

Fav-ikona v Internet Exploreru.

Fav-ikona není povinnou součástí webové stránky. Pokud chybí, použijí prohlížeče výchozí ikonu. Na druhou stranu, elegantní fav-ikona dává stránce identitu a uživatel ji rychleji identifikuje v seznamu oblíbených odkazů.

Vytvoření fav-ikony

Fav-ikona je zcela standardní ikona, která obsahuje obrázky velikosti 16x16 pixelů. Pro zachování kompatibility se staršími systémy by ikona měla obsahovat obrázek v nižší barevné hloubce (16 nebo 256 barev). Dnešní prohlížeče ale využijí a preferují vyhlazené 32bitové obrázky s alfa kanálem. Obrázky s většími rozměry nejsou nutné a pouze by zvětšily velikost ikony na disku (a prodloužili tak čas stahování z internetu), takže je doporučeno je nepoužívat.

Fav-ikonu lze vytvořit v libovolném editoru ikon. Použijte např. RealWorld Icon Editor nebo některý z ostatních editorů (vyberte si ze seznamu editorů v našem adresáři). Chcete-li vytvořit jednoduchou fav-ikonu, aniž byste museli cokoli instalovat, vyzkoušete online editor na fav-ikony. Podporuje pouze 16-ti barevné ikony, ale pro vytvoření jednoduché ikony je dostačující. Jakmile máte ikonu hotovou, přejmenujte ji na favicon.ico a nahrajte na Váš server.

Přiřazení ikony stránce

Aby se ikona zobrazovala návštěvníkům stránky, musíte upravit zdrojový kód stránky (html). Přidejte tuto řádku do sekce <head> ve Vaší stránce:

<link rel="shortcut icon" href="/favicon.ico">

Následující příklad ukazuje kompletní zdrojový kód jednoduché stránky s fav-ikonou:

<html>

<head>

<title>Název mojí stránky!</title>

<link rel="shortcut icon" href="/favicon.ico">

</head>

<body>

Stránka není prázdná. Vidíte?

</body>

</html>

Poznámky k jednotlivým prohlížečům

Internet Explorer

Internet Explorer podporuje favikony od verze 5.0. Donutit IE zobrazovat favikony není nijak jednoduché. Pokud se Vaše ikona nezobrazuje, zkuste následující postupy:

Přidejte svoji stránku do oblíbených položek. Máte-li už stránku mezi oblíbenými, odstraňte ji a přidejte ji znovu.
Ujistěte se, že soubor s obrázkem se jmenuje favicon.ico a je umístěn v kořenovém adresáři serveru.
Ujistěte se, že cesta k ikoně v hlavičce stránky je absolutní, ne relativní.
Vyprázdněte složku s dočasnými soubory Internet Exploreru. Pokud tato složka dosáhla své maximální velikosti, fav-ikona nemusí být stažena.
Pokud nic z uvedeného nepomohlo, zanechte nám vzkaz na konci této stránky.

Mozilla Firefox

Prohlížeče odvozené od Mozilly nemají s fav-ikonami problémy. Není třeba přidávat stránku mezi oblíbené, ikona je automaticky zobrazena v adresním řádku a případně i v hlavičce záložky. Mozilla zobrazí ikonu, i pokud soubor není pojmenován favicon.ico. Můžete tedy různým stránkám webu dát různé favikony.

Komentáře

Zobrazit všechny komentáře.

Neznámý autor (2007-03-01 00:00:00): Omlouvám se, už to funguje :)
Kulda

Neznámý autor (2008-04-05 00:00:00): ale kde mam najit ten zdrojovej kod koukal sem do indexu a tam taky neni to html body atd.. prosim poradte

Vlasta (2008-04-07 00:00:00): To zaleží na systému, který používáte.

Neznámý autor (2008-05-31 00:00:00): mě to nejede na internetu, ale na pc to jede

Neznámý autor (2008-07-08 00:00:00): ikona se může dát podlě mě kamkoliv, pokud na ni správně odkazujeme. Já ji mám ve standardní složce "images". Ale myslím si, že to je jedno... Stačí to jen otestovat :-)

Neznámý autor (2008-09-01 00:00:00): Můžete mi někdo poradit proč se mi ikona zobrazuje pouze na adrese http://xxxxx.cz a né na adrese http://www.xxxxx.cz Zkouším to v IE i v Mozille. Děkuji

Neznámý autor (2008-11-28 00:00:00): Mě vše funguje! Mám jiný problém, změnil jsem ikonku, ale na prohlížeči se mi stále zobrazuje ta stará! Co mám dělat?

Vlasta (2008-11-28 00:00:00): Vyprázdnit cache nebo dlouho počkat ;-).

Neznámý autor (2009-07-10 00:00:00): Panove ale jak se dela pohyblivy " favicon "
nemohu na to prijit ...
treba jak je tady :

Vlasta (2009-07-11 00:00:00): Je to .gif obrázek, ale nefunguje to ve všech prohlížečích.

Přidat komentář

Před přidáváním příspěvku je doporučeno se přihlásit nebo zaregistrovat.