Taille des favicons : format et di­men­sions des petites images

Les nombreux na­vi­ga­teurs né­ces­si­tent dif­fé­rentes tailles de favicon. En dehors du format de favicon 16 x 16 ou 32 x 32 pixels, quelques autres variantes sont re­com­man­dé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 fa­ci­le­ment un site Web. Les favicons peuvent être le logo d’une marque ou d’une en­tre­prise. 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 gra­phiques sont également utilisés pour les icônes des ap­pli­ca­tions. Vous trouverez tout ce qu’il faut savoir sur le sujet dans notre article « Qu’est-ce qu’un favicon ? : dé­fi­ni­tion 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 pro­fes­sion­nel et plus per­for­mant du point de vue du ré­fé­ren­ce­ment. La dimension des favicons est toutefois soumise à des règles strictes. Nous vous re­com­man­dons de créer votre favicon dans les di­men­sions du format 16 x 16 ou 32 x 32 pixels, car il convient à la majorité des na­vi­ga­teurs. Pour les écrans à haute ré­so­lu­tion, la plus grande taille de favicon est con­seil­lée. Le format plus petit est également cou­ram­ment utilisé pour de nom­breuses autres ap­pli­ca­tions. 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 par­ti­cu­liè­re­ment important pour Google, et ce à double titre. Sur la pla­te­forme, 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 di­men­sions. Celles-ci sont également im­por­tantes pour Android. Le système d’ex­ploi­ta­tion utilise des favicons de cette taille pour placer des rac­cour­cis sur l’écran d’accueil. Le format de favicon 192 x 192 pixels est également utile pour les appareils avec une ré­so­lu­tion d’écran élevée.

La situation est encore un peu plus com­pli­quée chez Apple. Dif­fé­rentes tailles de favicon sont re­com­man­dées selon le terminal. Pour l’iPhone, le format 60 x 60 pixels est utilisé. Une ré­so­lu­tion 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é­so­lu­tion, 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 ex­cep­tions s’ap­pli­quent à certains na­vi­ga­teurs et terminaux. C’est justement pour les anciens appareils que d’autres di­men­sions sont né­ces­saires pour que la taille de l’icône du na­vi­ga­teur soit correcte. Vous trouverez ici une liste claire des di­men­sions de favicon les plus courantes :

Vous pouvez utiliser dif­fé­rents formats gra­phiques pour votre favicon. Toutefois, le format Windows .ico, pris en charge par de nombreux na­vi­ga­teurs, est par­ti­cu­liè­re­ment utilisé. Un favicon au format .png est adapté aux gra­phiques 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é­ra­teur. Celui-ci vous ac­com­pagne à travers toutes les étapes de création et veille à ce que le format du favicon soit adapté à tous les na­vi­ga­teurs per­ti­nents.

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