Favicon vient de « favorite icon » — l'icône que les navigateurs enregistrent avec les favoris. Aujourd'hui, le concept va bien au-delà : le favicon apparaît dans les onglets du navigateur, dans la barre d'adresse, dans les raccourcis du bureau, sur l'écran d'accueil des mobiles iOS et Android, dans les résultats Google, et comme icône de Progressive Web Apps (PWA). Chaque contexte exige une taille différente.

L'erreur la plus courante est de créer un seul fichier favicon.ico de 16×16 pixels et de considérer le travail terminé. Sur un écran Retina ou un iPhone, cette icône apparaîtra floue. La solution est de générer un ensemble complet de tailles — ce qui semble compliqué, mais peut se faire en quelques secondes avec le bon outil.

Qu'est-ce que le fichier .ico et quand l'utiliser

Le format .ico est le format original du favicon, créé par Microsoft dans les années 90. Il a une caractéristique particulière : il peut contenir plusieurs tailles dans un seul fichier — par exemple, 16×16 et 32×32 en même temps. Le navigateur choisit la taille la plus adaptée à chaque contexte.

Le favicon.ico reste nécessaire en 2026 pour une raison précise : les anciens navigateurs et certains robots de recherche tentent d'accéder automatiquement au fichier à /favicon.ico à la racine du site. S'il n'existe pas, cela génère une erreur 404 inutile dans les logs du serveur. C'est pourquoi, même en utilisant du PNG moderne partout, il est recommandé d'avoir un favicon.ico à la racine.

Tableau complet des tailles de favicon

Voici la liste de toutes les tailles qu'un favicon complet doit couvrir en 2026 :

TailleFormatOù c'est utilisé
16 × 16 px.ico / PNGOnglet du navigateur (par défaut)
32 × 32 px.ico / PNGRaccourci sur le bureau (Windows), onglets sur écrans HiDPI
48 × 48 px.ico / PNGRaccourci dans Windows Explorer
57 × 57 pxPNGiPhone (iOS 1–6, écrans non-Retina)
60 × 60 pxPNGiPhone (iOS 7+, écrans non-Retina)
72 × 72 pxPNGiPad (iOS 1–6, écrans non-Retina)
76 × 76 pxPNGiPad (iOS 7+, écrans non-Retina)
96 × 96 pxPNGRaccourci sur Chrome (Android)
114 × 114 pxPNGiPhone Retina (iOS 1–6)
120 × 120 pxPNGiPhone Retina (iOS 7+)
144 × 144 pxPNGiPad Retina (iOS 1–6), tuile Windows 8
152 × 152 pxPNGiPad Retina (iOS 7+)
167 × 167 pxPNGiPad Pro (iOS 9+)
180 × 180 pxPNGiPhone 6 Plus et versions plus récentes
192 × 192 pxPNGAndroid Chrome, PWA (manifest.json)
512 × 512 pxPNGÉcran de démarrage Android Chrome, PWA haute résolution

💡 Bonne nouvelle : vous n'avez pas besoin de créer chaque taille manuellement. Le Générateur de Favicon d'ImageTools génère automatiquement tous ces fichiers à partir d'une seule image — y compris le .ico avec plusieurs tailles et un ZIP avec tous les PNG.

Quelle image utiliser comme base pour le favicon

L'image source doit avoir au moins 512×512 pixels — c'est la taille maximale nécessaire, et partir d'une grande image garantit que les tailles plus petites soient générées avec qualité. Utiliser une petite image comme base produit des icônes floues dans les tailles plus grandes.

Formats acceptés en entrée

Conseils de design pour les favicons

Le favicon est un espace très restreint — la version 16×16 ne compte que 256 pixels au total. Cela impose des contraintes de design que beaucoup ignorent :

Générez votre favicon maintenant — toutes les tailles d'un coup

Téléversez votre image et téléchargez un ZIP avec le .ico et tous les PNG nécessaires pour navigateurs, iPhone, Android et PWA. Gratuit, sans inscription.

Créer un favicon gratuit

Comment installer le favicon sur votre site

Après avoir généré les fichiers, vous devez les référencer dans le <head> du HTML. Le code complet recommandé pour 2026 est :

<!-- Favicon basique pour navigateurs -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple Touch Icon (iPhone et iPad) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android et PWA -->
<link rel="manifest" href="/site.webmanifest">

Le fichier favicon.ico doit se trouver à la racine du site (le même répertoire que index.html). Les autres fichiers PNG peuvent être à la racine ou dans un sous-dossier, tant que les chemins dans le HTML sont corrects.

Le fichier site.webmanifest

Pour les PWA et pour qu'Android Chrome reconnaisse correctement votre icône, vous avez besoin d'un fichier site.webmanifest à la racine du site. Le contenu de base est :

{
  "name": "Nom de Votre Site",
  "short_name": "Site",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

📦 Le ZIP du Générateur de Favicon inclut déjà le fichier site.webmanifest préconfiguré avec les bons chemins — il suffit de décompresser et de téléverser les fichiers à la racine de votre site.

Comment installer sur des plateformes spécifiques

WordPress

Sur WordPress, le favicon s'appelle « icône du site ». Pour le configurer : allez dans Apparence → Personnaliser → Identité du Site et cliquez sur « Sélectionner l'Icône du Site ». WordPress se charge automatiquement de générer les tailles nécessaires à partir de l'image que vous envoyez — utilisez simplement une image carrée d'au moins 512×512 pixels.

Shopify

Dans Boutique en Ligne → Préférences, faites défiler jusqu'à « Icône de la boutique » et téléversez une image carrée d'au moins 512×512 pixels en PNG ou JPG.

Wix

Dans Paramètres → Identité de Marque → Favicon. Utilisez une image carrée en PNG ou JPG.

Squarespace

Dans Design → Style du Navigateur, section « Favicon ». Recommandé : PNG carré de 100×100 pixels (Squarespace fait le reste).

HTML/CSS pur ou frameworks

Placez tous les fichiers générés à la racine du projet et ajoutez les balises <link> montrées ci-dessus dans le <head> de chaque page — ou dans le layout de base, si vous utilisez un framework comme Next.js, Nuxt, ou similaire.

Vérifier que le favicon fonctionne

Après l'installation, ouvrez le site dans un onglet du navigateur et vérifiez que l'icône apparaît. Si elle n'apparaît pas immédiatement, essayez :

  1. Vider le cache du navigateur (Ctrl+Shift+R sur Windows, Cmd+Shift+R sur Mac).
  2. Ouvrir en onglet privé — qui n'utilise pas le cache.
  3. Attendre quelques minutes, car les navigateurs mettent souvent les favicons en cache pour des durées variables.
  4. Vérifier que le chemin du fichier dans le HTML est correct et que le fichier existe réellement sur le serveur.

Questions fréquentes

Quelle est la taille minimale recommandée pour créer un favicon ?
512×512 pixels. C'est la plus grande taille nécessaire (pour l'écran de démarrage PWA sur Android), et partir d'une image de cette dimension garantit que toutes les tailles plus petites soient générées avec netteté. Utiliser une image plus petite produit des icônes floues dans les formats plus grands.
PNG ou ICO : lequel est préférable pour un favicon ?
Les deux se complètent. Le .ico doit rester à la racine du site pour la compatibilité avec les anciens navigateurs et les robots de recherche. Les PNG séparés sont utilisés pour l'Apple Touch Icon, Android Chrome et les PWA — ces contextes n'acceptent pas le .ico. La bonne pratique consiste à avoir les deux : un favicon.ico à la racine et des PNG référencés via des balises <link> dans le HTML.
Ai-je vraiment besoin de toutes ces tailles ?
Pour la plupart des sites, l'ensemble minimal fonctionnel est : favicon.ico (16+32px), favicon-32x32.png, apple-touch-icon.png (180×180) et android-chrome-192x192.png. Cela couvre les navigateurs modernes, l'iPhone et l'Android. Les autres tailles servent à la compatibilité avec d'anciennes versions d'iOS et des contextes spécifiques comme les tuiles Windows. Comme un générateur les crée toutes en une fois, autant avoir l'ensemble complet.
Pourquoi mon favicon n'apparaît-il pas sur Google ?
Google met du temps à indexer et afficher les favicons dans les résultats de recherche — généralement de quelques jours à quelques semaines après la publication. Pour que le favicon apparaisse, le site doit : avoir un favicon accessible publiquement (non bloqué par robots.txt), avoir le fichier favicon.ico à la racine ou une balise <link rel="icon"> valide dans le HTML, et avoir été exploré par Googlebot. Les nouveaux sites mettent généralement plus de temps.
Puis-je utiliser le logo de mon entreprise comme favicon ?
Oui, à condition que la version simplifiée fonctionne en 16×16 pixels. Les logos avec du texte, des détails fins ou de nombreux éléments ne sont généralement pas reconnaissables à des tailles aussi petites. L'idéal est de créer une version « icône » du logo — uniquement le symbole, l'initiale ou l'élément le plus marquant de la marque — spécifique à l'usage de favicon.
Le favicon affecte-t-il le SEO de mon site ?
Directement, non — le favicon n'est pas un facteur de classement. Indirectement, oui : un favicon présent et bien réalisé apparaît dans les résultats de recherche à côté du nom du site, renforce la reconnaissance de la marque et peut améliorer le taux de clic (CTR). Les sites sans favicon apparaissent avec une icône générique dans les résultats, ce qui transmet moins de professionnalisme.