Un favicon est la petite icône qu'un navigateur affiche dans l'onglet, dans les favoris et l'historique, ainsi que sur l'écran d'accueil d'un téléphone lorsqu'on enregistre votre site. L'ajouter à votre site demande quatre fichiers et environ cinq minutes — et l'essentiel des difficultés rencontrées vient du cache, que traite la dernière section.

L'ensemble minimal qui fonctionne vraiment

Vous n'avez pas besoin de seize PNG ni d'un browserconfig.xml. Les tuiles Windows et les anciens formats d'Internet Explorer sont morts. Quatre fichiers couvrent tous les navigateurs et appareils réellement utilisés aujourd'hui :

Fichier	Taille	Pourquoi il existe
`favicon.ico`	16 · 32 · 48 (multi-taille)	Navigateurs anciens, et Google Search, qui récupère `/favicon.ico` directement.
`icon.svg`	vectoriel	Les navigateurs modernes le préfèrent — net à n'importe quelle taille, et il peut s'adapter au mode sombre.
`apple-touch-icon.png`	180 × 180	Écran d'accueil iOS et Safari. iOS ignore le SVG ici, le PNG est donc requis.
`android-chrome` 192 & 512	192 · 512	Écran d'accueil Android et PWA installables, référencés depuis le manifeste d'application web.

Le HTML à coller dans <head>

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Le navigateur lit les quatre lignes et choisit le meilleur format qu'il prend en charge : un Chrome ou Safari actuel utilise donc le SVG tandis qu'un ancien navigateur se rabat sur le .ico. L'attribut sizes="48x48" sur la ligne du .ico déclare simplement la plus grande image qu'il contient.

Le manifeste d'application web

Le manifeste est ce qui permet aux installations Android et PWA d'utiliser une véritable icône. Un site.webmanifest minimal :

{
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
  ]
}

Le "purpose": "any maskable" permet à Android de recadrer l'icône selon sa forme adaptative sans rogner votre logo — à condition de laisser une marge de sécurité tout autour (voir Astuces avancées).

Où placer les fichiers

Placez chaque fichier dans le répertoire racine de votre site. Les navigateurs — et Googlebot — demandent /favicon.ico à la racine automatiquement, même sans balise <link> ; l'y conserver est donc le choix par défaut le plus sûr.

Vérifier que cela a bien fonctionné

Forcez le rechargement de la page : Ctrl+Shift+R (Windows) ou Cmd+Shift+R (Mac).
Toujours bloqué ? Ouvrez le site dans une fenêtre privée / de navigation privée — elle démarre avec un cache vide.
Chargez chaque fichier directement, par ex. yourdomain.com/favicon.ico, et vérifiez qu'il renvoie bien l'image (HTTP 200) et non une erreur 404.
Inspectez le <head> généré dans les DevTools, et pas seulement votre fichier source — une étape de build ou un CMS peut réécrire les chemins.

Ce qui fait perdre le plus de temps : le cache

Les navigateurs mettent les favicons en cache avec plus d'obstination que presque tout autre fichier, conservant parfois l'ancien malgré des rechargements ordinaires. Si une nouvelle icône refuse d'apparaître :

Forcez le rechargement, puis fermez complètement l'onglet et ouvrez-en un nouveau — le cache des favicons est souvent lié à l'onglet.
Pendant vos tests, ajoutez un paramètre de version pour que le navigateur le considère comme un nouveau fichier : <link rel="icon" href="/favicon.ico?v=2">.
Google Search conserve sa propre copie et se met à jour selon son propre calendrier — comptez des jours, parfois des semaines, avant qu'un résultat de recherche n'affiche la nouvelle icône.

Tout, sur ce site, s'exécute dans votre navigateur. L'image que vous importez ne quitte jamais votre appareil — il n'y a aucun serveur vers lequel l'envoyer.

← Retour au générateur