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][iOS docs] Chrome : [Add to Homescreen - Google Chrome Mobile — Google Developers][chrome docs] Internet Explorer : [Pinned site metadata reference (Internet Explorer)][ie docs] [ios docs]: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html [chrome docs]: https://developers.google.com/chrome/mobile/docs/installtohomescreen [ie docs]: http://msdn.microsoft.com/en-us/library/ie/dn255024(v=vs.85).aspx#msapplication-TileColor