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
  • Une icone 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).

Le Speed dial d’Opera

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 .

Conclusion

Nous nous retrouvons donc avec 7 images :

  • favicon.ico
  • favicon.png
  • apple-touch-icon-114x114-precomposed.png
  • apple-touch-icon-72x72-precomposed.png
  • apple-touch-icon-57x57-precomposed.png
  • apple-touch-icon-57x57.png
  • speed-dial-icon.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.

blog comments powered by Disqus
  1. jalbertbowdenii a reblogué ce billet depuis cahnory
  2. cahnory a publié ce billet