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