Favicon
Favicon je ikona www stránky, která se zobrazuje v záložce webového prohlížeče a usnadňuje tak orientaci uživatele v případě, že má otevřeno více záložek najednou. Rozměr základní ikony by měl být čtvercový, o rozměrech 16×16px nebo 32×32px.
Favicon lze vytvořit pro každou webovou stránku a nejedná se o nic složitého. Stačí vytvořit grafický soubor favicon.ico a ten vložit do kořenového adresáře webu tak, aby byl dostupný z na URL adrese www.example.com/favicon.ico. V případě, že nemůžete nebo nechcete umístit soubor favicon.ico do rootu webu, lze jej umístit i jinam. V tomto případě, je ale nutné prohlížeč informovat, kde je favicon umístěn a to vložením následujícího kódu mezi značky <head> a </head>.
<link rel="icon" href="http://www.example.com/zanorena/slozka/favicon.ico">Jak vytvořit favicon.ico
Ikonku si můžete vytvořit v jakémkoliv grafickém editoru nebo využít jednoho z mnoha generátorů, které vám vytvoření usnadní.
S rozmachem mobilních zařízení se začínají využívat favicony s většími rozlišeními také pro tablety či smartphony. Zároveň lze vytvořit favicony i pro mobilní platformy Android, iOS či Windows Phone.
Připravili jsme pro vás kompletní seznam faviconů, které vám budou fungovat napříč různými typy zařízeních i platforem. S vytvořením vám pomůže např. online generátor realfavicongenerator.net.
Ikony pro platformu Apple:
<link rel="apple-touch-icon" sizes="76x76" href="/zanorena/slozka/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="120x120" href="/zanorena/slozka/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="/zanorena/slozka/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/zanorena/slozka/apple-touch-icon-180x180.png">Ikony pro webové prohlížeče:
<link rel="shortcut icon" href="/zanorena/slozka/favicon.ico">
<link rel="icon" sizes="16x16" type="image/png" href="/zanorena/slozka/favicon-16x16.png">
<link rel="icon" sizes="32x32" type="image/png" href="/zanorena/slozka/favicon-32x32.png">
<link rel="icon" sizes="96x96" type="image/png" href="/zanorena/slozka/favicon-96x96.png">
<link rel="icon" sizes="192x192" type="image/png" href="/zanorena/slozka/favicon-192x192.png">
<link rel="mask-icon" href="/zanorena/slozka/safari-pinned-tab.svg" color="#5bbad5">Ikony pro platformu Android:
<link rel="manifest" href="/zanorena/slozka/manifest.json">Obsah souboru manifest.json:
{
"name": "",
"icons": [
{
"src": "\/zanorena\/slozka\/android-chrome-36x36.png",
"sizes": "36x36",
"type": "image\/png"
},
{
"src": "\/zanorena\/slozka\/android-chrome-48x48.png",
"sizes": "48x48",
"type": "image\/png"
},
{
"src": "\/zanorena\/slozka\/android-chrome-72x72.png",
"sizes": "72x72",
"type": "image\/png"
},
{
"src": "\/zanorena\/slozka\/android-chrome-96x96.png",
"sizes": "96x96",
"type": "image\/png"
},
{
"src": "\/zanorena\/slozka\/android-chrome-144x144.png",
"sizes": "144x144",
"type": "image\/png"
},
{
"src": "\/zanorena\/slozka\/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image\/png"
},
{
"src": "\/zanorena\/slozka\/android-chrome-256x256.png",
"sizes": "256x256",
"type": "image\/png"
}
],
"theme_color": "#ffffff",
"display": "standalone"
}Ikony pro platformu Windows phone:
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/zanorena/slozka/mstile-144x144.png">
<meta name="msapplication-config" content="/zanorena/slozka/browserconfig.xml">
<meta name="theme-color" content="#ffffff">Obsah souboru browserconfig.xml:
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/zanorena/slozka/mstile-70x70.png"/>
<square150x150logo src="/zanorena/slozka/mstile-150x150.png"/>
<square310x310logo src="/zanorena/slozka/mstile-310x310.png"/>
<wide310x150logo src="/zanorena/slozka/mstile-310x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>
