Comment ajouter un favicon en HTML
Ajouter un favicon à une page HTML simple, c'est une ligne de code — mais la configuration moderne et complète tient en six lignes et couvre iOS, Android, le mode sombre et l'installation PWA.
La seule balise que tous les navigateurs respectent est <link rel="icon" href="/favicon.ico">. Placez favicon.ico à la racine de votre site et vous avez couvert 80 % du travail.
Les 20 % restants — apple-touch-icon, variantes PNG, SVG compatible mode sombre et webmanifest — font la différence entre une icône par défaut et une image de marque soignée.
Comment ça marche
- 1
Générer votre package favicon
Utilisez le générateur FetchFavicon — il produit tous les fichiers nécessaires plus le code HTML prêt à coller.
- 2
Placer les fichiers à la racine du site
favicon.ico, apple-touch-icon.png, android-chrome-192/512.png, site.webmanifest.
- 3
Coller le snippet dans <head>
Six balises <link> + une balise <meta name="theme-color">.
Essayez maintenant
Obtenir le snippet HTML
Générateur de FaviconFAQ
Où placer les balises <link> ?+
Dans <head>, n'importe où — l'ordre n'a pas d'importance tant qu'elles apparaissent avant </head>.
Ai-je besoin à la fois du .ico et du PNG ?+
Oui. Le .ico est le fallback universel ; le PNG offre le rendu le plus net sur les écrans haute densité.
Et le mode sombre ?+
Publiez une variante SVG qui intègre une media query prefers-color-scheme dans son bloc <style>.