Comment créer un favicon
Un favicon moderne ne se résume plus à une simple image 16×16. Ce guide détaille la procédure complète : préparation de la source, génération multi-tailles, balises HTML, exemples concrets et dépannage.
Qu'est-ce qu'un favicon ?
Un favicon est la petite icône que les navigateurs affichent dans les onglets, les barres de favoris, les listes d'historique et les barres d'adresse. Sur les téléphones, cela devient l'icône de l'écran d'accueil lorsque quelqu'un enregistre votre site. Sur Windows, il apparaît sur les épingles de la barre des tâches et les raccourcis du bureau. Utilisez notre [générateur favicon] (outil : favicon-generator), [convertisseur PNG en ICO] (outil : png-to-ico), [convertisseur SVG en ICO] (outil : svg-to-ico) et [testeur favicon en direct] (utilitaire : favicon-tester) pour créer et vérifier votre jeu d'icônes, et lisez le compagnon guide pour une procédure pas à pas condensée.
Le mot vient de l’icône des favoris, mais le travail s’est étendu bien au-delà d’un simple GIF 16×16. Le favicon d'aujourd'hui est une petite famille d'actifs : un favicon.ico au niveau racine, des variantes optionnelles SVG et PNG, une icône Apple-Touch pour iOS et des icônes de manifeste pour les PWA installables.
Les utilisateurs commentent rarement un bon favicon, mais ils en remarquent instantanément un manquant ou un flou. Une icône nette signale la finition et rend votre onglet identifiable parmi vingt pages ouvertes.
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
Préparez votre image source
Partez d’une image carrée d’au moins 512×512 pixels. SVG avec un carré viewBox est idéal car il s'adapte proprement à chaque taille de raster que vous exporterez.
Évitez les traits fins, la typographie fine et les dégradés complexes. À 16 × 16, les détails capillaires se fondent dans une bouillie grise. Simplifiez le marquage : moins de formes, un contraste plus élevé, plus de remplissage autour du glyphe.
Si votre logo est horizontal, créez un recadrage carré qui centre le symbole sans le mot-symbole. Les formes de lettres inférieures à 8 px de hauteur survivent rarement à la réduction d'échelle.
Exportez PNG-32 avec transparence lorsque le raster est votre seule option. Un fond blanc intégré n’aura pas l’air correct dans le chrome sombre du navigateur et sur les lanceurs mobiles teintés.
Générer un .ico multi-tailles
Regroupez des images de 16, 32, 48, 64, 128 et 256 pixels dans un seul fichier favicon.ico. Les navigateurs et Windows lisent l'en-tête du répertoire et décodent uniquement la taille dont ils ont besoin.
Placez favicon.ico à la racine de votre site (/favicon.ico). Même si vous déclarez des balises <link> modernes, les robots d'exploration et les clients plus anciens sondent toujours ce chemin par convention.
Notre générateur favicon pixellise toutes les tailles côté client en moins d'une seconde. Votre image source ne quitte jamais le navigateur, ce qui est important lorsque la marque est un logo de produit inédit.
Ajoutez les balises HTML
Déposez ces balises dans <head> pour une configuration 2026 complète :
<link rel="icon" href="/favicon.ico" tailles="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
La ligne SVG donne des onglets précis sur Chromium et Firefox. La gamme .ico couvre les solutions de secours Safari, les raccourcis Windows et les lecteurs RSS qui ignorent SVG.
Exemples concrets
Site de marketing statique : téléchargez un PNG 512 × 512 de votre logo, générez favicon.ico plus une icône Apple-Touch 180 × 180, ajoutez quatre lignes <link>, déployez sur /public ou sur la racine Web. Durée totale : moins de cinq minutes.
Application React / Vite : placez les icônes dans /public, référencez-les avec des chemins relatifs à la racine dans index.html. Vite copie /public inchangé au moment de la construction, donc /favicon.ico se résout correctement en production.
WordPress : ignorez le manuel HTML — utilisez Apparence → Personnaliser → Identité du site → Site Icon. Téléchargez une source 512×512 ; WordPress émet automatiquement les bons tags. Consultez notre didacticiel WordPress pour obtenir des conseils sur la suppression du cache.
Marque en mode sombre : exportez un SVG dont le remplissage bascule dans @media (prefers-color-scheme : sombre). Associez-le à une solution de secours neutre .ico pour les clients qui ne chargent jamais le SVG.
Vérifiez dans chaque navigateur
Rechargement forcé (Ctrl+Shift+R ou Cmd+Shift+R) dans Chrome, Safari, Firefox et Edge. Les rechargements normaux conservent souvent un favicon en cache pendant des jours.
Vérifiez quatre surfaces : l'onglet du navigateur, la barre de favoris, Ajouter à l'écran d'accueil sur iOS et une icône de barre des tâches Windows épinglée. Chaque surface peut demander une résolution différente de votre forfait.
Ouvrez DevTools → Réseau, filtrez par ico ou png, rechargez et confirmez 200 réponses pour chaque URL d'icône que vous avez déclarée. Un seul 404 sur apple-touch-icon.png est un échec courant.
Questions fréquemment posées
Ai-je toujours besoin de favicon.ico si j’ai SVG ? Oui. Conservez .ico comme solution de secours universelle. SVG est une amélioration et non un remplacement.
Quel est le favicon minimum viable ? Un favicon.ico multi-tailles chez /favicon.ico. Tout le reste améliore la clarté sur les écrans haute résolution et les écrans d'accueil mobiles.
Puis-je utiliser un JPG ? Vous le pouvez, mais vous perdez en transparence. PNG ou SVG sont presque toujours meilleurs pour les icônes d'interface.
À quelle fréquence dois-je mettre à jour le favicon ? Chaque fois que votre marque change. Lancez une fois une requête ?v=2 sur les balises <link> pour vaincre les caches agressifs du navigateur.
Dépannage
L'icône ne se met pas à jour après le déploiement : les navigateurs mettent en cache les favicon indépendamment des HTML. rechargez de force, effacez les données du site ou ajoutez temporairement ?v=2 aux URL des icônes.
Icône d'onglet floue : votre source était trop petite ou non carrée. Régénérer à partir de 512×512 ou SVG ; vérifiez que .ico contient réellement une image 32 × 32.
Encadré blanc autour du logo : la source avait un fond opaque. Réexportez avec transparence et régénérez le .ico avec les entrées compressées PNG.
Fonctionne localement mais pas en production : confirmez que les fichiers se trouvent à la racine Web publique, pas seulement dans src/. Vérifiez les caches CDN et les chemins sensibles à la casse sur les serveurs Linux.
Liste de contrôle étape par étape
Exportez ou localisez un maître carré à 512 × 512 ou plus. Confirmez la transparence, le profil de couleur sRGB et l'absence de calque d'arrière-plan caché dans votre fichier de conception.
Exécutez le maître via un générateur favicon côté client. Téléchargez favicon.ico, favicon.svg le cas échéant, apple-touch-icon.png et manifestez PNG en un seul passage.
Téléchargez tous les fichiers sur votre racine Web publique. Sur les hôtes statiques, cela signifie le même dossier que index.html ; sur les frameworks, utilisez le répertoire /public ou /static qui correspond à /.
Collez le bloc <link> recommandé dans <head> avant tout script bloquant le rendu. Le placement précoce aide les navigateurs à découvrir les icônes dès la première peinture.
Validez avec une rechargement forcé sur Chrome, Safari et Firefox. Épinglez un onglet, ajoutez la page à vos favoris et testez Ajouter à l'écran d'accueil sur un vrai iPhone si le trafic iOS vous intéresse.
Documentez l'icône définie dans votre README ou votre système de conception afin que le prochain changement de marque ne commence pas à partir d'un seul PNG 32 × 32 trouvé par quelqu'un dans un e-mail.
Erreurs courantes à éviter
En utilisant un logo entièrement horizontal mis à l'échelle dans un emplacement 16 × 16, le texte devient un bruit illisible. Recadrez jusqu'au symbole.
Expédition uniquement d'un PNG 16 × 16 renommé .ico sans répertoire multi-taille approprié - les onglets Windows et Retina sont mis à l'échelle et flous.
Oublier l’icône Apple Touch tout en étant obsédé par les onglets du bureau – les utilisateurs iOS représentent une part importante du trafic Web mobile.
Pointage de <link href> vers un chemin CDN qui diffère entre la préparation et la production sans builds tenant compte de l'environnement.
En supposant que WordPress, Shopify ou Webflow corrigeront comme par magie un téléchargement de source basse résolution. Déchets entrants, déchets sortants de toutes tailles.