Jak vytvořit ikony pro webové stránky
Jak vytvořit ikony pro webové stránky
RealWorld Graphics logo    English 
Přihlásit neb zaregistrovat.   
PřehledSoftwareGrafikaČlánkyDiskuzeUživatelé

Co je to ...
Jak udělat ...
ikonu stránky
Online editor ikon
Odkazy
Prohledat tento web Google

Bookmark this page

del.icio.us iconDel.icio.us
Digg iconDigg it
StumbleUpon iconStumbleUpon
Yahoo MyWeb iconYahoo MyWeb
Furl iconFurl it


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.

Výběr pozadí

Přál bych si tu mít...

   

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.

Anonymous
on April 5th 2008
ale kde mam najit ten zdrojovej kod koukal sem do indexu a tam taky neni to html body atd.. prosim poradte
Vlasta
on April 7th 2008
To zaleží na systému, který používáte.
Anonymous
on May 31st 2008
mě to nejede na internetu, ale na pc to jede
Anonymous
on July 8th 2008
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 :-)
Anonymous
on September 1st 2008
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
Anonymous
on November 28th 2008
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
on November 28th 2008
Vyprázdnit cache nebo dlouho počkat ;-).
Anonymous
on July 10th 2009
Panove ale jak se dela pohyblivy " favicon "
nemohu na to prijit ...
treba jak je tady :
Vlasta
on July 11th 2009
Je to .gif obrázek, ale nefunguje to ve všech prohlížečích.
Anonymous
on November 19th 2009
Thanks funny site

Copyright © 2005-2010 RealWorld Graphics. Kontakt: info@rw-designer.com.