Générateur de favicon : Guide complet des icônes de navigateur

Créez des favicons qui fonctionnent partout — onglets de navigateur, favoris, écrans d'accueil et lanceurs PWA.

5 min de lecture Image · HTML · PWA 6 sections + FAQ

Le favicon est le premier élément de marque que les utilisateurs voient dans un onglet de navigateur. Un favicon manquant ou flou signale un site inachevé — mais bien faire les favicons en 2025 signifie générer plusieurs tailles et formats.

L'implémentation moderne des favicons va au-delà d'un seul fichier ICO 16×16. Vous avez besoin de PNG pour les navigateurs standard, SVG pour le rendu vectoriel, et Apple touch icons pour iOS.

Qu'est-ce qu'un favicon

Un favicon (abréviation de "favorites icon") est une petite image affichée par les navigateurs dans les onglets, les favoris et les listes d'historique. Le nom vient de la fonctionnalité "Favoris" d'Internet Explorer en 1999. Aujourd'hui les favicons apparaissent dans de nombreux contextes : onglets de navigateur, barres d'adresse, favoris et comme icônes d'écran d'accueil sur les appareils mobiles.

Outil gratuit Générateur de favicon Générez des favicons dans toutes les tailles requises depuis nimporte quelle image

Tailles requises en 2025

L'ensemble moderne de favicons comprend : PNG 16×16 et 32×32 pour les onglets de navigateur ; PNG 48×48 pour la barre des tâches Windows ; PNG 180×180 pour l'Apple touch icon (écran d'accueil iOS) ; PNG 192×192 et 512×512 pour Android/PWA ; un favicon SVG pour les navigateurs modernes ; et un fichier ICO pour la compatibilité avec les navigateurs legacy.

ICO vs PNG vs SVG favicon

Le format ICO est un conteneur pouvant contenir plusieurs tailles d'image dans un seul fichier — historiquement le standard, mais de plus en plus remplacé par PNG. Les favicons PNG sont largement supportés et offrent la transparence. Les favicons SVG sont supportés par Chrome, Firefox et Edge modernes — ils s'adaptent parfaitement à toute taille et peuvent s'adapter au mode sombre via des media queries CSS.

Outil gratuit Convertisseur SVG vers PNG Convertissez des fichiers SVG en PNG à nimporte quelle résolution

Balises HTML link pour favicon

Placez les balises link de favicon dans le head de votre HTML. La configuration minimale moderne : une balise rel="icon" pointant vers votre SVG ou PNG, une balise rel="apple-touch-icon" pour iOS, et une balise rel="manifest" pour PWA. Le fichier ICO à la racine (/favicon.ico) est automatiquement récupéré par les navigateurs.

Apple touch icon et icônes PWA

Quand les utilisateurs ajoutent votre site à leur écran d'accueil iOS, Safari utilise l'apple-touch-icon. La taille préférée est 180×180 pixels. Pour Android et les Progressive Web Apps, spécifiez les icônes dans votre fichier manifest.json avec au moins des versions PNG 192×192 et 512×512.

Conseils de design pour petites icônes

Les favicons doivent être lisibles à 16×16 pixels — évitez les illustrations complexes. Utilisez une seule lettre en gras ou une forme géométrique simple. Assurez un contraste élevé entre l'icône et le chrome du navigateur. Évitez les traits fins qui disparaissent aux petites tailles.

Outil gratuit Encodeur image vers Base64 Intégrez des images comme chaînes Base64 dans HTML et CSS

Questions fréquentes

Quelle est la taille minimale d'un favicon ? +
Le minimum est 16×16 pixels. Cependant, les configurations modernes nécessitent plusieurs tailles : 32×32 pour les écrans haute DPI, 180×180 pour iOS et 192×192 pour PWA.
Puis-je utiliser un seul fichier favicon ? +
Vous pouvez utiliser un seul favicon SVG pour les navigateurs modernes, mais pour une compatibilité complète vous avez besoin d'un fichier ICO et de fichiers PNG pour les appareils Apple.
Le favicon affecte-t-il le SEO ? +
Directement non — Google n'utilise pas les favicons comme facteur de classement. Indirectement, un favicon professionnel améliore la reconnaissance de marque.
Comment implémenter le support du mode sombre dans mon favicon ? +
Les favicons SVG supportent le mode sombre via des media queries CSS à l'intérieur du fichier SVG. Utilisez une media query prefers-color-scheme pour basculer entre variantes claires et sombres.
Pourquoi mon favicon ne se met pas à jour après le déploiement ? +
Les favicons sont mis en cache de manière agressive par les navigateurs. Pour forcer une mise à jour, renommez le fichier favicon et mettez à jour la balise link HTML.
Qu'est-ce qu'une icône de manifeste d'application web ? +
Les icônes de manifeste d'application web sont définies dans le fichier manifest.json de votre site et utilisées quand les utilisateurs installent votre PWA sur leur écran d'accueil.
Mon favicon doit-il avoir un fond transparent ? +
Cela dépend du thème du navigateur. Les favicons transparents ont l'air bien dans les navigateurs à thème sombre mais peuvent être invisibles sur les fonds clairs.