Guide Favicon 2026 : Tailles, formats et génération

Les favicons sont les petites icones qui apparaissent dans les onglets du navigateur, les signets, les ecrans d'accueil et les selecteurs d'applications. Malgre leur petite taille, ils ont un impact important sur la reconnaissance de la marque et l'experience utilisateur. Ce guide complet des favicons vous dit exactement ce dont vous avez besoin en 2026, pourquoi et comment les generer.

Configuration Minimale : Seulement 3 Fichiers Necessaires

En 2026, vous n'avez besoin que de trois fichiers pour couvrir tous les navigateurs, appareils et plateformes modernes :

En option, vous pouvez ajouter un favicon SVG pour une mise a l'echelle infinie et le support du mode sombre. Mais ces trois fichiers seuls offrent une couverture complete.

<!-- The minimal favicon setup for 2026 -->
<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">
<link rel="manifest" href="/manifest.webmanifest">

Reference Complete des Tailles de Favicon

Voici le tableau de reference definitif pour chaque taille de favicon, son objectif et son utilisation :

Les tailles les plus demandees sont 32x32 (onglets), 180x180 (appareils Apple) et 512x512 (ecrans de demarrage PWA). Ces trois seules couvrent plus de 99% des cas.

Comparaison des Formats : ICO vs PNG vs SVG

Le choix du bon format de favicon est important. Chaque format a des avantages et des compromis distincts :

Recommandation : Utilisez ICO pour le fallback /favicon.ico, PNG pour l'Apple Touch Icon et les icones du manifeste, et optionnellement SVG pour les navigateurs modernes.

Etape par Etape : Creation de Favicons

Depuis Figma

Programmation avec Sharp (Node.js)

Automatisez la generation de favicons a partir d'une image source haute resolution avec la bibliotheque sharp :

import sharp from 'sharp';

// Generate multiple sizes from a single source
const sizes = [16, 32, 48, 180, 192, 512];

async function generateFavicons(sourceFile: string) {
  for (const size of sizes) {
    await sharp(sourceFile)
      .resize(size, size, {
        fit: 'contain',
        background: { r: 0, g: 0, b: 0, alpha: 0 },
      })
      .png({ quality: 90, compressionLevel: 9 })
      .toFile(`favicon-${size}x${size}.png`);

    console.log(`Generated favicon-${size}x${size}.png`);
  }
}

generateFavicons('icon-source.png');

Pour generer le fichier ICO, utilisez le package png-to-ico :

import pngToIco from 'png-to-ico';
import { writeFileSync } from 'fs';

async function generateIco() {
  // Include 16x16, 32x32, and 48x48 in a single ICO file
  const icoBuffer = await pngToIco([
    'favicon-16x16.png',
    'favicon-32x32.png',
    'favicon-48x48.png',
  ]);
  writeFileSync('favicon.ico', icoBuffer);
  console.log('Generated favicon.ico');
}

generateIco();

Script de Build Complet

Voici un script Node.js complet qui genere tous les fichiers favicon necessaires a partir d'un seul PNG source :

#!/usr/bin/env node
// generate-favicons.mjs
// Usage: node generate-favicons.mjs icon-source.png

import sharp from 'sharp';
import pngToIco from 'png-to-ico';
import { writeFileSync, mkdirSync } from 'fs';

const SOURCE = process.argv[2] || 'icon-source.png';
const OUT_DIR = './public';

mkdirSync(OUT_DIR, { recursive: true });

async function main() {
  // 1. Generate PNG sizes
  const pngSizes = [
    { size: 16, name: 'favicon-16x16.png' },
    { size: 32, name: 'favicon-32x32.png' },
    { size: 48, name: 'favicon-48x48.png' },
    { size: 180, name: 'apple-touch-icon.png' },
    { size: 192, name: 'icon-192x192.png' },
    { size: 512, name: 'icon-512x512.png' },
  ];

  for (const { size, name } of pngSizes) {
    await sharp(SOURCE)
      .resize(size, size, {
        fit: 'contain',
        background: { r: 0, g: 0, b: 0, alpha: 0 },
      })
      .png({ compressionLevel: 9 })
      .toFile(`${OUT_DIR}/${name}`);
    console.log(`  Created ${name}`);
  }

  // 2. Generate ICO (combines 16, 32, 48)
  const icoBuffer = await pngToIco([
    `${OUT_DIR}/favicon-16x16.png`,
    `${OUT_DIR}/favicon-32x32.png`,
    `${OUT_DIR}/favicon-48x48.png`,
  ]);
  writeFileSync(`${OUT_DIR}/favicon.ico`, icoBuffer);
  console.log('  Created favicon.ico');

  // 3. Generate manifest.webmanifest
  const manifest = {
    name: 'Your App Name',
    short_name: 'App',
    icons: [
      { src: '/icon-192x192.png', sizes: '192x192', type: 'image/png' },
      { src: '/icon-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'any maskable' },
    ],
    theme_color: '#ffffff',
    background_color: '#ffffff',
    display: 'standalone',
  };
  writeFileSync(
    `${OUT_DIR}/manifest.webmanifest`,
    JSON.stringify(manifest, null, 2)
  );
  console.log('  Created manifest.webmanifest');

  console.log('\nDone! All favicon files generated.');
}

main().catch(console.error);

Balisage HTML : Balises Link et Manifeste

Ajoutez ces balises au <head> de chaque page de votre site :

<head>
  <!-- Favicon: ICO fallback for legacy browsers -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">

  <!-- Favicon: SVG for modern browsers (scalable + dark mode) -->
  <link rel="icon" href="/icon.svg" type="image/svg+xml">

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

  <!-- Web App Manifest: Android + PWA -->
  <link rel="manifest" href="/manifest.webmanifest">

  <!-- Optional: theme color for browser chrome -->
  <meta name="theme-color" content="#ffffff"
        media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#1a1a2e"
        media="(prefers-color-scheme: dark)">
</head>

Creez un manifest.webmanifest dans votre repertoire racine :

{
  "name": "Your Application Name",
  "short_name": "AppName",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/"
}

Le fichier manifeste indique aux environnements Android et PWA quelles icones utiliser. La valeur "purpose": "any maskable" assure que l'icone fonctionne comme icone standard et dans le masque adaptatif Android.

Favicons Mode Sombre avec SVG

L'une des fonctionnalites les plus puissantes des favicons SVG est la capacite de s'adapter au theme de l'utilisateur via CSS prefers-color-scheme :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <style>
    /* Light mode (default) */
    .icon-bg { fill: #1a1a2e; }
    .icon-fg { fill: #ffffff; }

    /* Dark mode override */
    @media (prefers-color-scheme: dark) {
      .icon-bg { fill: #e0e0e0; }
      .icon-fg { fill: #1a1a2e; }
    }
  </style>

  <!-- Background circle -->
  <circle class="icon-bg" cx="64" cy="64" r="60" />

  <!-- Foreground shape (your logo/icon) -->
  <path class="icon-fg"
        d="M44 40 h40 v12 H56 v8 h24 v12 H56 v16 H44 V40z" />
</svg>

Ce favicon SVG bascule automatiquement entre les versions sombre et claire selon les preferences du systeme. Aucun JavaScript requis. Fonctionne dans Chrome, Firefox et Edge.

Reference this SVG in your HTML:

<!-- SVG favicon with automatic dark mode -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">

<!-- ICO fallback for browsers that don't support SVG favicons -->
<link rel="icon" href="/favicon.ico" sizes="32x32">

Tester vos Favicons sur Chaque Plateforme

Apres avoir genere vos favicons, testez-les sur toutes les plateformes :

Quick checklist for verifying your favicon setup:

# Verify all favicon files exist and are accessible
curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/favicon.ico
# Expected: 200

curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/icon.svg
# Expected: 200

curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/apple-touch-icon.png
# Expected: 200

curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/manifest.webmanifest
# Expected: 200

# Validate manifest JSON
curl -s https://yoursite.com/manifest.webmanifest | python3 -m json.tool
# Should output formatted JSON without errors

Questions Frequentes

Quel est le nombre minimum de fichiers favicon necessaires ?

Vous avez besoin d'un minimum de trois fichiers : favicon.ico (32x32), apple-touch-icon.png (180x180) et un PNG 512x512 reference dans votre manifest.webmanifest. Ces trois fichiers couvrent plus de 99% des appareils en 2026.

Faut-il utiliser SVG ou PNG pour le favicon ?

Utilisez les deux. PNG est requis pour l'Apple Touch Icon et les icones du manifeste. SVG est excellent pour l'onglet du navigateur car il s'adapte parfaitement et supporte le mode sombre.

La taille du favicon affecte-t-elle la vitesse de chargement ?

Les fichiers favicon sont generalement tres petits (moins de 15 Ko) et sont mis en cache agressivement par les navigateurs. L'impact sur la vitesse est negligeable.

Comment faire changer le favicon en mode sombre ?

Utilisez un favicon SVG avec un bloc <style> contenant une requete @media (prefers-color-scheme: dark). Fonctionne dans Chrome, Firefox et Edge.

A quoi servent les icones maskable dans le manifeste ?

Les icones maskable sont concues pour le systeme d'icones adaptatives d'Android, ou l'OS recadre l'icone en differentes formes. L'icone inclut un rembourrage supplementaire pour que les parties importantes ne soient pas coupees.

A-t-on encore besoin d'un fichier favicon.ico en 2026 ?

Oui. Bien que les navigateurs modernes supportent PNG et SVG, de nombreux outils demandent automatiquement /favicon.ico. L'inclure ne coute presque rien et evite les erreurs 404.