De quelles tailles de favicon avez-vous besoin en 2026 ? Le jeu idéal

En 2026, le jeu de favicons idéal se compose de : un favicon.ico contenant des images de 16, 32 et 48 px, un PNG 96x96 (pour Google Search), un favicon SVG optionnel, un apple-touch-icon.png de 180x180, et des PNG de 192x192 et 512x512 (plus un 512 maskable) déclarés dans un manifeste d'application web. Les tuiles Windows et les anciennes tailles Apple ne sont nécessaires que si vous devez prendre en charge de très vieux appareils. Tout ce qui suit explique pourquoi, avec un tableau des tailles, du HTML prêt à l'emploi et les erreurs courantes à éviter.

Le paysage des favicons était autrefois confus : chaque navigateur et chaque système d'exploitation réclamait sa propre taille, ce qui produisait les fameux blocs <head> de 20 lignes. Aujourd'hui, la plupart de ces exigences sont obsolètes. Les navigateurs modernes redimensionnent une seule bonne icône, iOS veut une seule taille et Android lit le manifeste. Cet article distingue ce qui est vraiment nécessaire de ce qui est simplement agréable à avoir.

La réponse courte : le jeu de fichiers favicon idéal

• favicon.ico (16, 32, 48 px dans un seul fichier) à la racine du site. Les navigateurs, les lecteurs de flux et de nombreux outils demandent encore automatiquement /favicon.ico.
• favicon.svg (optionnel mais recommandé) pour un rendu net à toutes les tailles et la prise en charge du mode sombre.
• PNG 16x16, 32x32 et 96x96 comme solutions de repli explicites. La version 96 px aide pour Google Search, qui exige un multiple de 48 px.
• apple-touch-icon.png en 180x180, opaque, sans transparence.
• PNG 192x192 et 512x512 dans manifest.json, plus une icône maskable 512x512 pour Android.
• Balise meta theme-color pour teinter l'interface du navigateur sur mobile.
• Tuiles Windows (70, 150, 310 px) avec browserconfig.xml uniquement pour l'ancien Windows et les sites épinglés sous IE11.

Tableau des tailles de favicon : usage, noms de fichiers et priorité

Utilisez ce tableau comme liste de contrôle. « Requis » signifie qu'un site normal paraîtra cassé ou inachevé sans cet élément ; « Recommandé » signifie un net gain de qualité ; « Optionnel » signifie un usage de niche ou hérité.

favicon.ico : 16, 32 et 48 px dans un seul fichier

Un fichier ICO est un conteneur qui regroupe plusieurs bitmaps. Un bon favicon.ico inclut des images 16x16, 32x32 et 48x48 afin que le navigateur ou le système choisisse la plus proche. Placez-le à la racine de votre domaine (https://example.com/favicon.ico). Même si votre HTML pointe ailleurs, de nombreux robots d'exploration, lecteurs RSS et navigateurs anciens demandent encore cette URL exacte ; l'avoir évite le bruit des erreurs 404 dans vos journaux.

Ne vous contentez pas de renommer un PNG en .ico. La plupart des navigateurs le tolèrent, mais certains outils le rejettent et vous perdez l'avantage du multi-résolution. Exportez un vrai fichier ICO.

Favicons PNG : 16, 32 et 96 px

Les liens PNG avec un attribut sizes explicite permettent au navigateur de choisir le meilleur bitmap sans analyser l'ICO. En pratique, le 32x32 couvre les onglets haute densité, et le 16x16 est presque redondant aujourd'hui. La taille 96x96 vaut la peine d'être ajoutée, car Google Search affiche des favicons à côté des résultats et exige une icône carrée dont la taille est un multiple de 48 px (48x48, 96x96, 144x144, etc.). Un fichier de 96 px donne à Google une source plus nette qu'un fichier de 48 px lorsqu'il le réduit pour les résultats mobiles.

Conseil de conception : à 16 px, les détails fins disparaissent. Utilisez une forme simple et marquée, un fort contraste et peu ou pas de texte. Vous pouvez retoucher et prévisualiser votre icône dans l'éditeur MakeFav avant de l'exporter.

Favicon SVG et mode sombre

Un favicon SVG est un seul petit fichier qui reste net quelle que soit la densité d'écran. Les navigateurs basés sur Chromium et Firefox le prennent en charge. La prise en charge de Safari a longtemps été limitée, ne vous fiez donc jamais au SVG seul : conservez les solutions de repli ICO et PNG.

Le plus grand avantage est la personnalisation du thème. Comme un SVG peut contenir du CSS, vous pouvez adapter l'icône au thème de couleurs de l'utilisateur avec prefers-color-scheme :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

Notez que la media query reflète le thème du navigateur ou du système, celui qu'utilise la barre d'onglets. Elle ne suit pas un sélecteur de thème présent sur votre propre site.

Une particularité connue : lorsque un ICO et un SVG sont tous deux déclarés, Chrome peut choisir l'ICO. Déclarer l'ICO avec sizes="32x32" et lister le SVG ensuite pousse Chrome à préférer le SVG, comme le montre le code ci-dessous.

Apple touch icon : 180x180 et les anciennes tailles

Lorsqu'un utilisateur ajoute votre site à l'écran d'accueil d'iOS ou d'iPadOS, Safari utilise l'apple-touch-icon. Aujourd'hui, un seul PNG de 180x180 px suffit : iOS le réduit pour les appareils plus anciens et les iPad. Nommez-le apple-touch-icon.png et placez-le à la racine ; iOS cherche même ce fichier par défaut si aucune balise link n'existe.

Règles pour l'icône Apple :

• Pas de transparence. iOS remplit les pixels transparents en noir, si bien qu'un logo transparent se transforme souvent en tache noire. Ajoutez une couleur de fond unie.
• Pas de coins arrondis. iOS applique son propre masque arrondi. Fournissez un carré complet.
• Gardez le contenu essentiel éloigné des bords, car les coins sont rognés.

Quand avez-vous besoin des anciennes tailles (57, 72, 76, 114, 120, 144, 152, 167) ? Seulement si vous prenez en charge iOS 6 ou antérieur, ou si vous voulez un contrôle exact au pixel par appareil pour l'iPad Pro (167 px) et l'iPad (152 px). Pour presque tous les sites en 2026, le seul fichier 180x180 suffit. La configuration de compatibilité maximale ci-dessous en inclut quelques-unes par souci d'exhaustivité.

Icônes Android et PWA : 192, 512 et maskable

Chrome sur Android et les autres navigateurs compatibles PWA lisent les icônes depuis le manifeste d'application web, et non depuis <link rel="icon">. Pour l'installabilité, il vous faut au minimum un PNG 192x192 et un PNG 512x512. L'icône de 192 px sert sur l'écran d'accueil et dans le lanceur d'applications ; celle de 512 px apparaît sur les écrans de démarrage et dans les boîtes de dialogue d'installation.

Icônes maskable et zone de sécurité

Les icônes adaptatives d'Android peuvent être découpées en cercle, squircle ou autre forme selon l'appareil. Une icône maskable est conçue pour être rognée sans risque : le contenu important doit se trouver dans la zone de sécurité, un cercle centré dont le diamètre représente 80 % de l'image (rayon égal à 40 % du côté). Pour un fichier 512x512, cela signifie garder votre logo dans un cercle d'environ 410 px de diamètre, et étendre la couleur de fond jusqu'aux quatre bords afin qu'aucun vide n'apparaisse après le masquage.

Déclarez l'icône maskable comme une entrée à part avec "purpose": "maskable". Évitez "any maskable" sur un même fichier : la marge nécessaire au masquage paraît trop grande lorsque l'icône est affichée sans masque.

Exemple de manifest.json

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Servez le fichier en application/manifest+json (ou application/json) et liez-le depuis chaque page avec <link rel="manifest" href="/manifest.json">. Certains projets le nomment site.webmanifest ; le nom importe peu, c'est le lien qui compte.

Tuiles Windows et browserconfig.xml

Windows 8.1 et 10 permettent d'épingler un site au menu Démarrer, et IE11 ainsi que l'ancien Edge lisent les images de tuiles dans browserconfig.xml. Les tailles habituelles sont 70x70 (petite), 150x150 (moyenne), 310x150 (large) et 310x310 (grande). Edge basé sur Chromium utilise à la place le manifeste et les favicons classiques ; il s'agit donc d'une fonctionnalité héritée. Ne l'incluez que si votre audience compte encore des configurations Windows anciennes, par exemple en entreprise.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color : teinter l'interface du navigateur

La balise meta theme-color indique aux navigateurs mobiles (et à certains navigateurs de bureau) quelle couleur utiliser pour la barre d'adresse ou la barre de titre. Ce n'est pas un favicon, mais elle fait partie du même ensemble d'identité visuelle. Vous pouvez fournir des valeurs distinctes pour les modes clair et sombre :

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

Configuration moderne minimale ou compatibilité maximale

Configuration moderne minimale (recommandée pour la plupart des sites)

Cinq fichiers couvrent plus de 99 % des usages réels : favicon.ico, favicon.svg, apple-touch-icon.png (180x180) et les deux icônes du manifeste (192 et 512). Ajoutez le PNG 96x96 si la visibilité dans Google Search compte, et une icône maskable si vous publiez une PWA.

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">

Configuration de compatibilité maximale

Choisissez-la si vous servez une audience large ou en entreprise, ou si vous voulez couvrir tous les clients possibles. Elle ajoute des tailles PNG explicites, les anciennes tailles Apple, les tuiles Windows et les couleurs de thème.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

Remarquez les chemins relatifs à la racine commençant par /. Ils fonctionnent à toutes les profondeurs de page, ce qui nous amène aux erreurs les plus courantes.

Erreurs courantes sur les favicons et comment les corriger

1. Mauvais chemins

Un lien comme href="favicon.ico" est résolu par rapport à l'URL courante : il fonctionne sur / mais échoue sur /blog/post/. Utilisez des URL relatives à la racine (/favicon.ico) ou absolues. Vérifiez aussi que les fichiers existent réellement : ouvrez chaque URL directement dans le navigateur et assurez-vous qu'elle renvoie un HTTP 200, et non une redirection vers une page 404 ou un mur de connexion.

2. Attribut sizes manquant ou incorrect

Sans sizes, les navigateurs doivent télécharger les icônes pour les inspecter, et peuvent choisir la mauvaise. Déclarez toujours sizes sur les liens PNG et assurez-vous qu'il correspond aux dimensions réelles en pixels. Un fichier étiqueté 32x32 mais mesurant en réalité 64x64 donne des résultats incohérents.

3. Mise en cache agressive

Les navigateurs mettent les favicons en cache longtemps, souvent indépendamment du cache de la page. Après un changement d'identité visuelle, l'ancienne icône peut persister pendant des jours. Changez le nom du fichier ou ajoutez une chaîne de version (/favicon.ico?v=2) et mettez à jour les balises link. Un rechargement forcé ne rafraîchit souvent pas l'icône de l'onglet ; ouvrir directement l'URL de l'icône et la recharger fonctionne généralement.

4. Images non carrées

Les favicons doivent être carrés. Un logo rectangulaire est étiré, rogné ou entouré de bandes de façon imprévisible. Concevez un symbole carré dédié, comme une initiale ou un pictogramme, plutôt que de réduire un logotype large.

5. Apple touch icons transparentes qui deviennent noires

iOS remplit la transparence en noir. Donnez à l'icône 180x180 un fond opaque et n'arrondissez pas les coins à l'avance.

6. Icônes maskable sans zone de sécurité

Si le logo touche les bords d'une icône maskable, Android le coupera. Gardez-le à l'intérieur du cercle central de 80 % et remplissez tout le canevas avec la couleur de fond.

7. Blocage des icônes pour les robots d'exploration

Si robots.txt interdit le chemin de votre favicon, Google ne peut pas le récupérer et affichera une icône de globe générique dans les résultats de recherche. N'oubliez pas non plus que Google a besoin du favicon sur le même hôte que la page et ne le met à jour qu'occasionnellement : les changements peuvent mettre des jours ou des semaines à apparaître.

8. Oublier le lien vers le manifeste ou les purposes

Un manifeste non lié, ou sans icônes de 192 et 512 px, empêche l'invite d'installation dans Chrome. Validez-le dans les outils de développement de votre navigateur, dans l'onglet Application.

Générez tout le jeu en un clic

Créer une douzaine de fichiers à la main dans un éditeur d'images, puis les convertir en ICO et écrire le manifeste, est fastidieux et source d'erreurs. MakeFav génère tous les fichiers ci-dessus à partir d'une seule image, d'un texte ou d'un emoji : favicon.ico multi-tailles, PNG, SVG, Apple touch icon, PNG 192/512, icône maskable, tuiles Windows, manifest.json et browserconfig.xml, plus un extrait HTML prêt à coller, le tout dans un seul téléchargement ZIP. Vous pouvez affiner l'arrière-plan, les marges et la forme dans l'éditeur, vérifier un site existant avec le vérificateur de favicon et automatiser la génération grâce aux ressources pour développeurs.

Liste de contrôle de déploiement

1. Téléversez tous les fichiers à la racine de votre site.
2. Collez l'extrait HTML dans le <head> de chaque page (ou de votre gabarit commun).
3. Assurez-vous que les chemins sont relatifs à la racine et renvoient un HTTP 200.
4. Testez les modes clair et sombre, une installation sur l'écran d'accueil iOS et une installation Android.
5. Lancez le vérificateur pour repérer les tailles manquantes ou non conformes.
6. Contournez les caches avec une chaîne de version si vous avez remplacé une ancienne icône.

Questions fréquentes

Ai-je encore besoin de favicon.ico en 2026 ?

Oui. Bien que les navigateurs modernes acceptent le PNG et le SVG, de nombreux robots d'exploration, lecteurs de flux, clients de messagerie et navigateurs anciens demandent encore directement /favicon.ico. Un ICO multi-tailles avec des images de 16, 32 et 48 px est un petit fichier qui évite les icônes manquantes et les erreurs 404.

Quelle taille de favicon pour Google Search ?

Google exige un favicon carré dont la taille est un multiple de 48 px, d'au moins 48x48. Un PNG 96x96 est un choix sûr, et le SVG est également pris en charge. Google a aussi besoin que le fichier soit explorable : ne le bloquez donc pas dans robots.txt. Les mises à jour peuvent mettre des jours ou des semaines à apparaître.

180x180 suffit-il pour l'Apple touch icon ?

Pour presque tous les sites, oui. iOS et iPadOS réduisent un PNG 180x180 pour chaque appareil actuel. Les anciennes tailles (de 57 à 152 px) ne comptent que pour de très vieilles versions d'iOS. Pensez à utiliser un fond opaque pour que l'icône ne devienne pas noire.

Qu'est-ce qu'une icône maskable et en ai-je besoin ?

Une icône maskable est un PNG 512x512 conçu pour les formes d'icônes adaptatives d'Android. Son contenu important se trouve dans un cercle de 80 % de diamètre au centre, et l'arrière-plan remplit tout le carré. Vous n'en avez besoin que si vous proposez une PWA installable, mais elle donne à l'icône un aspect natif au lieu de la laisser dans un cercle blanc.

Pourquoi mon ancien favicon s'affiche-t-il encore après que je l'ai changé ?

Les navigateurs mettent les favicons en cache séparément et pour longtemps. Renommez le fichier ou ajoutez une chaîne de version comme ?v=2, mettez à jour les balises link, puis ouvrez directement l'URL de l'icône et rechargez-la. Les moteurs de recherche peuvent mettre plus de temps à actualiser leur propre copie.