Guide de génération ICO/Favicon : icônes de site web et icônes PWA

Pourquoi avez-vous besoin d'un Favicon ?

Un favicon est la petite icône affichée dans les onglets du navigateur, les barres de favoris et les écrans d'accueil des téléphones. Un site web professionnel doit en avoir un — sinon :

L'onglet du navigateur affiche une icône vide par défaut, réduisant la reconnaissance de marque
Les utilisateurs ne peuvent pas trouver rapidement votre site dans les favoris
Les installations PWA manquent d'une icône d'application

Spécifications de taille de Favicon

Différentes plateformes et contextes nécessitent différentes tailles :

Taille	Usage	Format
16×16	Onglet du navigateur (minimal)	ICO/PNG
32×32	Onglet du navigateur (standard)	ICO/PNG
48×48	Barre des tâches Windows	ICO
180×180	Apple Touch Icon (iOS)	PNG
192×192	Android Chrome	PNG
512×512	Icône de lancement PWA	PNG

À propos du format ICO

ICO est un format conteneur — un seul fichier ICO peut contenir plusieurs tailles d'icônes. Le navigateur sélectionne automatiquement la taille la plus appropriée. C'est pourquoi un fichier ICO ne pèse que quelques dizaines de Ko mais fonctionne dans tous les scénarios.

Utilisation de l'outil de génération ICO

Étape 1 : Préparer l'image source

Choisissez une image carrée haute résolution comme source. Recommandations :

Au moins 512×512 (1024×1024 préféré)
Graphique simple restant reconnaissable en petit
Éviter les petits textes — illisibles à 16×16

Étape 2 : Télécharger et générer

Ouvrez le Générateur ICO
Téléchargez l'image source (PNG, JPG, SVG supportés)
Sélectionnez les tailles nécessaires (par défaut : toutes — 16, 32, 48, 180, 192, 512)
Cliquez sur Générer

Étape 3 : Télécharger les fichiers

L'outil produit deux résultats :

favicon.ico — ICO multi-taille contenant 16×16, 32×32, 48×48
favicon-*.png — fichiers PNG individuels pour chaque taille

Référencer le Favicon en HTML

Placez les fichiers à la racine de votre site ou dans le dossier public/, puis ajoutez dans <head> :

<!-- ICO (support des anciens navigateurs) -->
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- PNG (navigateurs modernes) -->
<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 -->
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">

Configuration par framework

Framework	Comment configurer
Next.js	Placer dans le répertoire `app/`, détection automatique
Vite	Placer dans le répertoire `public/`
Nuxt	Placer dans `public/` ou `assets/`
Create React App	Placer dans le répertoire `public/`

Configuration des icônes PWA

PWA nécessite des déclarations d'icônes dans manifest.json :

{
  "name": "My App",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Notes sur les icônes maskable

Les icônes maskable PWA doivent avoir tout le contenu dans la zone de sécurité (80% intérieur). Les 20% extérieurs peuvent être rognés par le système en cercle ou autre forme.

Conseils de design

Conseil 1 : Simplifier le graphique

Un favicon ne fait que 16×16 pixels — les designs complexes deviennent un brouillard flou. Ne gardez que l'élément central :

❌ Logo complet + texte
✅ Graphique central ou première lettre

Conseil 2 : Utiliser SVG comme source

Les images sources vectorielles SVG restent nettes à toute taille. Convertissez le SVG en PNG avec Conversion de format avant de générer l'ICO.

Conseil 3 : Support du mode sombre

Les navigateurs modernes supportent l'attribut media pour les favicons en mode sombre :

<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)">

Problèmes courants

L'ICO généré ne s'affiche pas dans le navigateur ?

Vérifiez que le chemin du fichier est correct
Videz le cache du navigateur (Ctrl+Maj+R pour forcer le rafraîchissement)
Vérifiez que les balises link sont dans <head>

Le fichier ICO est plus volumineux qu'un seul PNG ?

L'ICO contient plusieurs tailles, il est donc naturellement plus volumineux. Un ICO typique 16+32+48 pèse environ 15-30 Ko — tout à fait acceptable.

Ai-je besoin à la fois de ICO et de PNG ?

Oui, fournissez les deux. L'ICO supporte les anciens navigateurs ; le PNG offre une meilleure qualité de rendu dans les navigateurs modernes.

Outils associés

Générateur ICO — ICO multi-taille + PNG en un clic
Redimensionner l'image — Ajuster l'image source à la taille cible
Conversion de format — SVG vers PNG et autres conversions de format

Résumé

Les favicons peuvent être petits, mais ils constituent un élément crucial de l'image de marque d'un site web. Le Générateur ICO vous permet de produire rapidement un ensemble complet de fichiers ICO et PNG à partir d'une seule image source, couvrant les onglets du navigateur, les Apple Touch Icons, Android Chrome et les icônes de lancement PWA. Rappelez-vous : image source simple et haute résolution, ICO multi-taille et références HTML complètes.