Tailles des favicons : Lesquelles vous avez réellement besoin en 2025

Cherchez « favicon size » et vous obtenez un flot de chiffres contradictoires : 16x16, 32x32, 48x48, 64, 180, 192, 256, 512. La plupart de ces listes ont été écrites il y a une décennie et jamais mises à jour. En pratique, un site moderne a besoin d'environ quatre fichiers, et vous pouvez les créer tous en une seule opération avec le générateur de favicon — il fonctionne entièrement dans votre navigateur, donc votre logo ne quitte jamais votre machine.

Voici à quoi correspond chaque taille, et ce que vous pouvez ignorer sans risque.

Les tailles qui comptent encore

16x16 et 32x32 — onglets de navigateur et signets

C'est le favicon classique. 16x16 est ce que vous voyez dans une bande d'onglets chargée ; 32x32 est utilisé sur les écrans haute résolution, la barre de signets et certaines interfaces de barre d'adresse. Les deux sont traditionnellement regroupés dans un seul fichier favicon.ico, qui peut contenir plusieurs résolutions à la fois. Windows extrait également 48x48 du même .ico pour les raccourcis de bureau, donc l'inclure ne coûte presque rien.

180x180 — icône Apple touch

Quand quelqu'un appuie sur « Ajouter à l'écran d'accueil » sur un iPhone ou iPad, Safari cherche apple-touch-icon.png à 180x180. Si elle n'y est pas, iOS prend une capture d'écran de votre page et l'utilise à la place, ce qui semble horrible. Ce PNG couvre chaque appareil iOS actuel car le système le réduit selon les besoins.

192x192 et 512x512 — Android et PWAs

Android Chrome et les applications web installables lisent les icônes à partir de votre site.webmanifest. 192 est l'icône d'écran d'accueil ; 512 est utilisé pour l'écran de démarrage et les listes d'applications. Si vous voulez jamais que votre site soit installable, vous avez besoin des deux.

SVG — optionnel mais intéressant

Firefox et Chrome supportent tous les deux une favicon SVG, qui reste nette à n'importe quelle taille et peut s'adapter au mode sombre avec une requête média à l'intérieur du fichier. C'est un bonus, pas un remplacement — Safari et les navigateurs plus anciens veulent toujours les versions raster.

Ce que vous pouvez ignorer

64x64, 96x96, 128x128, tout l'ensemble d'images de tuiles Windows, et la douzaine de fichiers hérités de style apple-touch-icon-76x76. Ils étaient nécessaires pour les appareils qui ont largement disparu. Livrer vingt fichiers d'icônes encombre votre dépôt et ne vous apporte rien de mesurable.

Le HTML

Déposez les fichiers à la racine de votre site et ajoutez ceci à <head> :

<link rel="icon" href="/favicon.ico" sizes="any">
<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">

Et dans le manifeste :

"icons": [
  { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
  { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]

Concevoir pour 16 pixels

Le plus difficile n'est pas l'export, c'est qu'un logo complet devient pâteux à 16x16. Quelques points qui aident :

• Utilisez un fragment, pas le logo entier. Une lettre, un glyphe, une forme. Les wordmarks sont illisibles à la taille de l'onglet.
• Commencez en carré. Si votre source est un logo large, recadrez-le en carré d'abord pour que le générateur ne le mette pas en lettrage avec de l'espace vide.
• Gardez le contraste élevé. Les contours fins disparaissent. Les formes pleines survivent.
• Décidez du fond. Un PNG transparent s'adapte au chrome clair et sombre du navigateur ; si votre marque est sombre, envisagez plutôt de lui donner une tuile de couleur unie. Vous pouvez supprimer le fond d'une capture d'écran de logo en quelques secondes si vous n'avez qu'un JPG plat.
• Respectez la zone de sécurité. Android masque les icônes en cercles et squircles, donc laissez environ 10% de remplissage autour du bord de votre artwork 512.

Si vous faites correspondre le fond du favicon à la couleur de marque de votre site, le sélecteur de couleur d'image extraira le hex exact d'une capture d'écran existante — pratique aussi pour la balise meta theme-color.

Générez l'ensemble complet en une seule opération

Ne téléchargez rien : déposez un PNG ou SVG carré dans le générateur de favicon gratuit basé sur navigateur et il produit le .ico, l'icône Apple touch, et les PNG 192/512 localement, dans votre propre onglet. Rien n'est envoyé à un serveur, il n'y a pas d'inscription, et aucune copie de votre logo non publié ne finit assis dans le compartiment de stockage de quelqu'un d'autre.

Puis dézoomez votre navigateur, regardez l'onglet, et posez la seule question qui compte : pouvez-vous dire ce que c'est ?