Générateur de Favicon

Qu'est-ce qu'un favicon ?

Un favicon (favorite icon) est la petite icône qui apparaît dans l'onglet d'un navigateur, dans les favoris et parfois sur l'écran d'accueil mobile. C'est un élément essentiel de l'identité visuelle d'un site web : un bon favicon améliore la reconnaissance, la professionnalité et l'engagement utilisateur.

Les favicons modernes existent en plusieurs formats et tailles pour s'adapter à tous les contextes : 16x16 et 32x32 pour les navigateurs, 180x180 pour les appareils Apple, 192x192 et 512x512 pour Android, plus des formats SVG vectoriels. Cet outil génère toutes les tailles nécessaires à partir d'une seule image source.

Où apparaissent les favicons

Les favicons apparaissent à plus d'endroits que la plupart des gens ne le réalisent. L'emplacement le plus familier est l'onglet du navigateur — chaque page ouverte affiche son favicon à gauche du titre de la page, vous permettant d'identifier un onglet en un coup d'œil lorsque vous en avez des dizaines ouverts. Ils apparaissent également dans la barre de favoris et le gestionnaire de favoris du navigateur, dans votre liste d'historique, et dans la barre d'adresse de certains navigateurs lorsque vous commencez à saisir une URL.

Sur les appareils mobiles, lorsqu'un visiteur appuie sur « Ajouter à l'écran d'accueil » dans Safari ou Chrome, le système d'exploitation utilise l'apple-touch-icon (180×180 sur iOS) ou l'icône du manifeste PWA (192×192 sur Android) comme raccourci applicatif sur l'écran d'accueil de l'appareil. Sur ordinateur, les applications web progressives installées via Chrome ou Edge apparaissent dans la barre des tâches système et le menu Démarrer de Windows en utilisant l'icône 512×512 du manifeste. Les moteurs de recherche, dont Google, affichent parfois le favicon d'un site dans les résultats de recherche à côté de l'URL de la page, faisant d'une icône soignée un élément de votre image de marque avant même que les utilisateurs ne cliquent.

Comment utiliser cet outil

Téléversez une image carrée (PNG, SVG ou JPG) d'au moins 512x512 pixels. L'outil génère automatiquement toutes les tailles standard et le fichier site.webmanifest. Téléchargez le ZIP contenant tous les favicons et le code HTML à insérer dans la balise head de votre site.

Les formats de favicon expliqués

Les navigateurs et systèmes d'exploitation modernes nécessitent plusieurs formats de favicon différents. Chaque format sert un contexte spécifique, et en omettre un signifie que certains appareils ou navigateurs afficheront une icône générique vide à la place.

• favicon.ico — Le format de favicon d'origine. Un fichier ICO est un conteneur pouvant intégrer plusieurs tailles d'image (généralement 16×16, 32×32 et 48×48) dans un seul fichier. Placez-le dans le répertoire racine de votre site sous la forme /favicon.ico. Les navigateurs récupèrent ce chemin automatiquement, même sans balise <link>, assurant la compatibilité avec les anciens navigateurs et les lecteurs de flux.
• Favicons PNG (32×32) — Les navigateurs modernes préfèrent le PNG. Un PNG de 32×32 est le favicon standard polyvalent utilisé pour les onglets du navigateur sur les écrans haute densité. Déclarez-le avec : <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
• apple-touch-icon (180×180) — Les appareils Apple l'utilisent lorsqu'un visiteur enregistre votre site sur l'écran d'accueil iOS ou iPadOS. Sans lui, iOS capture une capture d'écran de votre page à la place. Déclarez-le avec : <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">. N'utilisez pas de fond transparent ici — Apple compose l'icône sur un carré blanc, ce qui rend les zones transparentes disgracieuses.
• Icônes du manifeste PWA (192×192 et 512×512) — Les applications web progressives déclarent leurs icônes dans un fichier manifeste JSON. L'icône de 192×192 est utilisée pour les raccourcis sur l'écran d'accueil Android, et celle de 512×512 est utilisée pour l'écran de chargement affiché pendant le démarrage de l'application. Référencez le manifeste avec : <link rel="manifest" href="/site.webmanifest">
• Favicon SVG — Les navigateurs modernes (Chrome 80+, Firefox 41+ et Safari 16+) prennent en charge un favicon SVG déclaré avec : <link rel="icon" type="image/svg+xml" href="/favicon.svg">. Les favicons SVG sont indépendants de la résolution et peuvent inclure une requête média prefers-color-scheme à l'intérieur du SVG pour basculer automatiquement entre une version claire et sombre. Placez la balise SVG avant le fallback PNG afin que les navigateurs compatibles utilisent le vecteur, tandis que les navigateurs plus anciens basculent sur le PNG.

Les balises HTML link dont vous avez besoin

Copiez ces balises dans la section <head> de chaque page de votre site. L'ordre a une légère importance — placez le SVG en premier, puis le PNG, puis l'ICO. Les navigateurs choisissent le premier format qu'ils prennent en charge.

Votre fichier site.webmanifest doit inclure au minimum un name, un short_name, un tableau icons (avec des entrées 192×192 et 512×512), un theme_color, un background_color et un mode d'affichage défini sur standalone pour les PWA installables.

Tailles de favicon requises

• 16x16 — icône de l'onglet du navigateur (la taille classique du favicon).
• 32x32 — raccourci de la barre des tâches, onglets de navigateur haute densité.
• 180x180 — Apple Touch Icon pour l'écran d'accueil iOS.
• 192x192 et 512x512 — écran d'accueil et écran de démarrage Android (manifeste PWA).

Conseils pour concevoir un favicon

Les favicons doivent rester reconnaissables à très petite taille. Utilisez des formes audacieuses, une géométrie simple et un fort contraste. Le texte fonctionne rarement en dessous de 32x32. Une seule lettre ou un symbole abstrait de votre marque est le plus efficace. Testez votre favicon à sa taille d'affichage réelle (16x16) — des détails qui rendent bien en 512x512 deviennent des points invisibles à la taille d'un favicon. Utilisez un fond transparent pour les favicons PNG.

Utilisez un contraste élevé

Les favicons sont affichés sur le chrome du navigateur, qui varie du gris clair au quasi-noir selon le thème système de l'utilisateur. Un design qui semble net sur fond blanc peut disparaître sur une barre d'onglets sombre. Visez un rapport de contraste d'au moins 4,5:1 entre le premier plan et l'arrière-plan de l'icône. Une icône sombre sur fond vif, ou une icône claire sur fond sombre, fonctionnent toutes deux très bien.

Concevez pour la reconnaissance par silhouette

À 16×16 pixels, votre icône ne représente que 256 pixels au total. Le cerveau lit les favicons davantage par la forme que par le détail. Une silhouette distinctive — une seule lettre, un signe géométrique, un symbole reconnaissable — fonctionne bien mieux qu'une illustration détaillée. Les logos qui épellent le nom complet d'une entreprise sont presque illisibles à la taille d'un favicon. Isolez l'élément le plus reconnaissable de votre identité visuelle et centrez-le avec des marges généreuses pour éviter qu'il ne soit rogné.

Erreurs courantes avec les favicons

• Ne fournir qu'un PNG de 16×16 — il apparaît flou sur les écrans Retina et haute densité. Incluez toujours au moins un PNG de 32×32.
• Oublier l'apple-touch-icon — iOS composera une capture d'écran à la place, produisant une version illisible et miniaturisée de votre page complète.
• Fond transparent sur l'apple-touch-icon — Apple rend les zones transparentes en noir, ruinant le design. Utilisez une couleur de fond unie pour l'icône 180×180.
• Utiliser un logo trop chargé et détaillé — les détails fins disparaissent en dessous de 64×64 pixels. Réduisez le design à son signe essentiel.
• Ne pas ajouter un invalidateur de cache après une mise à jour — les navigateurs mettent les favicons en cache de manière agressive. Ajoutez une chaîne de requête de version (?v=2) au href pour forcer les navigateurs à récupérer le nouveau fichier.

Génération côté client et confidentialité

Ce générateur de favicon fonctionne entièrement dans votre navigateur grâce à l'API Canvas HTML. Le texte, les couleurs et les paramètres de rayon d'angle que vous saisissez ne sont jamais envoyés à un serveur. Votre design reste sur votre appareil, et vous téléchargez les fichiers générés directement sur votre ordinateur. Cela signifie que l'outil fonctionne hors ligne une fois la page chargée, et aucun compte ni inscription n'est requis.

Questions fréquentes

Où placer les fichiers favicon ?

Placez-les à la racine du site (par exemple https://exemple.com/favicon.ico). Les navigateurs cherchent automatiquement /favicon.ico, mais déclarez aussi les autres tailles dans le head avec les balises link rel='icon' appropriées.

Pourquoi mon favicon ne s'affiche-t-il pas ?

Causes courantes : cache navigateur (essayez Ctrl+F5 ou navigation privée), chemin incorrect dans le HTML, fichier corrompu ou format non supporté. Vérifiez aussi que votre serveur web sert le bon MIME type (image/x-icon pour .ico).

Ai-je encore besoin d'un fichier favicon.ico ?

Oui, pour l'instant. Certains anciens navigateurs, clients de messagerie, lecteurs RSS et robots d'exploration recherchent encore /favicon.ico à la racine de votre domaine sans lire aucune balise HTML link. Conserver un favicon.ico de 32×32 dans votre répertoire racine n'occupe qu'un espace négligeable et couvre ces cas particuliers. Les navigateurs modernes préféreront les versions SVG ou PNG déclarées dans vos balises <link> au lieu du fallback ICO.

Puis-je utiliser un emoji comme favicon ?

Oui — avec les favicons SVG. Vous pouvez déclarer un SVG inline contenant un élément texte avec un caractère emoji, et les navigateurs modernes le rendent parfaitement à n'importe quelle résolution. L'approche SVG prend également en charge le mode sombre : encapsulez différents remplissages dans une requête média prefers-color-scheme à l'intérieur du fichier SVG. Ce générateur vous permet de saisir n'importe quel emoji ou caractère dans le champ texte et de l'exporter en favicon SVG prêt à l'emploi.