Comment créer un favicon
Créer un favicon est un travail de deux minutes avec le bon outil. Commencez à partir d’une image source carrée – au moins 512 × 512 pixels – exécutez-la via le favicon generator et obtenez un package complet : .ico multi-tailles, SVG, apple-touch-icon et manifestes PNG. Ce guide parcourt chaque étape, de la préparation de la source à la vérification du navigateur. Pour une référence approfondie, consultez également le full tutorial.
Une favicon est la petite icône qu'un navigateur affiche dans la barre d'onglets, la barre d'adresse et la liste de favoris. Sur mobile, il devient l'icône de l'écran d'accueil lorsqu'un utilisateur enregistre votre site. Sur Windows, il apparaît sur les épingles de la barre des tâches et les raccourcis du bureau. Obtenir le bon favicon est un petit effort avec un impact de marque démesuré : chaque page vue commence par votre icône placée dans l'onglet de l'utilisateur.
La configuration moderne des favicon n'est pas un fichier unique, c'est un ensemble coordonné. Un .ico multi-taille gère la solution de secours universelle du navigateur. Un SVG offre un rendu évolutif net sur les navigateurs modernes, y compris la prise en charge du mode sombre. Un PNG (apple-touch-icon) 180 × 180 est ce que iOS utilise pour les installations sur l'écran d'accueil. Un PNG 192 × 192 et un 512 × 512 alimentent l'invite d'installation Android PWA. Une image source bien préparée génère tout cela en même temps.
La préparation de l’image source est l’étape la plus négligée. Votre logo doit être carré : un recadrage asymétrique produit toujours un résultat étiré. Concevez une version simplifiée de votre marque qui se lit clairement dans de petites tailles : réduisez les lignes fines, supprimez les petits textes et augmentez le contraste. Ce qui semble élégant en 512×512 peut devenir une goutte illisible en 16×16 si vous sautez cette étape de simplification.
SVG est le format source idéal car il est indépendant de la résolution. Un graphique vectoriel est rastérisé à n'importe quelle densité de pixels sans perte de qualité. Si vous ne disposez que d'un raster PNG ou JPG, assurez-vous qu'il mesure au moins 512 × 512 avant de le générer. La réduction à partir de quelque chose de plus petit introduit un flou qui s'aggrave à chaque étape de redimensionnement et entraîne une icône d'onglet floue.
Le format .ico est un conteneur, pas une seule image. Il contient plusieurs images raster – généralement 16 × 16, 32 × 32, 48 × 48 et 64 × 64 – dans un seul fichier. Le navigateur analyse le répertoire ICO et restitue uniquement l'image qui correspond le mieux à la densité d'affichage dont il a besoin. Cette approche à fichier unique signifie que vous n'avez pas besoin de balises de lien distinctes pour chaque résolution : une balise couvre toutes les tailles d'onglets.
Téléchargez votre image source sur le favicon generator. L'outil traite tout localement dans votre navigateur : votre image ne quitte jamais votre appareil. En quelques secondes, il produit un package de téléchargement contenant favicon.ico, favicon.svg, apple-touch-icon.png (180 × 180), android-chrome-192x192.png, android-chrome-512x512.png et site.webmanifest, ainsi que des balises de lien HTML prêtes à être collées.
Placer les fichiers est simple. Déposez tous les fichiers générés dans le répertoire racine public de votre site – le même dossier qui sert votre index.html. Pour les projets d'application Vite et Create React, il s'agit du dossier /public. Pour les projets Next.js App Router, placez favicon.ico dans /app et les fichiers PNG dans /public. Pour les sites statiques, déposez tout à côté de vos fichiers HTML.
Les balises de lien HTML indiquent aux navigateurs quel fichier utiliser pour chaque contexte. Le minimum est d'une ligne : `<link rel='icon' href='/favicon.ico'>`. L’ensemble complet recommandé ajoute trois lignes supplémentaires : une pour la variante SVG, une pour le apple-touch-icon et une pour le manifeste Web. Collez l'extrait généré dans votre élément `<head>`. L'ordre des balises n'a pas d'importance tant qu'elles précèdent « </head> ».
La mise en cache du navigateur est la principale cause de confusion lorsqu'un favicon ne semble pas se mettre à jour. Les navigateurs mettent en cache /favicon.ico par origine et peuvent ne pas respecter les en-têtes de contrôle de cache standard comme ils le font pour d'autres actifs. Si votre ancienne icône persiste, ouvrez une nouvelle fenêtre de navigation privée ou ajoutez une chaîne de requête de contournement du cache telle que `?v=2` au href de votre balise de lien pour forcer les navigateurs à récupérer le fichier mis à jour.
Les erreurs courantes incluent le téléchargement d'une image non carrée (produit des icônes étirées), l'utilisation d'une source inférieure à 256 × 256 pixels (flou sur des tailles d'affichage plus grandes) et l'omission du apple-touch-icon (les installations de l'écran d'accueil iOS affichent une capture d'écran de la page à la place). Ces trois problèmes sont résolus en partant d'une source carrée 512 × 512 PNG ou SVG et en laissant le générateur gérer toutes les tailles de sortie.
La prise en charge du mode sombre mérite d’être intégrée dès le départ. De nombreux navigateurs affichent la barre d'onglets en chrome foncé lorsque le système de l'utilisateur est en mode sombre. Si votre icône est une marque sombre sur un fond transparent, elle peut disparaître dans un onglet sombre. Expédiez un favicon SVG avec un bloc de style `@media (prefers-color-scheme: dark)` intégré qui change la couleur de remplissage — aucune balise HTML supplémentaire n'est requise, juste un fichier SVG mis à jour.
Vérifiez votre favicon à l'aide du live favicon tester après le déploiement. Le testeur simule les contextes d'onglet du navigateur, de signet et d'invite d'installation et montre le rendu de votre icône à 16, 32, 48, 128 et 512 pixels côte à côte. Vérifiez également manuellement un onglet épinglé dans Chrome et Safari, et utilisez « Ajouter à l'écran d'accueil » sur iOS pour confirmer le apple-touch-icon.
Pour des procédures pas à pas spécifiques à la plate-forme, reportez-vous à favicon for WordPress, favicon for Shopify, favicon for React et favicon for Next.js. L'ensemble de fichiers générés est identique sur toutes les plates-formes : ce qui varie, c'est l'endroit où vous téléchargez les fichiers et la manière dont la plate-forme injecte ou remplace les balises de lien HTML.
Revisitez votre favicon chaque fois que vous changez de nom. Les favicons mis en cache persistent dans les favoris et les écrans d'accueil des mobiles longtemps après la mise en ligne d'une refonte du site. La mise à jour de la chaîne de version dans votre balise de lien href oblige les navigateurs à récupérer le nouveau fichier lors de la prochaine visite, remplaçant progressivement l'ancienne icône dans tous les emplacements mis en cache. Consultez le guide best favicon format pour une répartition format par format des compromis en matière de taille de fichier et de compatibilité.
Comment ça marche
- 1
Préparer une image source carrée
Exportez votre logo ou icône au format PNG 512×512 avec un fond transparent, ou au format SVG avec un carré viewBox (par exemple, `viewBox='0 0 512 512'`). Simplifiez les détails fins qui seront invisibles en 16×16.
- 2
Générez votre package favicon
Téléchargez la source sur le [favicon generator](tool:favicon-generator). L'outil produit favicon.ico (multi-tailles 16/32/48/64), favicon.svg, apple-touch-icon.png (180 × 180), android-chrome-192x192.png, android-chrome-512x512.png et site.webmanifest, le tout en un seul passage.
- 3
Copiez tous les fichiers à la racine de votre site
Placez chaque fichier du zip de téléchargement dans la racine publique de votre projet – le répertoire qui sert index.html. Pour Next.js App Router, favicon.ico entre dans /app ; les PNG vont dans /public.
- 4
Collez les balises de lien HTML dans <head>
Copiez l'extrait HTML généré et ajoutez-le dans votre élément « <head> ». L'ensemble complet couvre la solution de secours .ico, la variante SVG, apple-touch-icon et le lien manifeste – six lignes au total.
- 5
Vérifier sur tous les navigateurs et appareils
Ouvrez votre site en Chrome, Safari, Firefox et Edge. Inspectez l’onglet, la barre de favoris et la barre d’adresse. Sur iOS, appuyez sur la feuille Partager et sur « Ajouter à l'écran d'accueil » pour tester le apple-touch-icon. Utilisez le [favicon tester](utility:favicon-tester) pour une simulation rapide.
- 6
Cache-bust lors de la mise à jour d'un favicon existant
Si vous remplacez un favicon en direct, incrémentez la chaîne de version dans votre balise de lien href (`?v=2`, `?v=3`, etc.). Cela oblige tous les navigateurs à récupérer le fichier mis à jour lors du prochain chargement de la page plutôt que de diffuser la version mise en cache.
Essayez maintenant
Créez votre favicon maintenant
Générateur de FaviconFAQ
Quelle est la manière la plus simple de créer un favicon ?+
Téléchargez un PNG ou SVG carré de 512 × 512 sur le générateur FetchFavicon. Il produit tous les fichiers requis – .ico, SVG, apple-touch-icon, manifeste PNG – ainsi que HTML prêts à coller en moins d'une seconde, sans inscription ni téléchargement sur le serveur.
Quelle doit être la taille de mon image source ?+
Au moins 512×512 pixels, idéalement comme un SVG. Réduire la taille risque de créer un flou visible à la taille 256 × 256 utilisée par Windows et à la taille 512 × 512 requise pour les invites d'installation de PWA. La mise à l’échelle d’une petite image aggrave la perte de qualité à chaque étape de redimensionnement.
Ai-je besoin d’un apple-touch-icon ?+
Oui, si des visiteurs utilisent un iPhone ou un iPad. Sans cela, les installations sur l'écran d'accueil iOS affichent une vignette de capture d'écran de mauvaise qualité de votre page au lieu de votre marque. Un PNG 180×180 lié à `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>` est tout ce dont vous avez besoin.
Pourquoi mon favicon ne s'affiche-t-il pas dans l'onglet du navigateur ?+
Il s'agit le plus souvent d'un problème de mise en cache. Ouvrez une fenêtre privée/incognito et accédez à votre site. S'il n'apparaît toujours pas, vérifiez que favicon.ico est servi à la racine de votre domaine et que le chemin href de la balise de lien se résout correctement - vérifiez les fautes de frappe et les barres obliques manquantes.
Ai-je besoin à la fois de .ico et de SVG ?+
Oui, pour une couverture complète. Le .ico gère les navigateurs existants, les raccourcis Windows et les outils tiers qui récupèrent directement /favicon.ico. Le SVG gère un rendu net sur Chrome, Firefox, Edge et Safari 15+ et prend en charge la commutation de couleurs en mode sombre. La taille du fichier combiné est généralement inférieure à 30 Ko.
Combien de temps faut-il pour qu'un changement de favicon se propage ?+
De quelques secondes à plusieurs jours, selon l'agressivité avec laquelle le navigateur a mis en cache l'original. La solution la plus rapide consiste à ajouter une nouvelle chaîne de requête (`?v=2`) à votre favicon href. Cela oblige les navigateurs à le traiter comme une nouvelle URL et à en récupérer immédiatement une nouvelle copie.
Puis-je utiliser un fichier JPEG comme source de favicon ?+
Vous pouvez télécharger un JPEG sur le générateur, mais les JPEG ne prennent pas en charge la transparence. Si votre icône a besoin d'un arrière-plan transparent (qui s'affiche mieux dans les onglets du navigateur), commencez plutôt par un PNG-32 ou un SVG. Le générateur convertira correctement en .ico et PNG.