Décidément, je suis dans le sujet des favicons cette semaine. Suite à ma découverte d'hier, j'ai fait mes expériences et j'ai vu qu'il était possible de spécifier un favicon spécifique pour les iPod Touch / iPhone. Habituellement, quand on ajoute un site dans ses favoris sur un de ces appareils, on a le choix de créer un favori normal (bouton "Add Bookmark") ou de créer une icône sur le tableau de bord (bouton "Add to Home Screen"). Par défaut, l'ajout d'un raccourci crée une capture d'écran de la page web et génère automatiquement une icône qui sera placée sur le tableau de bord, à moins qu'une balise <link> spéciale soit trouvée dans le code HTML.
Voici les spécifications nécessaires :
- une balise link
- une relation de type "apple-touch-icon"
- une image au format PNG
- l'image doit être de dimension 57 x 57 pixels
Une fois l'icône créée, il suffit de la placer sur le site et d'ajouter aux pages un code HTML semblable au suivant (à l'intérieur de la balise <head>) :
<link rel="apple-touch-icon" href="favicon-57.png"/>
Juste pour le plaisir, j'ai regardé plusieurs sites web d'entreprises spécialisées dans la conception web au Québec et je me rends compte que la plupart n'en ont toujours pas, y compris l'entreprise pour laquelle je travaille. Dès mon retour de vacances, je proposerai cette amélioration.
Mise à jour 2009-01-05
Après vérification, on peut aussi simplement le placer à la racine du site si le nom du fichier est apple-touch-icon.png, sans même utiliser de balise <link>.