 |
|
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.
|