Icones de site internet

Snippet

<base href="http://www.domaine.fr/base/" />

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<link rel="icon" type="image/png" href="speed-dial-icon.png">

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="shortcut icon" type="image/png" href="favicon.png" />

Ce qu'il faut savoir

Particularités

Les url des icones doivent être absolues ou, une balise "base" doit être renseignée. Dans le cas contraire, certaines versions d'Android⁽¹⁾ utilise une icone par défaut.
Le terme "precomposed" peut être trompeur. En effet, même si aucun effet glossy ne sera ajouté à votre icone, celle-ci verra tout de même ses bords arrondis et une ombre portée appliquée⁽²⁾.
Une icone au format ico doit être servi à IE. Il est préférable de lui réserver le nom "favicon.ico", même si on la déclare dans le head. Si vous déclarez une autre icone au format png, cela doit se faire après la déclaration de l'icone au format ico.
Aussi, il ne suffit pas de changer l'extension de votre image en .ico pour qu'elle soit bien interprétée par IE. Pour créer de véritables .ico un outil en ligne est à votre disposition
L'icone "Speed Dial" est uniquement utilisée par Opera 11.10+ à ce jour. Elle doit être définie avant les favicons.

Les fichiers à avoir

filename	largeur/hauteur	format recommandé
apple-touch-icon-114x114-precomposed.png	114px	png24
apple-touch-icon-72x72-precomposed.png	72px	png24
apple-touch-icon-precomposed.png	57px	png24
apple-touch-icon.png	57px	png24
speed-dial-icon.png	384px/240px	png24
favicon.ico	16px	icon
favicon.png	16px	png24

Le fichier favicon.png n'est utile que si vous désirez utiliser plusieurs niveaux de transparence à votre favicon.
On pourrait se passer de certaines touch icones mais cela entrainerait dans bien des cas le téléchargement d'images plus grandes (et donc lourdes) que nécessaire ou à des résolutions trop basses.

Le fichier speed-dial-icon.png doit avoir une dimension minimale de 114px/114px. Si vous ne définissez pas cette icon, opera utilisera une capture de votre page que vous pouvez même optimiser via les css⁽³⁾. Vous pouvez aussi utiliser l'icone apple-touch-icon-114x114-precomposed.png.

Références

Fortement basé sur http://mathiasbynens.be/notes/touch-icons
⁽¹⁾ Constaté sur une Samsung Galaxy Tab, user-agent : Mozilla/5.0 (Linux; U; Android 2.2.1; fr-fr; GT-P1010 Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
⁽²⁾ Constaté sur un Samsung Galaxy S2, Samsung Galaxy Tab 10.1 ainsi qu'avec l'iPhone Simulator.
⁽³⁾ http://dev.opera.com/articles/view/opera-speed-dial-enhancements/#html5icons

Quelques outils

⁽¹⁾ http://goo.gl/KQ0GC (.psd) — Visualisez à quoi ressemblera votre icone une fois passé à la moulinette iOS (quelle soit precomposed ou non)
⁽²⁾ http://www.favicon.cc/ — Convertissez vos images en .ico et bien plus.