Favikony webu s RealFaviconGenerator

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ů, ve vyhledávání Googlu 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 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 „404 Nenalezeno“.

Vyhledávání Google

Nejnovější výskyt favikony se hlásí z mobilních výsledků vyhledávání na Googlu. Ten po vás bude chtít opět soubor favicon.ico, Jako zdroje bere jakékoliv favikony definované zde, u bitmapových obrázků ovšem jen ve velikosti 48 × 48 pixelů a jejich násobcích. Více informací najdete v textu „Define a favicon to show in search results“.