Hlavní obsah
Internet, technologie a elektronika

Malá ikonka v záložce má vlastní soubor. Favicon vznikl kvůli Oblíbeným v Internet Exploreru

Foto: Pexels

Dnes ji vidíme v každé záložce. Favicon ale začínal jako malý soubor favicon.ico, který Internet Explorer spojoval s weby uloženými mezi Oblíbené.

Článek

Je tak malá, že ji člověk většinou nevnímá. Otevřu několik webů a vedle názvu každé záložky se objeví drobný znak: písmeno, logo, barevný čtvereček nebo jednoduchý symbol. Bez něj by dnešní panel se záložkami vypadal podivně anonymně.

Tahleta ikonka má vlastní jméno i vlastní historii. Říká se jí favicon, zkráceně z anglického „favorites icon“. A její původ je doslova spojený s Oblíbenými položkami v Internet Exploreru. Z dnešního univerzálního prvku webu vyrostla funkce, která měla původně pomoct rozlišit uložené stránky v jednom konkrétním prohlížeči.

Začalo to souborem favicon.ico v kořeni webu

Starý recept byl až směšně jednoduchý: webmaster vytvořil malou ikonu, uložil ji jako favicon.ico a položil ji do kořenového adresáře webu. Internet Explorer pak při práci s Oblíbenými tento soubor hledal a mohl ho zobrazit vedle uloženého odkazu. Microsoftí tradice formátu ICO se tím přenesla z plochy Windows přímo na web.

MDN dnes připomíná, že právě rané verze Internet Exploreru zavedly možnost, aby web poskytl soubor favicon.ico v kořeni stránky. Smyslem byla ikona pro nabídku Favorites a další místa, kde prohlížeč potřeboval malou grafickou reprezentaci webu.

Název proto není marketingový výmysl z pozdější éry záložek. Favicon doslova vznikl jako „favorite icon“. To, co dnes považujeme za součást identity webu, začalo jako doplněk k seznamu uložených stránek.

Proč zrovna .ico

Formát ICO nevznikl kvůli internetu. Microsoft ho používal pro ikony ve Windows. Jeho výhoda byla praktická: jeden soubor může obsahovat více verzí stejného obrázku v různých velikostech a barevných hloubkách. Systém si pak může vybrat variantu, která se pro dané místo hodí nejlépe.

To dává smysl i pro prohlížeč. Stejné logo může potřebovat malý rozměr v seznamu Oblíbených a jiný rozměr jinde v rozhraní. ICO je tedy spíš kontejner na několik ikon než jen obyčejný obrázek s jedním pevným rozměrem.

MDN zároveň upozorňuje, že moderní web už není na ICO odkázaný. Favikony mohou být v PNG, SVG a dalších podporovaných formátech. Historický soubor favicon.ico ale přežil díky obrovské kompatibilitě a jednoduchému pravidlu: prohlížeč ho může automaticky zkusit najít na adrese /favicon.ico.

Webmaster nemusel ikonu zapsat do každé stránky

Na původním chování je hezké právě to, jak málo práce vyžadovalo. Pokud favicon.ico ležel na správném místě, prohlížeč si o něj mohl říct sám. Serverové logy proto kdysi začaly obsahovat požadavky na soubor, který autor webu třeba ani nevytvořil.

Starší implementace Internet Exploreru byly navíc úzce spojené s uložením stránky do Oblíbených. Historické materiály Microsoftu popisují možnost umístit favicon.ico do kořene domény nebo určit jinou cestu pomocí HTML značky LINK.

Právě tady se z jednoduché konvence začal stávat obecnější webový mechanismus. Místo očekávání jediného konkrétního souboru mohla stránka prohlížeči říct: moje ikona leží tady.

Z „shortcut icon“ zůstalo prosté rel="icon"

Dnes se favicon běžně deklaruje v hlavičce HTML pomocí elementu link s rel="icon". Adresa ikony může vést na ICO, PNG, SVG nebo jiný podporovaný formát a web může nabídnout více variant pro různé velikosti či zařízení.

Starší zápis rel="shortcut icon" se na webu držel dlouho. Současné specifikace jej považují hlavně za historickou kompatibilitu. Klíčové slovo je icon; „shortcut“ je pozůstatek doby, kdy favicon vyrůstal z funkcí Internet Exploreru.

Zajímavé je, že i moderní specifikace stále počítají s původní konvencí. Pokud stránka výslovně neuvede vlastní ikonu, prohlížeč může zkusit načíst právě /favicon.ico. Téměř třicet let stará dohoda tak přežívá vedle mnohem modernějšího HTML.

Ikona se přestěhovala z Oblíbených do celé identity webu

Jakmile favikony převzaly další prohlížeče, přestaly být jen ozdobou uložených odkazů. Začaly se zobrazovat v záložkách, seznamech historie, zástupcích, mobilních rozhraních a na dalších místech, kde je potřeba rozeznat web rychleji než jen podle textu.

To změnilo i způsob, jakým se navrhují. Původní drobná ikonka měla fungovat v několika pixelech. Dnešní web může připravit sadu různých velikostí a dokonce odlišné ikony pro platformy nebo instalovatelné webové aplikace.

Základní úloha ale zůstala stejná: dát stránce malou vizuální značku. U deseti otevřených záložek člověk často nehledá text názvu, ale známý symbol. Favicon se tak z technické drobnosti stal jednou z nejmenších, ale nejčastěji zobrazovaných částí webové značky.

Proč se favicon.ico drží dodnes

Web má zvláštní schopnost nezahazovat staré věci, které pořád fungují. Kořenový favicon.ico je přesně ten případ. Není nejmodernější, není jediný možný a pro nové projekty nemusí být ani hlavní volbou. Přesto mu prohlížeče rozumějí a obrovské množství webů ho stále nabízí jako jednoduchou záložní variantu.

Je to malý technický fosilní otisk Internet Exploreru v dnešním webu. V panelu záložek Chrome, Firefoxu nebo Edge vidím moderní grafické logo, ale kořeny té myšlenky vedou do doby, kdy browser hledal favicon.ico kvůli položce v nabídce Oblíbené.

A právě to je na faviconu nejzajímavější: jeden titěrný soubor ukazuje, jak se web vyvíjí. Novější standardy přidávají možnosti, ale stará konvence může dál tiše fungovat pod nimi. Ikonka, která kdysi patřila k Favorites, dnes pomáhá orientovat se v celém prohlížeči.

Zdroje a prameny

• MDN – Image file type and format guide: ICO — původ formátu ICO, rané použití favicon.ico v Internet Exploreru a možnost více ikon v jednom ICO souboru

• Microsoft DevBlogs – Where do those customized web site icons come from? — historické chování Internet Exploreru: favicon.ico v kořeni webu nebo vlastní cesta přes LINK

• MDN – rel HTML attribute — současné použití rel="icon" a výběr více ikon podle typu, velikosti a média

• W3C HTML 5.3 – Links — historická kompatibilita zápisu „shortcut icon“ a fallback na /favicon.ico

Máte na tohle téma jiný názor? Napište o něm vlastní článek.

Texty jsou tvořeny uživateli a nepodléhají procesu korektury. Pokud najdete chybu nebo nepřesnost, prosíme, pošlete nám ji na medium.chyby@firma.seznam.cz.

Sdílejte s lidmi své příběhy

Stačí mít účet na Seznamu a můžete začít publikovat svůj obsah. To nejlepší se může zobrazit i na hlavní stránce Seznam.cz