Le favicon est la petite icône affichée dans les onglets, les favoris et les raccourcis d'écran d'accueil. Pour bien faire, il faut générer plusieurs tailles et les déclarer correctement dans le HTML – simple une fois les exigences connues.
Qu'est-ce qu'un favicon ?
« Favicon » vient de « favorites icon ». C'était à l'origine une icône de 16×16 pixels pour les favoris d'Internet Explorer. Les navigateurs et appareils modernes demandent de nombreuses tailles :
| Fichier | Taille | Usage |
|------|------|----------|
| favicon.ico | 16×16, 32×32 | Onglets, barre des tâches Windows |
| favicon-16x16.png | 16×16 | Petites icônes d'onglet |
| favicon-32x32.png | 32×32 | Onglets standard |
| apple-touch-icon.png | 180×180 | Raccourci sur l'écran d'accueil iOS |
| android-chrome-192x192.png | 192×192 | Écran d'accueil Android |
| android-chrome-512x512.png | 512×512 | Écran de démarrage Android, PWA |
Générer toutes les tailles avec ZapFile
- Ouvrez le générateur de favicon de ZapFile
- Importez une image carrée (PNG recommandé, au moins 512×512 pixels)
- Générez les tailles
- Téléchargez le ZIP contenant toutes les tailles et le fichier
.ico
Ajouter les favicons à votre site
Ajoutez ces balises dans la section de votre HTML :
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Pour les applications web progressives (PWA), ajoutez aussi un fichier site.webmanifest :
{
"name": "Your App",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}Concevoir un bon favicon
Rester simple
À 16×16 pixels, un logo complexe devient illisible. Utilisez l'initiale de votre marque, une icône simplifiée ou un aplat de couleur.Contraste élevé
Le favicon s'affiche sur des interfaces claires et sombres. Testez les deux. Un fond uni à la couleur de votre marque avec un symbole blanc fonctionne dans les deux modes.Partir de 512×512
Générez depuis la source la plus haute résolution. ZapFile réduit proprement depuis 512 px, alors qu'agrandir depuis 16 px donne un résultat flou.Favicons SVG (navigateurs modernes)
Les navigateurs basés sur Chromium prennent en charge les favicons SVG, parfaits à toutes les tailles. Ajoutez-le en plus de vos PNG/ICO :<link rel="icon" type="image/svg+xml" href="/favicon.svg">Erreurs fréquentes
- Image source en basse résolution : partez toujours de 512 px ou plus
- Fournir uniquement le
.ico: les appareils modernes ont besoin des tailles PNG ; seul, l'ICO prive iOS et Android d'une vraie icône - Oublier le cache : après une mise à jour, les navigateurs gardent l'ancien favicon en cache. Ajoutez un paramètre de version (
favicon.ico?v=2) pendant le développement
En résumé
- Les favicons demandent plusieurs tailles pour les navigateurs, iOS, Android et les PWA
- Partez d'un PNG carré de 512×512 et générez toutes les tailles d'un coup
- Le générateur de favicon de ZapFile produit toutes les tailles nécessaires et le fichier ICO en quelques secondes