Les favicons modernes existent en plusieurs tailles (de 16×16 px à 512×512 px) et, selon les usages, en dif­fé­rents formats. Le PNG est très courant, le SVG devient une option in­té­res­sante, tandis que l’ICO reste souvent utilisé comme format de com­pa­ti­bi­lité. Pour les ap­pli­ca­tions Web, les icônes sont définies dans le fichier manifest.json, qui référence des images adaptées aux dif­fé­rents contextes d’affichage.

Pourquoi intégrer un favicon sur votre site Web ?

Un favicon (mot-valise de favorite et icon) est une petite image affichée dans les onglets du na­vi­ga­teur, en général à proximité de la barre d’adresse. Il facilite la re­con­nais­sance d’un site Web, lui confère une apparence pro­fes­sion­nelle et permet de le dis­tin­guer ra­pi­de­ment des autres pages ouvertes. À ce titre, un favicon peut avoir un effet positif indirect d’un point de vue SEO, par exemple via la vi­si­bi­lité et le taux de clic dans certains contextes.

Les favicons peuvent reprendre le logo d’une marque ou d’une en­tre­prise. Toutefois, en raison des con­traintes de taille très strictes, il s’agit le plus souvent d’un détail ou d’une variante sim­pli­fiée du logo. Sur les appareils mobiles, ces petits gra­phismes sont également utilisés comme icônes tactiles. C’est pourquoi il est re­com­mandé, pour chaque site ou projet Web, d’intégrer un favicon.

Quelle taille de favicon est re­com­man­dée ?

Les na­vi­ga­teurs et les appareils n’utilisent pas tous les mêmes di­men­sions de favicon. Les tailles 16×16 pixels et 32×32 pixels restent es­sen­tielles, car elles sont affichées dans les onglets des na­vi­ga­teurs clas­siques.

Pour les PWA (Pro­gres­sive Web Apps), c’est-à-dire des sites Web qui se com­por­tent comme des ap­pli­ca­tions, des favicons sup­plé­men­taires en 192×192 px et 512×512 px sont né­ces­saires. Ces di­men­sions sont définies dans le manifeste des icônes et utilisées par des na­vi­ga­teurs comme Chrome ou Edge lorsqu’un site Web est ajouté comme ap­pli­ca­tion.

Quelles autres tailles de favicon sont im­por­tantes pour Google et Apple ?

La taille des favicons pour Google revêt une im­por­tance par­ti­cu­lière, car Google peut les afficher non seulement dans le na­vi­ga­teur, mais aussi di­rec­te­ment dans les résultats de recherche. Dans ce contexte, Google re­com­mande des icônes carrées dont les di­men­sions sont un multiple de 48 pixels (par exemple 48×48 px ou 96×96 px).

Pour Android, il est en outre conseillé de fournir une icône en 192×192 pixels, utilisée lorsque les uti­li­sa­teurs ajoutent le site Web à l’écran d’accueil ou l’ins­tal­lent comme ap­pli­ca­tion.

Sur les appareils Apple, des di­men­sions plus élevées sont né­ces­saires afin d’assurer un rendu net sur les écrans haute ré­so­lu­tion. Les Apple Touch Icons utilisent ainsi gé­né­ra­le­ment des tailles su­pé­rieures, comme 180×180 pixels, spé­ci­fi­que­ment adaptées aux exigences d’iOS.

Ces icônes Apple sont intégrées via la balise HTML suivante dans le <head> de la page :

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
html

Les prin­ci­pales tailles de favicon en un coup d’œil

Certaines ex­cep­tions s’ap­pli­quent selon les na­vi­ga­teurs et les appareils. En par­ti­cu­lier sur des terminaux plus anciens, des di­men­sions sup­plé­men­taires peuvent être né­ces­saires afin que l’icône du na­vi­ga­teur s’affiche cor­rec­te­ment. Vous trouverez ci-dessous un ré­ca­pi­tu­la­tif clair des tailles les plus courantes :

Na­vi­ga­teur ou appareil Taille
La plupart des na­vi­ga­teurs modernes 16×16 ou 32×32 pixels
Google et Android 48×48 ou 192×192 pixels
iPhone/iOS (Apple Touch Icon) 180×180 pixels
iPad/iOS (modèles récents) 167×167 pixels
Google TV 96×96 pixels
Internet Explorer 9 24×24 pixels
Écran d’accueil iPad 72×72 pixels
iPhone (anciens modèles) et iPod Touch 57×57 pixels
Écran d’accueil iPhone 4 114×114 pixels
Sélection rapide Opera 195×195 pixels

Quels formats de favicon sont possibles ?

Vous pouvez utiliser dif­fé­rents formats de fichiers gra­phiques pour votre favicon. Bien que le format .ico classique reste largement com­pa­tible, il est aujourd’hui considéré comme moins adapté aux usages modernes, mais toujours utile pour la com­pa­ti­bi­lité (fallback). Les na­vi­ga­teurs modernes pri­vi­lé­gient les favicons aux formats PNG ou SVG. Pour les PWA, par exemple, le format PNG est utilisé dans le fichier manifeste, car il offre un bon compromis entre qualité et com­pa­ti­bi­lité.

Voici un aperçu des formats de fichier courants :

  • .ico : com­pa­ti­bi­lité maximale, mais évo­lu­ti­vité limitée
  • .png : rendu net sur tous les écrans, trans­pa­rence possible
  • .svg : format vectoriel, pratique pour l’évo­lu­ti­vité (support selon na­vi­ga­teurs) ; utile si vous gérez des variantes (clair/sombre) selon les capacités du na­vi­ga­teur
  • .gif : uni­que­ment dans des cas par­ti­cu­liers, par exemple pour des icônes animées (peu re­com­mandé, support variable)
Conseil

Assurez-vous que votre serveur transmet le type MIME approprié, par exemple image/png ou image/svg+xml, afin de garantir un affichage correct dans tous les na­vi­ga­teurs.

Comment créer un favicon avec un gé­né­ra­teur ?

Plusieurs critères doivent donc être pris en compte pour choisir la taille de favicon adaptée à votre site Web. C’est pourquoi la solution la plus simple consiste à utiliser un gé­né­ra­teur de favicon. Celui-ci vous guide pas à pas et veille à ce que les di­men­sions et le format de l’image soient com­pa­tibles avec l’ensemble des na­vi­ga­teurs courants.

Aller au menu principal