Qu'est-ce qu'un favicon ?
Un favicon (favorite icon) est la petite icône qui apparaît dans les onglets du navigateur, les favoris, l'historique et les raccourcis du bureau. C'est l'un des premiers éléments visuels que les visiteurs remarquent sur votre site. Un favicon manquant signale un site non professionnel ou inachevé.
Les favicons ont évolué des simples icônes 16x16 pixels vers un ensemble complexe de tailles nécessaires pour différents appareils et contextes. Les sites modernes ont besoin de plusieurs formats de favicon pour couvrir tous les cas d'usage.
Le format ICO pour les favicons
ICO est le format favicon d'origine et reste le plus universellement pris en charge. Un seul fichier ICO (favicon.ico) contient plusieurs images à différentes tailles (16x16, 32x32, 48x48, etc.), permettant aux navigateurs et systèmes d'exploitation de sélectionner automatiquement la taille la plus appropriée.
Lorsqu'un navigateur demande /favicon.ico, il reçoit un seul fichier contenant toutes les tailles nécessaires. Aucun balisage HTML supplémentaire n'est requis — les navigateurs recherchent automatiquement favicon.ico dans le répertoire racine.
Exigences modernes des favicons (2026)
| Fichier | Taille | Utilité |
|---|---|---|
| favicon.ico | 16x16 + 32x32 | Anciens navigateurs, raccourcis Windows |
| apple-touch-icon.png | 180x180 | Marque-page écran d'accueil iOS |
| icon-192.png | 192x192 | Chrome Android, manifest PWA |
| icon-512.png | 512x512 | Splash screen PWA, boîte de dialogue d'installation |
| favicon.svg | Vectoriel | Navigateurs modernes, mise à l'échelle infinie, mode sombre |
Comment créer un favicon depuis un PNG
- Commencez avec une image carrée — au moins 512x512 pixels. Utilisez votre logo ou une version simplifiée.
- Utilisez du PNG avec transparence — un fond transparent garantit que votre favicon reste propre quel que soit le thème du navigateur (clair ou sombre).
- Téléversez-la dans le convertisseur PNG vers ICO — il crée un seul favicon.ico contenant six tailles : 256, 128, 64, 48, 32 et 16 pixels.
- Testez aux petites tailles — visualisez votre favicon en 16x16. Les designs complexes peuvent nécessiter une simplification pour les très petites tailles.
Transparence dans les favicons
Source PNG = favicon transparent. Si votre image source a un fond transparent, l'ICO le préservera. C'est important pour les favicons qui doivent s'afficher correctement sur les thèmes de navigateur clairs comme sombres.
Source JPG = fond opaque. JPG ne prend pas en charge la transparence, donc un favicon issu d'un JPG aura toujours une couleur de fond opaque. Utilisez PNG autant que possible. Si votre logo n'existe qu'en JPG, découvrez comment rendre transparent le fond d'un JPG avant de créer le favicon.
Bonnes pratiques
- Restez simple : les favicons s'affichent en 16x16 pixels. Les logos complexes deviennent illisibles. Utilisez une marque simplifiée ou une seule lettre.
- Testez à la taille réelle : visualisez votre favicon dans un onglet de navigateur avant le déploiement. Ce qui est superbe en 512x512 peut être méconnaissable en 16x16.
- Assurez le contraste : testez sur des thèmes de navigateur clairs et sombres. Votre favicon doit être visible sur tout arrière-plan.
- Utilisez une source vectorielle : si vous avez une version SVG de votre logo, elle produira des résultats plus nets à toutes les tailles.
Implémentation HTML
Ajoutez ces lignes à la balise <head> de votre HTML pour une prise en charge complète des favicons :
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Démarrage rapide : au minimum, placez un favicon.ico (avec les tailles 16x16 et 32x32) dans le répertoire racine de votre site. Les navigateurs le trouvent automatiquement sans aucun balisage HTML.
ICO vs PNG vs SVG : quel format de favicon utiliser
| Format | Compatibilité | Usage |
|---|---|---|
| favicon.ico | Tous les navigateurs, même anciens ; trouvé à l'adresse /favicon.ico sans aucun HTML | La solution de repli que tout site devrait avoir |
| PNG | Tous les navigateurs modernes via <link rel="icon" type="image/png"> |
apple-touch-icon (180×180) et icônes du manifeste d'application web (192 et 512) |
| SVG | Chrome, Edge et Firefox ; les anciennes versions de Safari l'ignorent | Une icône nette à toutes les tailles, avec des couleurs adaptées au mode sombre via CSS |
Un ensemble minimal courant comprend favicon.ico, icon.svg, apple-touch-icon.png et les deux PNG du manifeste. Renoncez au SVG si votre logo comporte des détails fins qui deviennent illisibles à 16 px ; dessinez plutôt une icône simplifiée.