Od roku 1999 umějí prohlížeče, počínaje tehdy vydaným IE5, zobrazovat ikonu webu, tzv. favicon.
Původně šlo o 16x16px obrázek uložený ve speciálním, Microsoftem vytvořeným, formátu obsahujícím BMP obrázek a masku průhlednosti (známý jako *.ICO). Od té doby se ale hodně změnilo a s malou ikonou si již nevystačíte.
Favicon je stále povinná?
Samozřejmě původní definice ikony zůstává v platnosti a měla by být stále používána. Nejjednodušší je tedy vzít 16x16px obrázek, převést ho na ikonu (např. webovým nástrojem) a umístit do public složky (aka root) webu pod názvem favicon.ico. Díky tomu ji automaticky každý prohlížeč najde.
Jelikož již přes 10 let máme i chytrá mobilní dotyková zařízení, navrhl Apple v roce 2005 druhý obrázek apple-touch-icon, který mohou používat zařízení, která potřebují dostatečně velký obrázek pro dotykovou ikonu. Dotyková ikona by měla být minimálně 57x57px, ale pro moderní (HD/Retina) zařízení je lepší použít minimálně 152x152px velký obrázek. Ten by měl být, stejně jako favikona, umístěn v public složce webu pod názvem apple-touch-icon.png. Pokud potřebujete, aby byl obrázek zobrazen přesně tak, jak je uložen, přejmenujte ho na apple-touch-icon-precomposed.png; v opačném případě může OS dle svého uvážení přidat kulaté okraje a/nebo stín.
Update: zařízení s velkým rozlišením a DPI (např. iPhone X) automaticky stahují místo apple-touch-icon.png alternativní ikonu apple-touch-icon-120x120.png a apple-touch-icon-120x120-precomposed.png. Jedna z těchto ikon by tedy měli být také umístěna v public složce webu. Jméno sice navrhuje rozlišení 120x120px, ale to je spíše minimální velikost, takže když použijete doporučenou 152x152px, nic tím nezkazíte. Stejně tak se mohou nově některá iPhone zařízení zkoušet stahovat soubory apple-touch-icon-57x57.png a apple-touch-icon-120x120-precomposed.png, takže pokud se chcete vyhnout 404 zápisům v logu, můžete ještě přidat tyto ikony.
Animovaná favikona?
Původně mohla být ikona i animovaná, ale v roce 2001 byla objevena bezpečnostní chyba ve Firefoxu, a od té doby mohou prohlížeče odmítnout animovanou ikonu zobrazit. Pokud tedy chcete mít jistotu, že se ikona zobrazí, použijte pouze statickou ikonu.
Ikona jinde než v rootu
Obě ikony (favicon a apple-touch-icon) by měly být v rootu webu. Pokud ale nemůžete do daného místa ikonu nahrát, můžete použít dva způsoby přesměrování jinam.
První způsob je přesměrování pomocí nastavení webového serveru; např. v .htaccess:
RewriteEngine On
RewriteRule ^favicon\.(gif|ico|png|jpe?g)$
/cesta/k/obrazkum/favicon.ico [L,NC]
(Definice RewriteRule musí být na jednom řádku.)
Stejně můžete nakonfigurovat i dotykovou ikonu v závislosti na tom, které jméno chcete použít.
Druhý způsob je definice v HTML:
<html><head>
<link rel="shortcut icon"
href="/cesta_k/obrazkum/favicon.ico">
<link rel="apple-touch-icon"
href="/cesta_k/obrazkum/icon.png">
...
Pokud ale ikonu přesměrujete pomocí HTML, připravte se na to, že v access a/nebo error logu web serveru se mohou stále objevovat dotazy na původní /favicon.ico. To je proto, že prohlížeče mohou ikonu zkoušet stahovat ještě dříve, než stáhnou a zpracují HTML!
Větší ikony
Původní 16x16px ikona byla navržena pro tedy nejrozšířenější rozlišení 800x600px. Od té doby ale počítače pokročili a navíc používají ikonu i na jiných místech (např. v liště spuštěných aplikací nebo ve výsledcích vyhledávání) a tak můžete nadefinovat i větší ikony, které se použijí podle potřeby.
Desktop
Další velikosti ikony (24×24, 32×32, 48×48 a 64×64) můžete uložit přímo do ICO souboru (tedy všechny velikosti do jediného souboru). Tyto velikosti se nejčastěji používají na Windows a MacOS, pokud vytvoříte ikonu na ploše (nebo někde jinde).
Abyste prohlížeči nebo OS zdůraznili, že máte i větší ikony, můžete do HTML přidat definici:
<link rel="shortcut icon"
href="/favicon.ico"
sizes="16x16 24x24 32x32 48x48 64x64">
Případně pokud chcete ikonu rozdělit:
<link rel="shortcut icon"
href="/favicon.ico"
sizes="16x16 24x24 32x32">
<link rel="shortcut icon"
href="/favicon_big.ico"
sizes="64x64">
Prohlížeč nebo OS vždy vybere ikonu dostatečně velkou podle potřeby. Pokud není dostupná ikona v potřebném rozměru, vždy použije větší ikonu, kterou zmenší.
Mobilní zařízení
Pro moderní HD/Retina zařízení ale nemusí stačit ani ikona 64×64. Formát ICO sice (v modernizované specifikaci) umožňuje uložit i ikony větší než 64x64px, ale pouze v PNG formátu. Proto je lepší nechat favicon.ico soubor v původním formátu a větší obrázky již ukládat přímo do samostatných PNG obrázků (resp. APNG):
...
<link rel="shortcut icon"
href="/obrazky/favicon_128.png"
sizes="128x128">
<link rel="shortcut icon"
href="/obrazky/big_icon.png"
sizes="256x256">
...
PNG ikony byste měli mít v rozměrech 96×96, 128×128, 160×160, 192×192 a 256×256.
Stejně tak můžete nadefinovat i ikony pro různě velké iOS (a Android) zařízení:
...
<link rel="apple-touch-icon"
href="/obrazky/touch-icon_57x57.png">
<link rel="apple-touch-icon"
href="/obrazky/touch-icon_152x152.png"
sizes="152x152">
...
Původní ikonu 57x57px je doporučeno definovat bez sizes (ušetříte místo) a větší ikony pak definovat pro sizes 60×60, 72×72, 76×76, 114×114, 120×120, 144×144, 152×152 a 180×180. Tyto velikosti jsou pro všechny typy iPhone a iPad zařízení, ale vzhledem k tomu, že OS může použít větší ikonu a zmenšit ji, stačí použít ikony 60×60 (iPhone), 76×76 (iPad), 120×120 (iPhone Retina), 152×152 (iPad Retina) a 180×180 (iPhone 6+). Pro jistotu můžete ještě přidat definici pro dotykovou ikonu o rozměru 256×256, kdyby byla potřeba v budoucnu (stejně byste ji měli mít pro původní „shortcut icon“).
Automatická mobilní aplikace
S dotykovými ikonami ještě souvisí dva (resp. 3) meta tagy, které mobilním zařízením řeknou, zda z webu mohou udělat ikonu na ploše a otevírat ji jako aplikaci:
<meta name="apple-touch-fullscreen"
content="yes" />
<meta name="apple-mobile-web-app-capable"
content="yes" />
<meta name="mobile-web-app-capable"
content="yes" />
Při použití této definice je ale potřeba si dát pozor na iPhony a iPady a aplikaci pořádně otestovat. Jejich použití totiž způsobí, že se vaše stránka zobrazí bez lišt Safari a tudíž nebude možno použít tlačítko zpět prohlížeče. A jelikož iPhony ani iPad neobsahují hardwarové tlačítko zpět (tak jako Android nebo Windows Phone), tak se může stát, že uživatel dojde na vašem webu do stavu, kdy se nemůže posunout dál a nemůže se ani vrátit zpět a bude muset stránku (aplikaci) zavřít. Každá stránka by tedy sama o sobě měla poskytovat možnost vrátit se o krok zpět nebo alespoň na hlavní stránku.
Další problém s použitím těchto tagů je v tom, že v režimu aplikace se odkazy chovají jinak a některé (relativní) se načítají přímo do aplikace zatímco jiné (absolutní) způsobí otevření okna prohlížeče, a jelikož aplikace používá oddělené úložiště pro Cookie (a tudíž i Session) a LocalStorage, může se pak web dostat do stavu, se kterým nepočítá. Při použítí těchto tagů je pak nejlepší všechny stránky načítat přes AJAX.
Moderní ikony (pro Android)
Android do verze 4.x používá apple-touch-icon. Od verze Android 5.0 (a na předchozích verzích Chrome pro Android a Opera pro Android; v budoucnu snad i Firefox) má vlastní definici, které říká Web Manifest. Jde o JSON soubor, který by měl být opět umístěn v rootu webu pod jménem manifest.json.
Samozřejmě byste ho měli ještě připojit přes HTML:
<html><head> <link rel="manifest" href="manifest.json"> ...
V souboru mohou být uvedeny informace jako je jméno webu (name), adresa úvodní stránky (start_url) nebo režim zobrazení (display). A samozřejmě také seznam obrázků, které lze použít pro vytvoření ikony webu:
{
"name":"Můj web",
"short_name": "Moje",
"start_url": "index.html",
"display": "standalone",
"icons": [
{
"src": "/obrazky/icon_48.png",
"sizes": "48x48",
"type": "image/png",
"density": 1
},
{
"src": "/obrazky/icon_96.png",
"sizes": "96x96",
"type": "image/png",
"density": 2.0
}
]
}
Ikony jsou uvedeny jako pole objektů, kde každý objekt představuje jeden obrázek s adresou (src), typem (můžete použít i další obrázky mimo PNG), velikostí (sizes) a DPI (density), pro které je určen. Ikona 48x48px je určena pro Android tablety (s DPR 1); pro mobilní zařízení je doporučeno použít ikony 72×72, 96×96, 144×144 a 192×192 (podle DPR: 1.5, 2, 3 a 4). Pro Android TV pak ještě můžete přidat 36×36 (DPR 0.75).
Dlaždice pro Windows
Aby toho nebylo málo, představil Microsoft ve Windows 8 Moderní Internet Explorer (Metro IE), který dokáže vytvářet z webů dlaždice v (Metro) nabídce Start. Podobně se chová i Edge ve Windows 10. (Internet Explorer 11 stále používá favicon a vytváří obyčejné ikony.)
Pro definici draždice (Tile) slouží meta tagy (na rozdíl od ikon, které používají linky) s předponou msapplication (s výjimkou jména, které má předponu jen application). Nadefinovat můžete jméno webu (name), popisek (tooltip), adresu úvodní stránky (starturl), a barvu pozadí dlaždice (TileColor). A samozřejmě i několik obrázků pro různě velké dlaždice:
<html><head>
<!-- zde není "ms" na začátku!!! -->
<meta name="application-name"
content="Můj web" />
<meta name="msapplication-tooltip"
content="Zobrazí Můj web" />
<meta name="msapplication-starturl"
content="http://muj.web.com" />
<meta name="msapplication-TileColor"
content="#FFFFFF" />
<meta name="msapplication-TileImage"
content="/logo.jpg" />
<meta name="msapplication-square70x70logo"
content="/logo_tile_70.jpg" />
<meta name="msapplication-square150x150logo"
content="/logo_tile_150.jpg" />
<meta name="msapplication-wide310x150logo"
content="/logo_tile_wide.jpg" />
<meta name="msapplication-square310x310logo"
content="/logo_tile_310.jpg" />
...
Definice jména se používá jako jméno dlaždice, zatímco popisek (tooltip) se zobrazí po najetí na dlaždici myší.
Dlaždice vždy odkazuje na úvodní stránku (starturl) nezávisle na tom, na které podstránce uživatel dlaždici vytvořil. Samozřejmě můžete uvést i jinou adresu, pokud chcete, aby se aplikace otevírala jinde, nebo aby se chovala jinak než původní web.
Dlaždici můžete nadefinovat pomocí barvy pozadí (TileColor) a výchozího obrázku (ten se použije, pokud chybí obrázek pro konkrétní rozměr dlaždice). Pro jednotlivé rozměry dlaždice pak použijte obrázky 70×70 (malá dlaždice), 150×150 (normální), 310×150 (široká přes 2 dlaždice) a 310×310 (velká).
Microsoft ještě doporučuje obrázky ve skutečnosti udělat o 80% větší a použít rozměry 128×128, 270×270, 558×270 a 558×558 (přičemž jména meta tagů musí samozřejmě zůstat stejná – přece nechcete, aby u Microsoftu dávalo něco smysl).
Místo jednotlivých meta tagů můžete použít i XML konfiguraci.
Generátor
Pro zjednodušení výše uvedeného může použít Real Favicon Generator, který vás provede konfigurací ikon pro všechna zařízení.
Podrobnější popis v angličtině najdete na css-tricks.