Pour ajouter un favicon à votre site web, placez un petit ensemble de fichiers d'icônes dans la racine de votre site et référencez-les dans le <head> HTML avec des balises <link>, puis pointez un petit manifeste web vers les icônes PWA plus grandes. C'est tout le travail en 2026, et c'est plus que la simple ligne 16x16 que la plupart des tutoriels montrent. Voici exactement comment ajouter un favicon à votre site web pour qu'il apparaisse dans les onglets du navigateur, les favoris, les écrans d'accueil iOS et les icônes d'applications Android, ainsi que la correction pour le favicon qui refuse obstinément d'apparaître.
La plupart des guides s'arrêtent à une balise link rel="icon" et considèrent que c'est suffisant. Cette balise fonctionne pour un onglet de navigateur de bureau et rien d'autre. Les appareils modernes demandent toute une famille de tailles et de formats, et si vous les omettez, vous obtenez une icône d'onglet floue, un carré gris générique sur un iPhone, ou aucune icône PWA du tout. Ce guide vous donne le lot complet de fichiers, l'extrait exact pour le head, et l'astuce de mise en cache qui résout la plainte la plus courante concernant les favicons.
Ce qu'un favicon exige réellement en 2026#
Autrefois, un favicon se résumait à un seul fichier .ico de 16x16 pixels. Cette époque est révolue. L'icône d'onglet de navigateur n'est plus qu'un des nombreux endroits où l'icône de votre site apparaît, et chaque surface attend un fichier différent.
Voici ce qui réclame une icône aujourd'hui et ce que chacun attend :
- Les onglets et favoris du navigateur de bureau veulent un petit ICO (16x16 et 32x32) ainsi que, idéalement, un SVG évolutif.
- Les navigateurs modernes préfèrent un favicon SVG net qui s'adapte à n'importe quelle résolution sans flou.
- Safari sur iOS (écran d'accueil et raccourcis) veut un PNG de 180x180 sans transparence, appelé l'icône Apple Touch.
- Chrome sur Android et les PWA lisent un
site.webmanifestet extraient des icônes PNG de 192x192 et 512x512, y compris une variante masquable.
La bonne nouvelle : vous ne dessinez pas tout cela à la main. Vous concevez une image maîtresse carrée (512x512 ou plus, idéalement avec un fond transparent) et exportez l'ensemble complet à partir de celle-ci. Un générateur de favicon gratuit prend cette image source unique et produit toutes les tailles, l'ICO, le SVG, le manifeste et l'extrait de code head en une seule passe, ce qui est le chemin le plus rapide dans tout ce processus.
Astuce clé : concevez votre icône comme une forme simple et audacieuse qui reste lisible à 16x16. Les détails fins et les petits textes disparaissent à l'échelle du favicon. Une seule lettre, un monogramme ou un glyphe fort bat un logo complet réduit à chaque fois.
Les fichiers exacts dont vous avez besoin#
Avant de toucher au HTML, placez ces fichiers dans le répertoire racine de votre site (le même dossier que votre index.html ou votre dossier public/ dans un framework). Il s'agit de l'ensemble moderne minimal qui couvre tous les appareils.
| Fichier | Taille / format | Ce qu'il sert |
|---|---|---|
favicon.ico | 16x16 + 32x32, ICO multi-résolution | Navigateurs anciens, icône d'onglet par défaut |
favicon.svg | Vectoriel scalable | Navigateurs modernes, net à n'importe quelle résolution |
apple-touch-icon.png | 180x180 PNG, opaque | Écran d'accueil iOS et raccourcis |
icon-192.png | 192x192 PNG | Écran d'accueil Android, PWA |
icon-512.png | 512x512 PNG | Écran de démarrage PWA, boutiques d'applications, masquable |
site.webmanifest | JSON | Indique à Android/PWA quelles icônes utiliser |
Deux détails comptent plus que ce que l'on pense. Le favicon.ico doit être un véritable ICO multi-résolution contenant à la fois les versions 16x16 et 32x32, pas un PNG renommé, afin que les navigateurs puissent choisir la bonne taille. Et l'icône apple touch doit être opaque avec un fond uni, car iOS ne gère pas la transparence et remplira les zones transparentes de noir, ruinant ainsi votre icône.
Pourquoi favicon.ico vs SVG n'est pas un choix exclusif#
Les gens traitent favicon.ico contre SVG comme un choix. Ce n'en est pas un. Vous fournissez les deux et laissez chaque navigateur prendre ce qu'il comprend.
- SVG est l'avenir : un seul fichier, infiniment scalable, prend en charge l'adaptation au mode sombre avec une requête média dans le SVG. Les navigateurs modernes le préfèrent.
- ICO est le filet de sécurité : les navigateurs anciens, certains lecteurs de flux et certaines plateformes demandent encore
/favicon.icopar son nom même si vous ne le liez jamais.
Fournir les deux ne coûte que quelques kilo-octets et garantit une icône nette partout. Si vous n'en fournissez qu'un, choisissez l'ICO pour la compatibilité, mais la meilleure pratique moderne est d'avoir les deux.
Comment ajouter un favicon à votre site Web étape par étape#
Voici la procédure complète, d'un <head> vide à un favicon fonctionnant sur tous les appareils. Suivez-la dans l'ordre.
Étape 1 : Créez votre image maître de l'icône#
Commencez par une seule image carrée de 512x512 pixels ou plus, avec un fond transparent (PNG ou SVG). Gardez le design simple et à fort contraste pour qu'il survive à un rétrécissement à 16 pixels. Si votre logo est large ou détaillé, créez un marqueur carré simplifié juste pour le favicon. Vous pouvez redimensionner et mettre au carré n'importe quelle source artistique avec un redimensionneur d'image gratuit avant l'exportation.
Étape 2 : Générez toutes les tailles et tous les formats#
Insérez votre image maître dans un générateur de favicon pour produire l'ICO, le SVG, l'icône Apple Touch de 180x180, les PNG de 192 et 512, et le manifeste. Le faire manuellement dans un éditeur d'images est lent et sujet aux erreurs, surtout l'ICO multi-résolution, que la plupart des éditeurs ne peuvent pas exporter correctement. Le générateur de favicon de Molixa produit le bundle complet ainsi qu'un extrait de tête prêt à coller. Si vous avez déjà un logo vectoriel, vous pouvez aussi le convertir proprement avec un convertisseur SVG en PNG pour obtenir des icônes PNG parfaites au pixel près à chaque taille.
Étape 3 : Téléchargez les fichiers à la racine de votre site#
Placez tous les fichiers générés dans le répertoire racine ou public de votre site afin qu'ils soient accessibles à des URL comme https://yoursite.com/favicon.ico et https://yoursite.com/site.webmanifest. Le chemin /favicon.ico en particulier doit résoudre à la racine, car certains clients le récupèrent automatiquement là, indépendamment de votre HTML.
Étape 4 : Ajoutez les balises de lien dans l'en-tête HTML#
Collez ce bloc à l'intérieur du <head> de chaque page (ou de votre modèle/layout partagé pour qu'il s'applique à tout le site) :
<!-- ICO classique pour les navigateurs anciens -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<!-- SVG moderne et évolutif -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Écran d'accueil iOS -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Manifeste PWA / Android -->
<link rel="manifest" href="/site.webmanifest">
C'est l'ensemble complet des liens de favicon moderne. Le navigateur les lit tous et choisit le meilleur pour son contexte. Vous n'avez pas besoin d'une balise séparée pour chaque taille PNG, car le manifeste gère les icônes Android et PWA.
Étape 5 : Créez le manifeste web#
Le site.webmanifest est un petit fichier JSON qui indique aux installateurs Android et PWA quelles icônes utiliser. Une version minimale et correcte ressemble à ceci :
{
"name": "Nom de votre site",
"short_name": "VotreSite",
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
],
"theme_color": "#ffffff",
"display": "standalone"
}
L'entrée purpose: "maskable" est celle que la plupart des configurations oublient. Android recadre les icônes en cercles, en squircles et en carrés arrondis selon l'appareil. Une icône masquable a un rembourrage (une zone de sécurité) pour que le recadrage ne coupe jamais votre logo. Sans cela, Android pourrait réduire votre icône dans une boîte blanche ou couper les bords.
Étape 6 : Déployez et vérifiez sur des appareils réels#
Poussez vos modifications, puis vérifiez le favicon dans un onglet de bureau, sur un iPhone (ajouter à l'écran d'accueil) et sur Android (installer ou ajouter à l'écran d'accueil). S'il n'apparaît pas immédiatement, c'est presque toujours un problème de cache, pas une erreur de code, ce que la section suivante couvre.
Pourquoi votre favicon ne s'affiche pas (la vraie solution)#
Voici la partie que tous les tutoriels de base oublient, et c'est la raison numéro un pour laquelle les gens pensent avoir mal configuré leur site. Votre HTML est probablement correct. Le problème, c'est que les navigateurs mettent en cache les favicons de manière très agressive, plus que pour presque toute autre ressource.
Quand un navigateur charge votre ancien favicon (ou son absence), il peut conserver ce résultat pendant des jours, ignorant votre nouveau fichier même après un rafraîchissement normal de la page. Vous uploadez donc une belle nouvelle icône, vous rechargez, et vous voyez toujours l'ancienne ou un globe vide. Voici comment vider le cache, par ordre d'effort :
- Effectuez un rafraîchissement forcé avec Ctrl+Maj+R (Windows) ou Cmd+Maj+R (Mac). Cela vide la plupart des caches de favicon, mais pas tous.
- Ajoutez une chaîne de requête de version au lien, comme
href="/favicon.ico?v=2". Incrémentez le nombre à chaque changement d'icône, et le navigateur la traitera comme un nouveau fichier. - Accédez directement à l'URL du favicon dans la barre d'adresse (
votresite.com/favicon.ico) et effectuez un rafraîchissement forcé de cette page pour forcer un nouveau téléchargement. - Testez dans une fenêtre de navigation privée, qui ignore votre cache de favicon existant, pour confirmer que la nouvelle icône est bien en ligne.
- Videz les images mises en cache dans les paramètres de votre navigateur si tout le reste échoue sur votre machine.
Attention : ne perdez pas une heure à réécrire vos balises de lien parce que l'icône "ne se met pas à jour". Ouvrez d'abord une fenêtre privée. Si le favicon s'affiche, votre code est correct et vous ne combattez qu'un cache obsolète sur votre profil normal.
L'astuce de la chaîne de requête de version (?v=2) est la solution professionnelle. Elle garantit que la prochaine fois que vous redessinerez votre icône, chaque visiteur de retour obtiendra la nouvelle au lieu d'une relique mise en cache. Ajoutez-la dès le premier jour et vous ne déboguerez plus jamais un favicon fantôme.
Note sur la transparence et les arrière-plans#
Deux règles de transparence posent problème. L'icône Apple Touch doit être opaque, donnez-lui donc une couleur de fond unie qui correspond à votre marque. Le favicon SVG et les PNG pour l'onglet du navigateur peuvent conserver un fond transparent, ce qui est plus propre sur les chrome clair et sombre. Mélanger ces règles provoque le bug classique du "cadre noir sur iPhone", où une icône Apple Touch transparente reçoit un remplissage noir.
Favicons dans les frameworks (Next.js, Vite, WordPress)#
Les balises link sont les mêmes partout, mais leur emplacement diffère selon la pile.
- Next.js (App Router) : placez
favicon.ico,icon.svgetapple-icon.pngdans le dossierapp/et Next génère automatiquement les balises. Pour le manifest, ajoutez unmanifest.tsou unsite.webmanifeststatique dansapp/. - Vite / HTML simple : mettez les fichiers dans
public/et collez le bloc de liens dans l'en-tête de votreindex.html. Vite sert le dossierpublic/à la racine du site. - WordPress : utilisez la fonction Icône du site sous Apparence, Personnaliser, Identité du site pour les bases, ou ajoutez le bloc de liens complet via le
header.phpde votre thème ou un plugin d'injection d'en-tête pour un contrôle total. - Générateurs de sites statiques (Astro, Hugo, Eleventy) : placez les fichiers dans le dossier static/public et ajoutez le bloc de liens à votre mise en page de base pour que chaque page en hérite.
Quel que soit le framework, l'exigence sous-jacente ne change pas : les fichiers d'icônes doivent être accessibles aux URL racines, et l'en-tête doit les référencer. Si vous compressez ces icônes PNG pour les garder légères, faites-le sans perte de qualité à l'aide d'un compresseur d'images gratuit afin que l'icône 512x512 reste nette sur les écrans de démarrage PWA.
Foire aux questions#
Quel est le minimum HTML pour ajouter un favicon à un site web ?
Au strict minimum, placez un fichier favicon.ico à la racine de votre site et ajoutez <link rel="icon" href="/favicon.ico"> dans votre <head>. Cela suffit pour un onglet de navigateur de base. Mais cela ne définit pas les icônes iOS, Android et PWA, donc pour tout site réel, vous devez ajouter le SVG, l'icône Apple Touch et les balises de manifeste comme indiqué ci-dessus.
Ai-je encore besoin d'un fichier favicon.ico en 2026, ou le SVG est-il suffisant ?
Vous devriez fournir les deux. Le SVG est plus net et s'adapte parfaitement aux navigateurs modernes, mais certains navigateurs et clients plus anciens demandent encore /favicon.ico par son nom. Conserver un ICO multi-résolution comme solution de repli garantit une icône partout, et cela ne coûte que quelques kilo-octets à inclure.
Pourquoi mon favicon fonctionne-t-il en navigation privée mais pas dans une fenêtre normale ?
C'est un problème de mise en cache du favicon, pas un bug de code. Votre profil de navigateur normal conserve une version obsolète en cache, tandis que la fenêtre privée récupère une version fraîche. Effectuez un rafraîchissement forcé, ajoutez une chaîne de version ?v=2 à votre balise link, ou videz le cache des images pour forcer la mise à jour. S'il s'affiche en navigation privée, votre HTML est correct.
Quelle taille doit avoir l'icône Apple Touch et la transparence est-elle importante ? Utilisez un PNG de 180x180 pixels avec un fond opaque et uni. iOS ne prend pas en charge la transparence sur les icônes de l'écran d'accueil et remplira toute zone transparente avec du noir, ce qui gâche l'apparence. Donnez-lui un fond de la couleur de votre marque pour qu'il ait l'air intentionnel sur l'écran d'accueil.
Qu'est-ce qu'une icône maskable et en ai-je besoin ?
Une icône maskable est une icône PWA avec un espace supplémentaire (une zone de sécurité) pour qu'Android puisse la découper en cercle, en forme de carré arrondi ou en carré aux coins arrondis sans couper votre logo. Vous la déclarez dans le manifeste avec "purpose": "maskable". Si votre site peut être installé en tant que PWA ou ajouté à un écran d'accueil Android, vous en avez besoin pour éviter une icône rognée ou encadrée.
Comment générer toutes les tailles de favicon sans éditeur d'images ?
Téléchargez une image maîtresse carrée (512x512 ou plus) sur un générateur de favicon et il exporte l'ICO, le SVG, l'icône Apple Touch, les PNG PWA et le manifeste en une seule étape, ainsi que l'extrait de code pour le <head>. Cela évite la tâche manuelle la plus difficile, la création d'un ICO multi-résolution correct, que la plupart des éditeurs d'images ne peuvent pas exporter correctement.
Ajouter un favicon à votre site web, correctement#
Savoir comment ajouter un favicon à votre site web en 2026 signifie dépasser le simple fichier 16x16 : livrez l'ICO et le SVG pour les navigateurs, une icône opaque apple touch pour iOS, des PNG de 192 et 512 pixels ainsi qu'une icône masquable dans un manifeste web pour Android et les PWA, et référencez-les tous dans votre <head>. Générez le pack complet à partir d'une image maîtresse, ajoutez un ?v=2 à vos balises lien pour que les futurs changements vident le cache, et vérifiez sur des appareils réels. Faites-le une fois et votre icône sera nette dans chaque onglet, marque-page et écran d'accueil, sans session de débogage de favicon fantôme à l'avenir.
