Tvoříme digitální svět a bojujeme za lepší grafiku a web!

K čemu je dobrý Favicon?

Favicon je malá 16x16 px ikonka, která se zobrazuje v záložce prohlížeče vedle názvu a v URL řádku před http://. Název je složený z anglických slov FavouriteIcon, proto FavIcon a pochází z dob kamenných, kdy se ještě neříkalo Internet Explorer 6/8/9/11, ale jen Internet Explorer☺ (konkrétně verze 5). Tenkrát se vám ikonka zobrazila pouze tehdy, pokud jste si stránku uložili do oblíbených, pak byla jak tam, tak v URL. 

Proč používat favicon

Nyní se může favicon používat u libovolné stránky, aniž by byla v uživatelových oblíbených a zobrazí se ihned po načtení webu. Vzhledem k velikosti by měla zobrazovat zjednodušený symbol vašeho loga (či jeho části) nebo pouze barvu. Je důležité, aby v tak malém rozlišení (16x16 px) šlo rozpoznat, co obsahuje a bylo možné jasně identifikovat vaši stránku mezi ostatními záložkami v prohlížeči uživatele. Pokud se k vám uživatel vrací opakovaně, spojí si s ikonkou váš web a automaticky bude vědět, že je na stránce, kterou hledal.

Favicon je sice ten nejmenší detail z vaší korporátní identity, kterou se snažíte budovat, ale navzdory své velikosti se snadno "zaryje" do podvědomí vašich uživatelů, proto byste jej neměli podceňovat.

Ikonku vám připraví váš grafik/webdesignér a přidat ji lze do webu jednoduše doplněním některého z následujících řádků do hlavičky zdrojového kódu podle použitého formátu obrázku či velikosti. Případně si ji můžete navrhnout sami s pomocí některého z online návrhářů např. favicon.cc.

Použití v HTML5

HTML5 umožňuje použití rozlišení až 128x128 px a použití vektorových ikon ve formátu SVG.

Základní použití

<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico" />
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="icon" type="image/gif" href="favicon.gif" />

Animované ikony

Animované ikony mají stejný zápis jako ostatní ikony ve formátu GIF. Jejich použití důkladně zvažte. Mohou uživatele rozptylovat od čtení obsahu nebo dokonce rozčilovat, budou-li se animovat v neotevřené záložce. Vhodné je tedy animaci přehrát omezeně, např. jen jednou při 1. načtení stránky jako uvítací efekt a poté ponechat stabilní verzi. Podpora animovaných ikonek je také značně omezena jednotlivými prohlížeči, je proto dobré přidat i alternativu, případně nezačínat v GIFu 1. snímek prázdnou plochou, neboť prohlížeč by si mohl načíst právě jej. Nicméně beztak animace poběží pravděpodobně jen ve FireFoxu.

 favicon-ukazka

<link rel="icon" type="image/gif" href="favicon.gif" />

Vektorová favicon v SVG

<link rel="icon" type="image/svg+xml" href="favicon.svg" />

Zde je bohužel stále ještě problém s kompatibilitou jednotlivých prohlížečů. Minimálně do 05. 2017 podporuje SVG u favicon pouze FireFox a Safari (to ale s vlastními atributy), takže zatím je to v praxi nepoužitelné. Je ale jen otázkou času, kdy všechny prohlížeče přejdou na jednotný SVG formát. V tomto formátu lze totiž dosáhnout nejvyšší kvality obrazu.

Chování prohlížečů

Pokud se rozhodnete použít favicon v rozlišení vyšším než 16x16 px nebo kombinovat s SVG, je vhodné doplnit více variant a testovat na aktuálních verzích prohlížečů. Každý totiž načítá ikony v jiném pořadí, více se o tom dočtete v článku en.wikipedia.org/wiki/Favicon (pod tabulkou). Zápisu favicony do html kódu se můžete také většinou vyhnout pouhým nahráním souboru favicon.ico/png/gif do rootu webu, což je nejjednodušší a nejrychlejší způsob, neboť jej prohlížeč automaticky detekuje.

Zpátky na začátek stránky