Jan Štráfelda - Průvodce online -projektem
Praha/Mělník  |  776 678 044  |  jan@strafelda.cz  |  Pošlete mi poptávku

Favicon

Favicon, favicona, favikona nebo také favicon.ico, je malá ikonka umístěná obvykle v kořenovém adresáři webu. Prohlížeče ji pak spojují s danou doménou a zobrazují ji v záložkách či v oblíbených položkách. Favicon také používají vyhledávače, které ji mohou zobrazovat ve výsledcích vyhledávání.

Ukázky favicon

Vybral jsem pro vás 69 ukázek favicon z oblasti online marketingu. Jak vidíte, podoba favicon.ico většinou vychází z loga firmy, ale protože má v základní velikosti rozměry pouze 16 × 16 pixelů, jde o logo hodně zjednodušené:

Ukázky favicon různých webů

Ukázky favicon z oblasti digitálního marketingu. Tak schválně, kolik z těch 69 webů podle ikonky poznáte?

Na favicon také často najdete jedno či dvě písmena – zkratku z názvu firmy či webu. Obvykle jsou obarvená tak, aby favicon ladila s barevným schématem webu.

Stručná historie favicon

Favicon v IE5

Soubory favicon.ico zavedl prohlížeč Internet Explorer 5 v roce 1999. Pokud si uživatel uložil stránku do oblíbených položek, ikonka favicon se mu u nich zobrazovala, aby se jednotlivé položky snáze odlišovaly od sebe. Zároveň se favikona zobrazovala i v adresním řádku. Mám dokonce pocit, že se podle počtu zobrazení souboru favicon.ico dalo v té době zjistit, kolik lidí má web uložený v oblíbených záložkách.

Později tuto logiku převzaly i další prohlížeče a favicon se tím rozšířily po většině webů. Stále však šlo o jednoduché soubory ve formátu .ico a rozměrech 16 × 16 pixelů. Dnes už však prohlížeče v adresním řádku zobrazují informace o tom, zda web běží na HTTPS protokolu a zda má platný SSL certifikát. A favikony se nenápadně přemístily jinam – do záložek.

Favicon v záložkách

Novější prohlížeče postupně začaly podporovat zobrazení více webů v rámci jednoho okna, v tzv. záložkách. Záložka zobrazuje titulek stránky, který však zkracuje v závislosti na tom, jaká je šířka okna prohlížeče a kolik záložek máme otevřených. Máte-li otevřeno větší množství záložek, těžko se pak zorientovat. Naštěstí to zachraňují právě obrázky favicon:

Favicon v záložkách prohlížeče Chrome

Favicon v záložkách prohlížeče Chrome

Ani nemusíte přemýšlet a hned víte, kam kliknout. Z tohoto důvodu je chybějící favicon.ico velkým prohřeškem proti použitelnosti webu.

Multiformáty favicon

Postupně velikost 16 × 16 pixelů přestala stačit. Například moderní prohlížeče umí při otevření nového okna vypsat odkazy na poslední otevřené soubory a používají zde velikost 32 × 32 pixelů. Někdy se hodí i velikost 48 × 48 pixelů, třeba při ukládání odkazu na plochu.

Řešily to tzv. multiformáty favicon, kdy jsou data pro všechny tři velikosti favicon umístěny v jediném souboru favicon.ico uloženém v kořenovém aresáři domény.

Favicon na mobilních zařízeních

Favicon - stránky uložené na telefonu AndroidStránky uložené na ploše telefonu Android. První tři weby podporují správný formát favicon, čtvrtý nikoliv.

Ani multiformáty už dnes však nestačí. Jejich éra skončila s rozšířením chytrých telefonů Android a ještě spíše mobilních zařízení Apple s retina displeji. Ty mají násobně vyšší rozlišení a běžné obrázky na nich vypadají rozmazaně.

Další nároky na podobu favicon klade fakt, že se původní jednoduché weby funkčností stále více přibližují desktopovým aplikacím, včetně toho, že si je uživatelé ukládají jako dlaždice na novějších Windows. Jestliže váš web funguje jako single-page aplikace, pokročilejší formáty favicon jsou nutností.

Najednou je potřeba celá řada dalších velikostí favicon, dnes cca patnáct velikostí až do rozměru 192 × 192 pixelů. Teoreticky by problém vyřešily vektorové ikonky, třeba ve formátu SVG, prohlížeče je však zatím skoro nepodporují. A ani to by samotné nestačilo, protože třeba Safari vyžaduje speciální monochromatické favicony.

Ikonka favicon.ico má velký vliv na použitelnost webu v prohlížečích a také ovlivňuje míru prokliku ve výsledcích vyhledávání. Optimalizujte si ji!

Tweetnout jedním klikem

Favicon ve vyhledávačích

Vyhledávač Seznam.cz

Vyhledávač Seznam.cz už používá favicon ve výsledcích vyhledávání dlouho:

Favicon ve výsledcích vyhledávání na Seznam.cz

Favicon ve výsledcích vyhledávání na Seznam.cz. Barevná a výrazná ikonka přitahuje pozornost.

Vyhledávač Google

V poslední době se však favikony objevují i na Google. Od května 2019 je najdete při hledání na chytrých telefonech. V roce 2020 s nimi Google experimentuje i při hledání na desktopech. Viděl jsem favicon u výsledků vyhledávání (SERP) několik týdnů, nyní už je tam zase nevidím. Ale nejspíš se vrátí.

Favicon - stránky uložené na telefonu AndroidFavicony v mobilních výsledcích vyhledávání na Google

Aby to celé fungovalo, doporučuje Google používat favicony široké alespoň 48 pixelů, s tím, že si je pak sám upraví na velikost 16 × 16 pixelů.

Google je na webu rozpoznává pomocí klasické značky link umístěné v hlavičce HTHL dokumentu. Jako hodnota atributu rel může být uvedena jedna z těchto možností: shortcut icon, icon, apple-touch-icon, apple-touch-icon-precomposed.

Soubory favicon.ico nesmí být blokovány v robots.txt. Jejich sbírání pro různé služby Google má na starosti speciální robot jménem Google Favicon.

<link rel="shortcut icon" href="favicon.ico">

Jak ovlivňují favicony SERP?

A v čem jsou obrázky favicon v SERP tak užitečné? Podobně jako dobře napsané popisky v meta tagu description mohou významně zvyšovat míru pokliku vašeho odkazu. Platí to zejména pro favicony hodně výrazné a viditelné.

Obrázky favicon také souvisí s budováním značky – čím je vaše značka známější, tím spíše si potenciální návštěvník s vámi favikonu spojí a proklikne se k vám. Velké brandy získávají další výhodu.

Jak favicon vytvořit

Základem je mít alespoň tu šestnáctipixelovou ikonku. Tu vám buď nakreslí grafik, nebo si ji můžete nakreslit v nějakém programu sami, uložíte ji jako obrázek (třeba PNG) a pomocí online nástroje ji převedete na formát .ico. Přejmenujete ji na favicon.ico a nahrajete ji do kořenového adresáře webu. Tím pokryjete ty největší problémy.

Lepší a o něco pracnější možností je využít nástroj Real Favicon Generator, který vám z obrázku o velikosti minimálně 260 × 260 pixelů vytvoří všechny potřebné velikosti a formáty favicon. Také rovnou vygeneruje HTML značky, které umístíte do hlavičky stránek, a další nutné soubory, jako jsou web manifesty, které kromě ikonek definují také barvy a jiné prvky.

Celý kód vkládaný do HTML pak bude vypadat přibližně takto:

<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
<link rel="manifest" href="/favicon/site.webmanifest">
<link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#e2c119">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="msapplication-config" content="/favicon/browserconfig.xml">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="theme-color" content="#f7f5e7">

Docela dost blbnutí, kvůli jedné malé ikonce, že? Emotikon: mrknutí, však chápeš

Zaujal jsem vás? Přihlašte se do mailingu a mé další texty už vám neuniknou:

 

Zprávy posílám cca 8 × ročně. Odhlásit se můžete kdykoliv. Více informací.



Nezávazná poptávka

  (volitelné)