RootsLabs

More than a tool ! GitHub Google+ LinkedIn RSS

Favicons : Et si on parcourait le monde ?

Progi1984 - Commentaires (0)

Si je vous demande le nom de cette petite image qui représente votre marque, votre projet ou votre société dans les navigateurs, vous allez sûrement me donner comme réponse : FAVICON. Dans cet article, nous allons faire le tour des navigateurs et de certains systèmes pour voir ce qu’ils attendent comme favicon et le rendu.

Navigateurs & Favicon

Internet Explorer

Le navigateur cher à tout développeur web est une exception car ce qu’il attend comme favicon est un fichier icône d’extension ICO : favicon.ico.
Cette icône devra contenir plusieurs formats de votre logo :

  • 16×16
  • 24×24
  • 32×32
  • 64×64

Ensuite, au niveau de code HTML, l’intégration se fera comme cela :

Source : Microsoft MSDN

Autres navigateurs

Les autres navigateurs attendent une image de type PNG : favicon.png, mais peuvent souvent se débrouiller avec le fichier favicon.ico.
Le format, par défaut, est de 16×16.
Mais il y a des exceptions :

  • Safari pour MacOS : 32×32
  • Google TV : 96×96
  • Opera Speed Dial (version 12 à 15) : 160×160
  • Opera Coast : 228×228

Pour le code HTML :

Source : Google Developers
Source : Opera
Source : Opera Coast

Mobiles & Favicon

Google Chrome Mobile

Avec la version mobile de Google Chrome (à partir de la version M31 Beta), on reste sur du format PNG mais dans une taille de 196×196.

Pour le code HTML :

Source : Google Developers

iOS

Apple fait la différence en utilisant un attribut rel de type « apple-touch-icon ». Il lui faut une image de type PNG.
Les différentes tailles sont :

  • iPhone non-Retina (iOS6 ou inférieur) : 57×57
  • iPhone non-Retina (iOS7) : 60×60
  • iPad non-Retina (iOS6 ou inférieur) : 72×72
  • iPad non-Retina (iOS7) : 76×76
  • iPhone Retina (iOS6 ou inférieur) : 114×114
  • iPhone Retina (iOS7) : 120×120
  • iPad Retina (iOS6 ou inférieur) : 144×144
  • iPad Retina (iOS7) : 152×152

Pour le code HTML :

Source : Apple Developer

Système d’exploitation & Favicon

Windows 8.0 et IE 10

Contrairement à IE 11 et son fichier browserconfig.xml, IE 10 demande des balises META et utilise un fichier PNG de taille 144×144.

Pour le code HTML :

Source : Article du Blog MSDN sur ces balises META
Source : Documentation MSDN sur ces balises META

Windows 8.1 et IE 11

L’équivalent Metro de l’attribut « apple-touch-icon » est la tuile MS (a.k.a. MSTile). Il lui faut définir deux choses la couleur principale via la clé « msapplication-TileColor » et la favicon via la clé « msapplication-TileImage ».

IE 11 recherche un fichier browserconfig.xml à la racine du site en plus des balises META. Ce fichier permet de définir plusieurs paramètres dont d’autres favicons :

  • square70x70logo : Tuile de petite taille
  • square150x150logo : Tuile de moyenne taille
  • square310x310logo : Tuile de grande taille
  • wide310x150logo : Tuile en mode 16/9
  • TileColor : Couleur de fond de la tuile

Voici un exemple de fichier browserconfig.xml :

Si vous ne souhaitez pas utiliser le nom de fichier browserconfig.xml, il faut le redéfinir via une balise META :

Source : MSDN

Conclusion

Le monde des favicon est vaste, mais j’espère que cette carte vous aidera à vous diriger et y trouver votre chemin.

Ajouter un commentaire

Commentaire :