Taille d'un favicon : toutes les dimensions

Un favicon est la petite icône qui apparaît dans l'onglet d'un navigateur, à côté du titre de la page, et dans les favoris. Il est minuscule, mais il compte : un site sans favicon semble inachevé, tandis qu'un favicon clair rend votre marque reconnaissable au milieu d'une rangée d'onglets ouverts. La bonne nouvelle : en créer un à partir d'un logo ou d'une image existante ne prend que quelques minutes.

Tailles de favicon : la référence complète

C'est la question avec laquelle presque tout le monde arrive, et la réponse honnête est qu'il n'existe pas une taille de favicon unique — il en existe un petit jeu, parce que chaque plateforme affiche l'icône à une échelle différente. Voici toutes les tailles qui comptent encore en 2026, et l'usage réel de chacune.

Ce qui fait un bon favicon

Comme il s'affiche à environ 16×16 à 32×32 pixels, un favicon doit fonctionner en tout petit. Les formes simples et marquées se lisent bien ; les logos détaillés avec des lignes fines ou du petit texte deviennent un flou illisible. Si votre logo est complexe, n'utilisez que son élément le plus reconnaissable — une seule lettre, un symbole, un monogramme.

Une image source carrée fonctionne le mieux, puisque le favicon lui-même est carré. Veillez à ce que la partie importante soit centrée avec un peu d'espace autour pour que rien ne soit rogné.

Partez d'une image d'au moins 256×256 pixels pour que l'icône reste nette une fois générée à chaque taille. Travailler à partir d'un logo carré en haute résolution donne le résultat le plus propre.

Comment le créer

Prenez votre logo ou image carré, et convertissez-le en fichier .ico. Déposez l'image dans notre convertisseur, choisissez l'ICO en sortie, et téléchargez le favicon — tout s'exécute dans votre navigateur, votre logo n'est jamais envoyé. Si votre source n'est pas carrée, recadrez-la d'abord en carré pour que l'icône ne soit pas déformée.

Pour le meilleur rendu à toutes les tailles, générez le .ico à partir d'une version nette et contrastée de votre marque plutôt que d'une photo en couleurs chargée.

Inutile d'en faire autant de fichiers séparés

Le tableau liste sept tailles, mais cela ne signifie pas sept fichiers. Les trois petites tailles — 16, 32 et 48 pixels — tiennent toutes dans un seul favicon.ico, un format conteneur conçu précisément pour héberger plusieurs résolutions à la fois. Le navigateur ouvre le fichier et choisit la taille adaptée au contexte. C'est toute la raison d'être du .ico, et c'est pourquoi ce format a survécu trente ans.

Le jeu moderne fait donc quatre fichiers, pas sept : un favicon.ico contenant les trois petites tailles, un SVG pour les navigateurs qui le gèrent, un PNG 180×180 pour iOS, et deux entrées dans un manifeste web pour Android. Les guides plus anciens qui recommandent de générer vingt PNG différents décrivent une époque de fragmentation mobile révolue depuis des années.

Si vous ne produisez qu'un seul fichier, que ce soit le favicon.ico. C'est le seul que tous les navigateurs cherchent automatiquement, et un site qui n'a que celui-là s'affichera correctement partout — il paraîtra simplement un peu flou quand quelqu'un l'enregistrera sur l'écran d'accueil de son téléphone.

Où déclarer chaque fichier

Placez les fichiers à la racine de votre site et référencez-les dans l'en-tête HTML. Quatre lignes couvrent toutes les plateformes :

<link rel="icon" href="/favicon.ico" sizes="32x32">

<link rel="icon" href="/icon.svg" type="image/svg+xml">

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<link rel="manifest" href="/site.webmanifest">

L'ordre compte moins qu'avant, mais l'attribut sizes de la première ligne sert à quelque chose : il indique aux navigateurs qui comprennent le SVG de préférer la version vectorielle, tout en laissant le .ico en repli pour les autres. Les navigateurs qui ne gèrent ni l'un ni l'autre trouvent de toute façon favicon.ico tout seuls à la racine.

Le manifeste est un petit fichier JSON qui liste les icônes de 192 et 512 pixels. Il n'est utile que si vous voulez que le site s'installe proprement comme une application sur Android — pour un site classique, les trois premières lignes suffisent.

Pourquoi votre favicon ne s'affiche pas

Les favicons sont mis en cache bien plus agressivement que n'importe quelle autre ressource, ce qui les rend pénibles à déboguer. Les navigateurs les conservent dans un stock séparé qu'un simple rafraîchissement forcé ne vide pas, si bien que vous pouvez déployer une nouvelle icône et voir l'ancienne pendant des jours. Ouvrez directement le fichier par son URL pour vérifier qu'il est bien en place, puis rechargez cet onglet — cela force la mise à jour plus vite que de vider tout le cache.

L'autre cause fréquente est une image source qui n'était pas carrée. Un logo rectangulaire converti en icône carrée se retrouve soit étiré, soit rogné, et aucun des deux ne paraît intentionnel. Recadrez d'abord en carré, l'élément important centré avec une petite marge autour, puis convertissez.

Enfin, vérifiez le contraste sur fond clair comme sur fond sombre. Une icône à fond blanc est invisible sur un thème clair ; un monogramme sombre disparaît sur un thème sombre. Si votre marque a un fond transparent, testez-la sur les deux avant de conclure qu'elle fonctionne.

Comment l'ajouter à votre site

Placez le fichier (souvent nommé favicon.ico) à la racine de votre site. La plupart des navigateurs le trouveront automatiquement, mais il est recommandé de le référencer aussi dans l'en-tête HTML avec une balise link : <link rel="icon" href="/favicon.ico">. Si vous utilisez un créateur de site ou un CMS, il y a généralement un champ « favicon » ou « icône du site » dans les réglages — téléversez simplement le fichier créé.

Une fois en ligne, il faudra peut-être rafraîchir ou vider le cache pour voir la nouvelle icône dans l'onglet. Ensuite, votre site paraît un peu plus soigné partout où il apparaît.