Faut-il encore favicon.ico en 2025 ?

Guide pratique du favicon.ico en 2025. Les navigateurs modernes ne l’exigent plus, mais le garder réduit le bruit des journaux serveur et conserve la compatibilité avec les outils anciens.

En bref

Techniquement, les navigateurs modernes (Chrome, Edge, Safari, Firefox) n’exigent plus le fichier .ico. En pratique, il est toutefois fortement recommandé de le conserver.

Sans favicon.ico, les journaux serveur se remplissent d’erreurs 404. Beaucoup de bots anciens et de lecteurs RSS ne lisent pas l’en-tête HTML : ils demandent directement /favicon.ico à la racine.

La configuration recommandée en 2025

Trois ou quatre fichiers suffisent pour couvrir tous les cas. Inutile de générer des dizaines de tailles au format ancien :

1. favicon.ico (32×32) – Compatibilité ancienne et repli

Doit être placé à la racine du site (/favicon.ico)
Sert surtout à éviter les erreurs dans les journaux et à servir les outils anciens

2. icon.svg – Standard moderne (principal)

Préféré par les navigateurs modernes
Se redimensionne sans perte de qualité

3. apple-touch-icon.png (180×180) – Appareils iOS

Utilisé quand on choisit « Ajouter à l’écran d’accueil » sur iPhone/iPad
Pas besoin de plusieurs tailles : 180×180 couvre tous les appareils iOS

4. manifest.webmanifest (facultatif)

Surtout pour Android et l’installation PWA
Définit les icônes PNG 192×192 et 512×512

Code d’implémentation (HTML / Nuxt Head)

L’approche la plus courte et la plus actuelle :

<head>
  <!-- 1. Modern SVG (highest priority) -->
  <link rel="icon" href="/icon.svg" type="image/svg+xml">

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

  <!-- 3. Traditional .ico (fallback) -->
  <!-- Note: Adding sizes="any" tells Chrome this is a bitmap, -->
  <!-- so Chrome will prefer SVG over ICO -->
  <link rel="icon" href="/favicon.ico" sizes="any">
  
  <!-- 4. Android/PWA configuration -->
  <link rel="manifest" href="/manifest.webmanifest">
</head>

Pour les projets Nuxt.js

Dans nuxt.config.ts ou dans le composant de page :

useHead({
  link: [
    { rel: 'icon', href: '/icon.svg', type: 'image/svg+xml' },
    { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
    { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
    { rel: 'manifest', href: '/manifest.webmanifest' },
  ],
})

Pourquoi garder favicon.ico ?

Journaux serveur plus lisibles

Sans favicon.ico, les journaux se remplissent d’erreurs 404. Chaque fois qu’un bot, un crawler ou un lecteur RSS demande /favicon.ico (ce qui se fait automatiquement), une entrée d’erreur s’ajoute. Ce bruit rend les vrais problèmes plus difficiles à repérer.

Compatibilité avec les outils anciens

Beaucoup d’outils plus anciens, lecteurs RSS, gestionnaires de favoris et extensions s’attendent encore à favicon.ico à la racine. Les navigateurs modernes n’en ont plus besoin, mais ces outils ne lisent souvent pas l’en-tête HTML et interrogent directement la racine.

Coût quasi nul, bénéfice net

Un favicon.ico 32×32 pèse très peu (souvent moins de 2 Ko) et ne demande aucun entretien. Des journaux propres et une compatibilité large valent largement ce coût minime.

L’approche moderne : SVG d’abord

Gardez favicon.ico pour la compatibilité, mais le favicon principal devrait être en SVG :

Indépendant de la résolution : Reste net à n’importe quelle taille, de 16×16 à 512×512
Fichier plus léger : Souvent plus petit qu’un PNG équivalent
Pérenne : Convient aux écrans haute densité et aux appareils à venir
Un seul fichier : Un SVG remplace plusieurs tailles PNG

Les navigateurs modernes (Chrome, Firefox, Safari, Edge) prennent tous en charge les favicons SVG. L’attribut sizes="any" sur le lien ICO indique au navigateur de préférer le SVG quand il est disponible.

Points clés

Ne pas supprimer le .ico : Même si le navigateur ne s’en sert pas, gardez-le à la racine pour des journaux propres et la compatibilité avec les outils anciens.
Le SVG est l’avenir : Un seul fichier SVG règle la plupart des problèmes de résolution.
Configuration minimale : Avec seulement 3 ou 4 fichiers (favicon.ico, icon.svg, apple-touch-icon.png, et éventuellement manifest.webmanifest), tous les usages sont couverts.
L’ordre de priorité compte : Listez d’abord le SVG, puis l’ICO avec sizes="any", pour que les navigateurs modernes choisissent le meilleur format.

Conclusion

En 2025, favicon.ico n’est plus techniquement nécessaire pour les navigateurs modernes, mais le garder reste une bonne pratique. Cela évite le bruit dans les journaux, conserve la compatibilité avec les outils anciens, et ne coûte presque rien. Associé à un favicon SVG moderne, c’est la configuration la plus saine pour aujourd’hui et pour la suite.

L’essentiel est la simplicité : un SVG comme favicon principal, un petit ICO pour la compatibilité, une Apple touch icon pour iOS, et éventuellement un manifeste pour les PWA. Cette configuration minimale couvre tous les cas, sans gérer des dizaines de tailles.