Comment ajouter un favicon en HTML
Trois balises couvrent 99 % des cas. Deux de plus et vous obtenez une configuration digne d'une PWA.
Vérifiez les favicons de n'importe quel site
Installez l'extension Chrome FetchFavicon pour extraire, prévisualiser et valider les favicons instantanément.
La balise minimale
<link rel="icon" href="/favicon.ico"> — c'est tout. Chaque navigateur la reconnaît.
Le jeu moderne recommandé
Ajoutez le SVG et l'apple-touch-icon pour un rendu net sur toutes les plateformes :
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Invites d'installation PWA
Ajoutez un manifest.json avec des entrées PNG en 192×192 et 512×512, puis déclarez <link rel="manifest" href="/site.webmanifest">.
FAQ
What is the minimum HTML tag for a favicon?
Add <link rel="icon" href="/favicon.ico"> inside <head>. Place favicon.ico at your site root and every browser will find it.
Do I need separate tags for PNG and SVG favicons?
Yes for a modern setup. Link favicon.ico as the fallback, then add <link rel="icon" type="image/png"> and optionally type="image/svg+xml" for sharper rendering.
Where should favicon <link> tags go in HTML?
Inside the <head> element, before </head>. Order among icon links does not matter.
Do I need a web manifest for favicons?
Not for basic tabs, but add <link rel="manifest"> plus 192×192 and 512×512 PNG icons if you want PWA install prompts.