Comment ajouter un favicon à votre site web

Nov 23, 2025 · 4 min read

Votre site web a besoin d’un favicon. Cette petite icône dans les onglets du navigateur n’est pas qu’un simple élément décoratif : c’est ainsi que les utilisateurs identifient votre site parmi des dizaines d’onglets ouverts, que Google affiche votre site dans les résultats de recherche, et qu’iOS enregistre votre site sur l’écran d’accueil. Pourtant, la plupart des guides sur les favicons sont obsolètes et recommandent des formats dépassés et des fichiers inutiles.

Cet article couvre la configuration moderne et minimaliste du favicon qui fonctionne partout : favicon SVG pour les navigateurs modernes, favicon PNG comme solution de secours, Apple Touch Icon pour les appareils iOS, et icônes de manifeste web pour les Progressive Web Apps.

Points clés à retenir

Une configuration moderne de favicon ne nécessite qu’un petit ensemble de fichiers essentiels : un fichier ICO de secours, un favicon SVG, un PNG 32×32, une Apple Touch Icon et quelques icônes de manifeste web.
Les favicons SVG s’adaptent parfaitement et prennent en charge le mode sombre via les requêtes média CSS
Safari et iOS prennent désormais pleinement en charge les favicons SVG, qui peuvent donc servir d’icône principale pour les navigateurs modernes
La mise en cache agressive des navigateurs nécessite des stratégies de versionnage lors de la mise à jour des favicons

La pile moderne de favicons

Oubliez les dizaines de tailles d’icônes de 2015. Voici ce dont vous avez réellement besoin :

Icônes essentielles

favicon.ico (multi-tailles, généralement 16×16 et 32×32) – Solution de secours pour les anciens navigateurs
favicon.svg - Évolutif pour tous les navigateurs modernes
icon-32.png - Interface utilisateur du navigateur et résultats de recherche Google
apple-touch-icon.png (180×180) - Écran d’accueil iOS
icon-192.png et icon-512.png - Manifeste web pour les PWA

Safari et iOS prennent désormais pleinement en charge les favicons SVG. Les affirmations concernant l’absence de prise en charge SVG sont obsolètes : tous les principaux navigateurs prennent désormais en charge les favicons SVG de manière fiable.

Implémentation HTML

Ajoutez ces quatre lignes dans votre balise <head> :

<!-- Fallback for legacy browsers -->
<link rel="icon" href="/favicon.ico">

<!-- PNG for browser UI and Google SERPs -->
<link rel="icon" href="/icon-32.png" sizes="32x32" type="image/png">

<!-- Modern browsers (scales cleanly) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- Apple Touch Icon for iOS -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web manifest for PWAs -->
<link rel="manifest" href="/manifest.json">

Note : Évitez rel="shortcut icon" — il est obsolète depuis 2003. Utilisez simplement rel="icon".

Créer vos icônes

Favicon SVG

Les favicons SVG s’adaptent à l’infini et prennent en charge des fonctionnalités comme le mode sombre :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <style>
    path { fill: #000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="M64 16L16 112h96z"/>
</svg>

Gardez les favicons SVG simples. Les dégradés complexes et les effets ne s’afficheront pas bien à 16×16 pixels.

Favicon PNG

Le PNG 32×32 remplit deux objectifs critiques :

Solution de secours pour les navigateurs qui ne prennent pas en charge le SVG
Affichage dans les résultats de recherche Google

Utilisez un outil comme RealFaviconGenerator ou Favicon.io pour générer des versions PNG à partir de votre SVG.

Apple Touch Icon

iOS nécessite un PNG 180×180 avec :

Pas de transparence (utilisez un fond uni)
Pas de coins arrondis (iOS les ajoute)
Contraste élevé pour la visibilité sur divers fonds d’écran

Nommez-le exactement apple-touch-icon.png et placez-le dans votre répertoire racine. iOS le trouvera automatiquement, même sans la balise <link>, mais un lien explicite garantit la fiabilité.

Icônes du manifeste web

Pour les Progressive Web Apps, créez un fichier manifest.json :

{
  "name": "Your App",
  "short_name": "App",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Ces icônes de manifeste web activent la fonctionnalité « Ajouter à l’écran d’accueil » sur Android et l’installation de PWA sur ordinateur.

Prise en charge du mode sombre

Au-delà de l’approche par requête média SVG, vous pouvez changer les favicons avec JavaScript :

const favicon = document.querySelector('link[rel="icon"]');
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

function updateFavicon(e) {
  favicon.href = e.matches ? '/favicon-dark.svg' : '/favicon-light.svg';
}

darkModeMediaQuery.addEventListener('change', updateFavicon);
updateFavicon(darkModeMediaQuery);

Gérer le cache

Les navigateurs mettent en cache les favicons de manière agressive. Lors de la mise à jour de votre icône :

Versionnez le nom du fichier : Changez favicon.svg en favicon-v2.svg
Ajoutez une chaîne de requête : favicon.svg?v=2
Mettez à jour toutes les références dans votre HTML

Pour des tests immédiats, ouvrez votre site dans une fenêtre de navigation privée.

Problèmes courants

Le favicon ne s’affiche pas ?

Vérifiez le chemin — utilisez des chemins absolus (/favicon.svg) et non relatifs
Vérifiez les types MIME : le SVG nécessite image/svg+xml
Testez en mode navigation privée pour contourner le cache

Flou sur les écrans Retina ?

Utilisez le SVG comme icône principale
Assurez-vous que les exports PNG font exactement 32×32 et 180×180

Mauvaise icône sur iOS ?

iOS donne la priorité à apple-touch-icon.png dans le répertoire racine
Effacez le cache de Safari : Réglages → Safari → Effacer l’historique et les données de sites web

Conclusion

L’implémentation moderne des favicons est plus simple que ne le suggèrent les anciens guides. Cinq fichiers — ICO, SVG, PNG, Apple Touch Icon et icônes de manifeste web — couvrent tous les navigateurs, appareils et cas d’usage. Ignorez les ensembles obsolètes de plusieurs dizaines d’icônes et les métadonnées de tuiles Windows, sauf si vous en avez spécifiquement besoin.

Concentrez-vous sur un favicon SVG propre comme icône principale, ajoutez les solutions de secours essentielles, et votre site s’affichera parfaitement partout, des onglets du navigateur aux écrans d’accueil iOS.

FAQ

Bien que les favicons SVG fonctionnent dans tous les navigateurs modernes, vous avez toujours besoin de solutions de secours. Les anciens navigateurs nécessitent des fichiers ICO, iOS a besoin d'apple-touch-icon.png pour les raccourcis d'écran d'accueil, et les résultats de recherche Google recherchent spécifiquement des favicons PNG.

Certains navigateurs ajustent automatiquement les couleurs du favicon pour la visibilité en mode sombre. Pour contrôler ce comportement, utilisez des requêtes média CSS dans votre favicon SVG ou implémentez un changement de favicon basé sur JavaScript pour une apparence cohérente.

Les mises à jour de favicon peuvent prendre de quelques heures à plusieurs jours selon la mise en cache du navigateur. Forcez les mises à jour immédiates en versionnant les noms de fichiers ou en ajoutant des chaînes de requête. Les résultats de recherche Google peuvent prendre plusieurs semaines pour refléter les changements de favicon même après un nouveau crawl.

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.