favicon, touch-icon, short icon : c'est dans la head !

Avec la multiplication des navigateurs, des mobiles, il y a des plus en plus de chose à définir pour que chacun ait une belle icône. De plus, chacun à un format particulier. Cet article fera le point sur les bonnes pratiques de fin 2013, mi-2014, comprenant iOS 7 et chrome 31, et tout le reste.

Bureau

Commençons par le strict minimum pour nos navigateurs de bureau. Ici, c'est la favicon qui est à l'honneur avec ces différents formats.
Pour les vieux de la veille,
favicon.ico (taille : 16x16px) :

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

Les navigateurs plus récents supportent un fichier .png comme favicon.
favicon.png (taille : 16x16px) :

<link rel="icon" type="image/png" href="favicon.png" />

Mobile

iOS

iOS est l'un de premier à avoir ajouter des icônes spéciales pour les raccourcis sur le bureau. Il existe quasisment un format pour chaque appareil, à cause des différents formats (iphone et ipad) et différents écrans (classique et rétina).
Pour l'iPhone (taille par défaut 60x60px) :

<link rel="apple-touch-icon" href="touch-icon-iphone.png">

Pour l'iPad :

<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">

Pour l'iPhone retina :

<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">

Pour l'iPad retina :

<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png">

Chrome

Les standards commencent à se faire sur ce sujet, et Chrome s'y met ! Comme Apple a été le premier à définir ce type d'icône, les anciennes versions des navigateurs Android suivent leurs normes. Pour les nouveaux il faudra rajouter ces balises :

<link rel="shortcut icon" sizes="196x196" href="nice-highres.png"> (recommended)
<link rel="shortcut icon" sizes="128x128" href="niceicon.png">

Windows

Windows 8

Dans l'univers Microsoft, les choses sont faites différemment. Il y a l'interface Modern UI (aka Metro) et ses tuiles. Cette interface donne la possibilité de déclarer la couleur de la tuile :

<meta name="msapplication-TileColor" content="#5ba4e5"/>

et aussi l'image à afficher (taille : 144x144px) :

<meta name="msapplication-TileImage" content="tileimage.png">

Internet Explorer 11

Internet Explorer 11 nous prépare un tas de belles surprises, il serait trop long dans parler dans ce post. Je vous laisse avec voir la Documentation.

Résumé

<!--old browser-->
<link rel="icon" href="favicon.ico" />
<!--desktop browser-->
<link rel="icon" type="image/png" href="favicon.png" />
<!--iOs-->
<!---iPad Retina--->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png">
<!---iPhone Retina--->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
<!---iPad Non Retina--->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">
<!---iPad Non Retina and Android 2.1+--->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">    
<!--Chrome 31+-->
<link rel="shortcut icon" sizes="196x196" href="nice-highres.png">
<link rel="shortcut icon" sizes="128x128" href="niceicon.png">
<!--Windows->
<meta name="msapplication-TileColor" content="#5ba4e5"/>
<meta name="msapplication-TileImage" content="tileimage.png">

Référence

iOS : Safari Web Content Guide: Configuring Web Applications
Chrome : Add to Homescreen - Google Chrome Mobile — Google Developers
Internet Explorer : Pinned site metadata reference (Internet Explorer)