Jak vytvořit ikony pro webové stránky

Nepřihlášen(a).

Články

Co je to ...

Jak udělat ...

ikonu stránky

Online editor ikon

Bookmark this page

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

Seznam kvalitních webů k tématu: Grafické zdroje

Návody a výuka, Vývoj aplikací, Věda a výzkum, Online služby, Design stránek

Windows Vista ikony

Přečtěte si, jak se Vista ikony liší od XP ikon.

Zjistěte, jak RealWorld editor ikon podporuje Vista ikony.

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

Neznámý autor (2006-06-12): nejak mi to nejede :-(

Vlasta (2006-06-13): S Internet Explorerem je to tezke, je potreba dodrzet vsechny detaily, jakkoli se muzou zdat nedulezite. A nekdy to na pocitaci, kde se to testovalo, stejne nezobrazi.

Neznámý autor (2007-01-30): Ahoj,kdo je administrátor? Potřebuju trochu poradit, musim si ten program na fav-ikony stáhnout, že jo? Předem díky za odpověď.

Vlasta (2007-01-30): Jde o to, který. Online sluzba funguje bez stazeni, ale zase tolik toho neumi. Hmm, jo a jeji anglicka varianta je o neco lepsi.

Neznámý autor (2007-03-01): Dobrý den, vytvořit ikonku a vložit kod do hlavní šablony jsem zvládl, ale nevím kam mám ikonku uploadnout. Mám stránky na eStránkách, adresa http://rhodan.estranky.cz a tam mám možnost vkládat obrázky a soubory, které se ukládají do: http://www.rhodan.estranky.cz/archiv/iobrazek/??? nebo: http://www.rhodan.estranky.cz/archiv/uploaded/???. Ale jak uložit favicon do Rootu na těchto stránkách bohužel nevím. Proto se na Vás obracím s prosbou o pomoc. Ve Firefoxu si ikonku tahá i ze složky uploaded, ale IE nemůžu donutit. Děkuji za odpověď.
S pozdravem Kulda :)

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

Neznámý autor (2008-04-05): 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): To zaleží na systému, který používáte.

Přidat komentář

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