Comment créer un favicon
Aujourd'hui, un favicon ne se résume plus à une simple icône 16×16. Voici la procédure complète pour un rendu net sur chaque navigateur, OS et appareil.
Vérifiez les favicons de n'importe quel site
Installez l'extension Chrome FetchFavicon pour extraire, prévisualiser et valider les favicons instantanément.
Qu'est-ce qu'un favicon ?
Un favicon est la petite icône que le navigateur affiche dans l'onglet, la barre de favoris et la liste d'historique. Sur mobile, c'est l'icône de l'écran d'accueil. Sous Windows, c'est l'icône de raccourci.
Les sites modernes publient plusieurs résolutions et formats pour que chaque surface bénéficie d'un rendu net.
Préparer votre image source
Partez d'une image carrée d'au moins 512×512 — idéalement un SVG avec un viewBox carré. En dessous, le redimensionnement produira du flou.
Évitez les traits fins et les petits textes. Ils deviennent illisibles à 16×16.
Générer un .ico multi-tailles
Regroupez les résolutions 16, 32, 48, 64, 128 et 256 dans un seul fichier favicon.ico. Les navigateurs sélectionnent automatiquement la bonne taille.
Notre générateur de favicon effectue cette opération côté client en moins d'une seconde.
Ajouter les balises HTML
Placez favicon.ico à la racine de votre site. Ajoutez ensuite les déclarations SVG, apple-touch-icon et manifest dans <head> pour une configuration complète.
Vérifier dans chaque navigateur
Effectuez un rechargement forcé (Ctrl+F5) dans Chrome, Safari, Firefox et Edge. Vérifiez la barre de favoris, l'onglet et un ajout à l'écran d'accueil.
FAQ
What is a favicon?
A favicon is the small icon shown in browser tabs, bookmarks, and mobile home screens. Modern sites ship multiple sizes and formats for crisp rendering everywhere.
What size should my favicon source image be?
Start from a square image at least 512×512 pixels. SVG with a square viewBox works best for sharp downscaling.
Do I need both favicon.ico and PNG files?
Yes — ship a multi-size favicon.ico for universal fallback plus PNGs (180×180 and 192/512) for Apple, Android, and PWAs.
Where do I put favicon files on my website?
Place favicon.ico in your site root and add <link rel="icon"> tags in <head> for SVG and PNG variants.