Comment préparer un favicon en 2025

• À mesure que la création de favicons s’est complexifiée, il est devenu courant d’utiliser plus de 20 fichiers PNG simplement pour afficher le logo d’un site web dans un onglet de navigateur ou sur un écran tactile
• Pour remplacer cela, l’article propose une méthode couvrant la plupart des environnements avec un nombre relativement réduit de fichiers d’icônes et un minimum de configuration

Version très simple

• Sans configuration complexe, cinq icônes essentielles et un seul fichier JSON suffisent

• Voici un exemple de liens de base à insérer dans le HTML

  <link rel="icon" href="/favicon.ico" sizes="32x32">  
  <link rel="icon" href="/icon.svg" type="image/svg+xml">  
  <link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->  
  

• Si vous prenez en charge les PWA (Progressive Web App), ajoutez aussi ceci

  <link rel="manifest" href="/manifest.webmanifest">  
  

• Voici un exemple de structure pour manifest.webmanifest

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

• Comme une icône maskable peut être rognée sur les bords, il est recommandé de garder une zone sûre circulaire de 409×409

• Avec cette configuration seule, le favicon fonctionne déjà correctement sur la plupart des navigateurs et appareils principaux

Version détaillée

• Le mot favicon vient de “favorite icon” et désigne la petite icône affichée notamment dans les onglets du navigateur
• Safari prend lui aussi correctement en charge les favicons depuis quelque temps
• Au lieu de produire des jeux d’icônes pour de nombreuses résolutions, on peut gérer cela efficacement avec un SVG, quelques icônes PNG et un manifest simple

La configuration ultime de favicon

• Un fichier SVG, quelques fichiers PNG minimum et un fichier web manifest suffisent pour afficher des icônes cohérentes sur divers navigateurs et appareils
• Le SVG étant un format vectoriel, il peut être agrandi ou réduit librement selon les besoins, avec un impact limité sur les performances grâce au téléchargement en arrière-plan
• Pour le PNG, on ne prépare que les tailles réellement nécessaires, comme l’icône Apple (apple-touch-icon) et les icônes pour PWA
• Les anciens formats comme les icônes de tuiles Windows, Safari Pinned Icon ou rel=“shortcut” ne sont plus vraiment nécessaires dans les navigateurs récents
• Certains anciens navigateurs ou outils récupèrent encore directement l’icône via le chemin /favicon.ico, donc le fichier favicon.ico à la racine reste important

Comment créer l’Ultimate Favicon Set

• Les étapes ci-dessous décrivent le processus de création et d’optimisation manuelle des icônes
• Étape 1 : préparer le SVG
  • Il faut préparer un fichier icon.svg en conservant un format carré
  • À l’intérieur de <svg>, il est possible de gérer le changement de couleurs entre mode clair et mode sombre à l’aide de media queries CSS
  • Comme dans l’exemple, on peut utiliser @media (prefers-color-scheme: dark) pour définir les couleurs du mode sombre
• Étape 2 : créer le fichier ICO
  • Convertir icon.svg en image matricielle en 16×16 ou 32×32 pour générer favicon.ico
  • Des outils comme GIMP ou Inkscape+ImageMagick peuvent être utilisés
  • Il faut veiller à ce que le logo ne devienne pas trop brouillon en très petite résolution
• Étape 3 : créer les images PNG
  • Préparer des icônes PNG en 512×512, 192×192, 180×180 et 512×512 (maskable)
  • Pour apple-touch-icon sur iOS, travailler en 180×180 avec une couleur de fond ou des marges adaptées est recommandé
  • Une icône maskable doit conserver une zone sûre de 409×409
• Étape 4 : optimiser les PNG et le SVG
  • Le SVG peut être compressé avec SVGO, et les PNG avec Squoosh pour améliorer le taux de compression
  • Les utilisateurs pouvant se trouver dans des environnements à données limitées, réduire au maximum le poids des fichiers est un avantage
• Étape 5 : relier les icônes dans le HTML
  • En pratique, on relie favicon.ico, icon.svg et apple-touch-icon.png dans la balise <head>

    <link rel="icon" href="/favicon.ico" sizes="32x32">  
    <link rel="icon" href="/icon.svg" type="image/svg+xml">  
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">  
    

  • Si vous utilisez Webpack, il est aussi possible de gérer le cache en ajoutant un hash au moment du build
  • On peut également utiliser des favicons différents pour distinguer l’environnement de staging (développement) de l’environnement de production
• Étape 6 : créer le Web Manifest
  • Ajouter les informations d’icônes pour PWA dans le fichier manifest.webmanifest, puis le relier avec <link rel="manifest" href="/manifest.webmanifest">
  • L’exemple ci-dessous définit des icônes 192×192, 512×512 (maskable) et 512×512

    {  
      "name": "My website",  
      "icons": [  
        { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },  
        { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },  
        { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }  
      ]  
    }  
    

  • Dans un environnement Webpack, l’automatisation est possible avec un plugin comme webpack-pwa-manifest
• En suivant ce processus, un petit nombre de fichiers suffit pour afficher un favicon adapté sur la plupart des navigateurs et appareils
• La gestion devient encore plus pratique si l’on met en place un outil d’automatisation

[carnoxen]

SVG Favicon n’est pas encore pris en charge par Firefox...

[carnoxen]

Ah, c’était Safari.

[yeppyshiba]

J’ai réalisé un webgame dans le cadre d’un projet dans mon ancienne entreprise.
Par ennui, j’ai ajouté un favicon animé comme easter egg,
et le résultat était plutôt convaincant après avoir créé l’animation avec un sprite sheet.

[xguru]

Récapitulatif sur les favicons pour 2021
Je l’avais déjà partagé il y a 4 ans, mais il a été mis à jour pour correspondre aux usages actuels.