Favicons SVG : pourquoi ils sont meilleurs et comment les utiliser

Voici le probleme avec les favicons : nous sommes restes coinces avec des fichiers ICO pixelises depuis 1999. Vingt-cinq ans de petites icones floues. Mais les favicons SVG ? Ils sont franchement assez incroyables—et la plupart des developpeurs ne les utilisent toujours pas.

Laissez-moi vous montrer pourquoi vous pourriez vouloir changer, et plus important encore, comment le faire sans casser les choses pour les utilisateurs sur d'anciens navigateurs.

Pourquoi les favicons SVG en valent vraiment la peine

Mise a l'echelle infinie sans flou

Vous vous souvenez avoir cree cinq tailles PNG differentes pour votre favicon ? 16x16, 32x32, 48x48... ca devient vite lassant. Avec SVG, vous creez un seul fichier. C'est tout. Il reste net qu'il soit affiche a 16 pixels dans un onglet de navigateur ou a 512 pixels sur un ecran de demarrage PWA.

Un favicon SVG typique pese 300-800 octets. Comparez cela a un package de favicon PNG a 2-5 Ko. C'est une reduction de taille de 85-95%. Pas enorme en termes absolus, mais chaque octet compte quand vous optimisez.

Le mode sombre qui fonctionne tout seul

C'est la fonctionnalite phare. Avec un favicon SVG, vous pouvez integrer des requetes media CSS directement dans le fichier. Quand un utilisateur passe en mode sombre, votre favicon s'adapte automatiquement.

Voici a quoi ca ressemble en pratique :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d="M16 4L4 28h24L16 4z"/>
</svg>

C'est un simple triangle qui est sombre sur fond clair et clair sur fond sombre. Pas de JavaScript requis. Pas de detection cote serveur. Ca fonctionne tout simplement.

Style CSS et animation

Puisque SVG est essentiellement du XML avec du style, vous pouvez faire des choses impossibles avec les formats raster :

Changer les couleurs au survol (dans les contextes supportes)
Ajouter des animations subtiles
Utiliser des variables CSS pour le theming
Modifier les styles avec JavaScript

Je ne deviendrais pas fou avec les animations dans un favicon—c'est plutot agacant. Mais avoir l'option, c'est bien.

La situation du support navigateur

Soyons honnetes a ce sujet : le support des favicons SVG n'est pas parfait. Voici la realite en 2025 :

Support complet :

Chrome 80+ (bureau et Android)
Firefox 41+
Edge 80+
Opera 44+
Samsung Internet 13+

Pas de support :

Safari (bureau et iOS)
Internet Explorer
Android Browser

Safari est le gros probleme. Le navigateur d'Apple ne supporte toujours pas les favicons SVG, ce qui signifie qu'environ 20% des utilisateurs ne verront pas votre icone SVG. Vous avez besoin d'une solution de secours.

Implementer correctement les favicons SVG

Configuration de base avec solutions de secours

Voici le balisage qui couvre tout le monde :

<head>
  <!-- Solution de secours ICO pour les tres anciens navigateurs -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">

  <!-- SVG pour les navigateurs modernes -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">

  <!-- Solution de secours PNG pour Safari -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

  <!-- Apple Touch Icon (Safari n'utilisera pas votre SVG) -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

L'ordre compte. Les navigateurs analysent ces declarations sequentiellement et utilisent la derniere qu'ils supportent. Les navigateurs modernes prendront le SVG, Safari utilisera le PNG, et les navigateurs anciens se rabattront sur ICO.

Astuce pro : empecher Chrome d'utiliser ICO

Chrome telecharge parfois l'ICO meme quand le SVG est disponible. Ajoutez sizes="32x32" a votre lien ICO—cela indique a Chrome que l'ICO est uniquement pour cette taille specifique, donc il prefere le SVG evolutif.

Creer un SVG adaptatif au mode sombre

Voici un exemple plus complet :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .icon-bg { fill: #ffffff; }
    .icon-fg { fill: #000000; }

    @media (prefers-color-scheme: dark) {
      .icon-bg { fill: #1a1a1a; }
      .icon-fg { fill: #f0f0f0; }
    }
  </style>

  <circle class="icon-bg" cx="16" cy="16" r="15"/>
  <text class="icon-fg" x="16" y="21"
        text-anchor="middle"
        font-family="system-ui"
        font-weight="bold"
        font-size="18">F</text>
</svg>

Cela cree une icone circulaire avec une lettre qui inverse les couleurs selon les preferences systeme.

Verification de la taille de fichier

Les gens pretendent parfois que le SVG est toujours plus petit. Ce n'est pas tout a fait vrai. Voici la realite :

Icones geometriques simples : SVG gagne, souvent de beaucoup
Illustrations complexes : PNG pourrait en fait etre plus petit
Photos ou graphiques detailles : Ne les utilisez pas comme favicons

Pour les favicons typiques style logo (formes, lettres, graphiques simples), SVG est presque toujours le meilleur choix pour la taille de fichier.

Conseils d'optimisation

Avant de deployer votre favicon SVG, passez-le dans SVGOMG ou un optimiseur similaire. Les outils d'export comme Illustrator et Figma ajoutent beaucoup de cruft—metadonnees, commentaires d'editeur, precision inutile dans les coordonnees.

Une bonne optimisation peut reduire la taille de votre SVG de 50-70%.

De plus, gardez vos designs simples. Les degrades complexes, filtres et centaines de chemins n'augmenteront pas seulement la taille du fichier—ils peuvent causer des retards de rendu.

Une chose a savoir sur la detection de theme

La requete media prefers-color-scheme a l'interieur du SVG suit les preferences du systeme d'exploitation, pas le reglage du theme du navigateur. Si quelqu'un utilise macOS en mode sombre mais a configure son navigateur sur un theme clair, le favicon sera toujours en style mode sombre.

Cela correspond a la facon dont la plupart des sites web gerent le mode sombre de toute facon, mais c'est bon a savoir.

Devriez-vous passer au SVG ?

Si votre favicon actuel est une forme simple ou un monogramme, le SVG en vaut probablement la peine. Vous obtenez :

Un fichier au lieu de plusieurs
Support automatique du mode sombre
Taille de fichier totale plus petite
Evolutivite a l'epreuve du futur

Si votre favicon est une illustration detaillee ou si vous avez beaucoup d'utilisateurs Safari, gardez PNG comme format principal.

La meilleure approche pour la plupart des sites ? Utilisez les deux. SVG pour les navigateurs qui le supportent, PNG en secours pour ceux qui ne le supportent pas. Ca prend 5 minutes de plus a configurer et couvre 100% des utilisateurs.

Liste de verification rapide d'implementation

[ ] Creer votre favicon SVG (gardez-le simple)
[ ] Ajouter la requete media mode sombre si necessaire
[ ] Optimiser avec SVGOMG
[ ] Creer la solution de secours PNG (32x32 minimum)
[ ] Creer apple-touch-icon.png (180x180)
[ ] Ajouter les bonnes balises link avec l'ordre de secours
[ ] Tester dans Chrome, Firefox et Safari

C'est vraiment tout. Les favicons SVG ne sont pas compliques—ils sont juste sous-utilises. Essayez-les sur votre prochain projet.

References

Can I Use - SVG Favicons - Donnees de compatibilite navigateur pour le support des favicons SVG
Building an Adaptive Favicon - web.dev - Guide de Google pour creer des favicons adaptatifs
SVG Favicons and All the Fun Things We Can Do With Them - CSS-Tricks - Exploration complete des capacites des favicons SVG
How to Favicon in 2025 - Evil Martians - Guide pratique d'implementation de favicon moderne