Ikona webu. Kromě tradiční favicon.ico, ikony na záložce rozhraní prohlížeče, se dnes „favikony“ zobrazují v celé řadě dalších kontextů: na ploše mobilních operačního systémů nebo jako součást širšího nastavení zobrazování na dlaždicích novějších Windows.
Proto už ani ona pitomá favikona není téma triviální jako před lety.
Jednoduché řešení: použijte generátor
Nezajímají vás detaily a chcete vyřešit problém? Prostě jděte na skvělý web jménem Real Favicon Generator. realfavicongenerator.net
Nástroj vám vytvoří potřebný HTML kód a všechny externí soubory: obrázky a manifesty. Slouží také ale jako validátor správného nastavení favikon. Má taky API, různé pluginy pro Grunt, Gulp a tak dále. Na takovou pitominu prostě slušný ekosystém nástrojů a vědomostí, že? Autoři na tom dále pracují, proto, jestli můžete, podpořte je.
Tím bychom mohli skončit, ale vsadím se, že jste zvědaví, proč je kolem favikon potřeba psát tolik textů a programovat generátory.
Zaměřím se na HTML kód, který RealFaviconGenerator.net vytvořil pro Vzhůru dolů. Studna znalostí kolem favikon je ovšem hlubší. realfavicongenerator.net/faq
Některé další detaily najdete také na JeČas.cz. jecas.cz/favicon
Detaily pro zvědavce
Touch ikonu uvidíte na Androidu nebo iOS, když si web umístíte na plochu. Těchto ikon je ve skutečnosti daleko, daleko více. Jsou to všechny, které v kompletním seznamu ikon začínají na apple-touch-icon- nebo android-chrome-. Napočítal jsem sedmnáct souborů. Podle RealFaviconGenerator.net stačí soubory vytvořit a do HTML vložit tento kód:
<link rel="apple-touch-icon" sizes="180x180"
href="/favicon/apple-touch-icon.png">Dále tady máme standardizovaný Web App Manifest, který kromě ikon definuje barvy a způsob zobrazení. Používá jej Chrome na Androidu. Více na w3.org:
<link rel="manifest" href="/favicon/manifest.json">V Chrome na Androidu můžete také upravit barvy rozhraní prohlížeče. Více na developers.google.com:
<meta name="theme-color" content="#1e3307">Ikona pro připnutou záložku v Safari na Mac OS. Více na developer.apple.com:
<link rel="mask-icon"
href="/favicon/safari-pinned-tab.svg" color="#1e3307">Další manifest, tentokrát používaný Internet Explorerem 11:
<meta name="msapplication-config"
content="/favicon/browserconfig.xml">
<meta name="application-name"
content="Vzhůru dolů">favicon.ico používá Internet Explorer, ale slouží také jako fallback pro další prohlížeče. Je to takzvaný multiformát soubor, který obsahuje ikony v různých velikostech: 16×16, 32×32 nebo 48×48 pixelů:
<link rel="shortcut icon" href="/favicon.ico">Favicona pro Safari na Mac OS:
<link rel="icon" type="image/png"
href="/favicon/favicon-32x32.png" sizes="32x32">Klasická 16×16 ikona pro všechny ostatní prohlížeče:
<link rel="icon" type="image/png"
href="/favicon/favicon-16x16.png" sizes="16x16">Dát je do adresáře nebo ne?
Dávám je tam všechny kromě favicon.ico. Proto, abych si hlavní adresář projektu nezaplevelil desítkami obrázků. Jenže některé prohlížeče a vyhledávače si favikony chtějí stahovat právě z hlavního adresáře. Když si k nim ale nadefinujete meta značky, mělo by to být v pořádku.
favicon.ico je výjimka, protože si pro ni do hlavního adresáře sahají starší Explorery a taky roboti vyhledávačů. Tu v rootu nechávám vždy, aby server zbytečně nevracel chyby typu „404 Nenalezeno“.
Zdroj: http://www.vzhurudolu.cz/prirucka/favicon
