Taille des favicons : format et dimensions des petites images

Les nombreux navigateurs nécessitent différentes tailles de favicon. En dehors du format de favicon 16 x 16 ou 32 x 32 pixels, quelques autres variantes sont recommandées.

Le favicon (mot valise composé de « favori » et « icône ») est un petit graphique qui s’affiche au-dessus de la barre d’adresse dans les onglets et permet ainsi de retrouver plus facilement un site Web. Les favicons peuvent être le logo d’une marque ou d’une entreprise. Comme il existe des limites strictes à la taille d’un favicon, seule une partie du logo est utilisée. Sur les terminaux mobiles tactiles, ces petits graphiques sont également utilisés pour les icônes des applications. Vous trouverez tout ce qu’il faut savoir sur le sujet dans notre article « Qu’est-ce qu’un favicon ? : définition et exemples ».

Si vous avez un site Web, il est conseillé d’intégrer un favicon. Votre site sera ainsi beaucoup plus facile à trouver, plus professionnel et plus performant du point de vue du référencement. La dimension des favicons est toutefois soumise à des règles strictes. Nous vous recommandons de créer votre favicon dans les dimensions du format 16 x 16 ou 32 x 32 pixels, car il convient à la majorité des navigateurs. Pour les écrans à haute résolution, la plus grande taille de favicon est conseillée. Le format plus petit est également couramment utilisé pour de nombreuses autres applications. Le plus simple est donc d’intégrer les deux formats dans le code.

En plus de ces deux tailles de favicons, il existe des formats utiles qu’il est conseillé d’intégrer. C’est particulièrement important pour Google, et ce à double titre. Sur la plateforme, les résultats de recherche sont dotés d’un favicon dont la taille doit être de 48 x 48 pixels. Il est également possible de choisir un format multiple de ces dimensions. Celles-ci sont également importantes pour Android. Le système d’exploitation utilise des favicons de cette taille pour placer des raccourcis sur l’écran d’accueil. Le format de favicon 192 x 192 pixels est également utile pour les appareils avec une résolution d’écran élevée.

La situation est encore un peu plus compliquée chez Apple. Différentes tailles de favicon sont recommandées selon le terminal. Pour l’iPhone, le format 60 x 60 pixels est utilisé. Une résolution nettement plus élevée est toutefois possible, pour autant qu’elle soit un multiple de cette valeur. Cela permet un affichage optimal en haute résolution, qui sera ensuite réduit pour d’autres usages. Une image de 180 x 180 pixels est donc un bon choix. En revanche, les icônes sur l’iPad sont affichées avec 83,5 x 83,5 pixels. Pour les écrans Retina et Super Retina modernes, le format de favicon 167 x 167 pixels est idéal.

D’autres exceptions s’appliquent à certains navigateurs et terminaux. C’est justement pour les anciens appareils que d’autres dimensions sont nécessaires pour que la taille de l’icône du navigateur soit correcte. Vous trouverez ici une liste claire des dimensions de favicon les plus courantes :

Vous pouvez utiliser différents formats graphiques pour votre favicon. Toutefois, le format Windows .ico, pris en charge par de nombreux navigateurs, est particulièrement utilisé. Un favicon au format .png est adapté aux graphiques plus grands, qui peuvent par exemple aussi faire office d’icônes tactiles. D’autres formats possibles sont .svg ou .gif.

Il y a donc quelques points à prendre en compte lorsque vous cherchez la bonne taille de favicon pour votre site Web. C’est pourquoi le moyen le plus simple est de passer par un générateur. Celui-ci vous accompagne à travers toutes les étapes de création et veille à ce que le format du favicon soit adapté à tous les navigateurs pertinents.

Pour savoir comment insérer le favicon sur votre site, consultez les articles suivants :

• Ajouter le favicon dans WordPress
• Intégrer un favicon avec HTML