Les (fav|apple-touch-|speed-dial-)icons
Bien connus de tous les développeurs web, le favicon fut pendant longtemps la seule icone dont on avait à se soucier. Aujourd'hui ce n'est plus le cas et un point s'impose afin de gérer au mieux cet aspect certe mineur mais Î combien plaisant de nos sites internets.
Au commencement Ă©tait le favicon.ico
Le vétéran des icones de site c'est lui et sa premiÚre apparition remonte avant sa normalisation par le W3C, sous Internet Explorer 5. Pour l'utiliser il y a quelque rÚgles à respecter.
PremiĂšrement, votre fichier doit rĂ©ellement ĂȘtre de type ico. J'entend qu'il ne suffit pas de changer l'extension de votre fichier image en ico pour qu'il fonctionne correctement avec Internet Explorer (ou en tout cas pas toujours). Ă titre personnel j'utilise le site www.favicon.cc.
Ensuite nous indiquons au navigateur oĂč se situe le fichier Ă l'aide d'une balise meta :
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
Sachez que pour Internet Explorer 5, il faudra que le fichier soit situé à la racine du serveur (ce que vous pouvez truquer à l'aide du mode Rewrite d'Apache).
Un peu plus de transparence
Le favicon nous permet un niveau de transparence, c'est pas mal mais on peut avoir mieux. Nous allons utiliser un fichier favicon.png de type png24. Celui-ci ne sera utilisé que s'il est supporté. Dans le cas contraire, ou, devrais-je dir sous Internet Explorer, c'est le favicon.ico qui le sera. Pour que ce mécanisme opÚre il faut déclarer la version png aprÚs la version ico :
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="shortcut icon" type="image/png" href="favicon.png" />
Les apple-touch-icon c'est trognon
C'est avec l'iPod touch que l'apple-touch-icon fit sont apparition. L'icone est automatiquement modifiée, une ombre portée et un effet "glossy" lui sont appliqués et ses coins sont arrondis. Avec la multiplication des supports, différentes tailles d'apple-touch-icon ont fait leur apparition.
Nous allons utiliser des icones dites precomposed. C'est à dire que l'effet glossy ne leur sera pas appliqué, en revanche les bords arrondis et l'ombre portée ne sont pas désactivables. Nous allons avoir 4 déclinaisons de notre icone :
Une icone precomposed de 114x114px
Une icone precomposed de 72x72px
Une icone precomposed de 57x57px
La derniÚre icone étant utilisée par d'anciennes version d'iOS ainsi que d'autres appareils.
Nous allons déclarer nos icones à l'aide de balises meta, de la plus grande à la plus petite en spécifiant les dimensions des icones à l'aide de l'attribut size seulement pour les icones de taille supérieure à 57px. La raison à cet ordre est que certaines versions d'iOS nécessitant une image de seulement 57px ne téléchargent que la derniÚre icone, ignorant l'attribut size.
<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">
Nous ne déclarons pas notre derniÚre icone, elle sera utilisée par défaut par les appareils ne reconnaissant pas les icones precomposed. Elle est, comme le favicon, à placer à la racine de votre serveur.
Si nous ne désirons pas utiliser d'icone precomposed, nous n'aurons alors que trois icones, une pour chaque taille, mais nous conserverons les trois balises meta en veillant à remplacer la valeur de l'attribut rel :
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" href="apple-touch-icon.png">
Sachez qu'Android utilise Ă©galement les apple-touch-icon. Sous certaines versions vous devrez utiliser des urls absolues ou une balise base :
<base href="http://www.domaine.fr/base/" />
Cette particularité a été 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).
Depuis Opera 11.10 il est possible de spĂ©cifier une image pour l'Ă©crans Speed Dial. Un article de dev.opera.com fait Ă©tat d'une dimension maximale par dĂ©faut de 256x160px. AprĂšs plusieurs tests, j'ai pourtant constatĂ© que 384x240px semblait plus proche de la vĂ©ritĂ©. Dans tous les cas, votre image sera redimensionnĂ©e sur un fond blanc (mais cette couleur peut-elle ĂȘtre modifiĂ©e ?) et je vous conseille donc d'utiliser un fond transparent, le png24 Ă©tant bien pris en compte.
Il est important de dĂ©clarer votre icon Speed Dial avant le favicon. On procĂšde de la mĂȘme maniĂšre, Ă l'aide d'une balise meta :
<link rel="icon" type="image/png" href="speed-dial-icon.png">
Opera offre également la possibilité d'afficher directement votre page html et d'y appliquer des styles spécifiques au Speed Dial à l'aide de media query et du view-mode minimized :
@media screen and (view-mode: minimized) {
    body {
        color: #fff;
        background: #b20000;
    }
}
Ici je reprend simplement l'exemple fourni par Opera, vous trouverez également sur cette page d'autres informations relative au Speed Dial .
Nous nous retrouvons donc avec 7 images :
apple-touch-icon-114x114-precomposed.png
apple-touch-icon-72x72-precomposed.png
apple-touch-icon-57x57-precomposed.png
apple-touch-icon-57x57.png
Et le code html suivant :
<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" />
Je vous conseille de mettre toutes vos images Ă la racine de votre serveur ou, si ce n'est pas possible/confortable, de simuler cet Ă©tat Ă l'aide du mode Rewrite d'Apache. Certaines devant obligatoirement se placer lĂ , autant toutes les regrouper.
Voici une page démo que je vous invite à visiter. Si vous avez des configurations exotiques ou que vous rencontrez un résultat inattendu n'hésitez pas à le partager : http://www.cahnory.fr/favicon-boilerplate/test.html
Sachez enfin que cette synthÚse ne fait que rebondir sur un travail énorme de Mathias Bynens : http://mathiasbynens.be/notes/touch-icons. Tout le mérite de la partie sur les apple-touch-icon lui revient et je vous conseil de le lire si vous souhaitez connaßtre en détail la prise en charge de ces icones.
Je met enfin Ă votre disposition un petit PSD qui permet de rapidement visualiser le rendu final de vos apple-touch-icon, precomposed ou pas : http://goo.gl/KQ0GC.
