Comment créer un Favicon pour votre site web — Guide complet

Qu'est-ce qu'un favicon et pourquoi est-il important ?

Un favicon (abréviation de « favorite icon ») est la petite icône qui apparaît dans les onglets du navigateur, les favoris, les listes d'historique et les résultats de recherche à côté du nom de votre site web. Malgré sa petite taille, un favicon joue un rôle significatif dans la façon dont les utilisateurs perçoivent et interagissent avec votre site.

Pensez à la façon dont vous gérez plusieurs onglets de navigateur ouverts. Quand vous avez dix onglets ou plus qui se disputent l'espace, le favicon est souvent le seul identifiant visuel qui vous aide à trouver la bonne page. Sans favicon, votre site affiche une icône de document vierge générique — un signal immédiat que le site est peut-être inachevé ou peu fiable.

Les favicons contribuent à votre site de plusieurs façons importantes :

• Reconnaissance de la marque — Un favicon cohérent renforce votre identité de marque sur chaque navigateur et appareil
• Expérience utilisateur — Les visiteurs peuvent rapidement localiser votre onglet parmi des dizaines de pages ouvertes
• Professionnalisme — Un favicon manquant suggère un manque d'attention aux détails
• Visibilité dans les recherches — Google et d'autres moteurs de recherche affichent les favicons dans les résultats mobiles
• Favoris et écrans d'accueil — Quand les utilisateurs sauvegardent votre site, le favicon devient le raccourci visuel qu'ils associent à votre marque

En bref, un favicon est l'un des plus petits assets de votre site web, mais son absence est immédiatement remarquable.

Les tailles de favicon expliquées

L'un des points les plus déroutants est quelles tailles vous avez réellement besoin. Différents navigateurs, systèmes d'exploitation et appareils demandent différentes tailles d'icône.

16x16 — Onglet de navigateur (Legacy)

La taille de favicon originale, encore utilisée dans certains anciens navigateurs pour les icônes d'onglets.

32x32 — Onglet de navigateur (Standard)

C'est la taille principale pour les onglets de navigateur de bureau en 2026. Chrome, Firefox, Safari et Edge utilisent tous cette taille pour afficher l'icône d'onglet.

48x48 — Barre des tâches Windows

Windows utilise la variante 48x48 quand un site web est épinglé à la barre des tâches.

180x180 — Apple Touch Icon

Quand un utilisateur iOS ajoute votre site à son écran d'accueil, Safari utilise un PNG 180x180 comme icône d'application.

192x192 — Android Chrome

Android Chrome utilise une icône 192x192 pour la fonctionnalité « Ajouter à l'écran d'accueil » et les manifestes d'applications web progressives (PWA).

512x512 — Écran de démarrage PWA

L'icône 512x512 est utilisée pour les écrans de démarrage PWA sur les appareils Android.

Tableau de référence rapide

Taille	Utilisation	Format	Requis ?
16x16	Onglets legacy	ICO	Recommandé
32x32	Onglets bureau	ICO/PNG	Oui
48x48	Barre des tâches Windows	ICO/PNG	Recommandé
180x180	Apple Touch Icon	PNG	Oui
192x192	Écran accueil Android, PWA	PNG	Oui
512x512	Écran démarrage PWA	PNG	Pour PWAs

Formats de favicon : ICO vs PNG vs SVG

ICO — Le format universel

Le format ICO est le standard depuis que Microsoft a introduit les favicons dans Internet Explorer 5. Un fichier ICO peut regrouper plusieurs tailles (16x16, 32x32, 48x48) en un seul fichier.

PNG — Le standard moderne

Les favicons PNG offrent une meilleure compression, un support de la transparence et un rendu plus net à des tailles spécifiques. La plupart des navigateurs modernes (Chrome, Firefox, Edge, Safari 12+) supportent entièrement les favicons PNG.

SVG — L'avenir scalable

Les favicons SVG sont vectoriels, ce qui signifie qu'un seul fichier a l'air net à toutes les résolutions. Ils supportent également les media queries CSS, permettant l'adaptation automatique au mode sombre :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    rect { fill: #1a1a2e; }
    @media (prefers-color-scheme: dark) {
      rect { fill: #e0e0e0; }
    }
  </style>
  <rect width="32" height="32" rx="6" />
  <text x="16" y="22" text-anchor="middle" fill="#fff" font-size="18" font-weight="bold">T</text>
</svg>

Quel format utiliser ?

L'approche recommandée en 2026 est de fournir les trois :

1. Un fichier ICO contenant les tailles 16x16, 32x32 et 48x48 pour une compatibilité maximale
2. Des fichiers PNG à 180x180 et 192x192 pour les appareils Apple et Android
3. Un fichier SVG pour les navigateurs modernes avec support du mode sombre

Comment créer un favicon

Option 1 : Utiliser un générateur de favicon en ligne

Le moyen le plus rapide de créer un package de favicon complet est d'utiliser un outil dédié. Essayez notre générateur de favicon gratuit — il accepte n'importe quelle image et génère automatiquement toutes les tailles et formats dont vous avez besoin.

Option 2 : Concevoir de zéro dans un éditeur graphique

Si vous voulez un contrôle créatif total, commencez avec un canvas 512x512 dans Figma, Adobe Illustrator ou Inkscape.

1. Créez un nouveau plan de travail 512x512
2. Concevez votre icône avec la simplicité en tête — les détails fins seront perdus à 16x16
3. Exportez des versions PNG à 512, 192, 180, 48, 32 et 16 pixels
4. Convertissez les petites tailles en fichier ICO avec un outil comme ImageMagick

Générer un fichier ICO avec ImageMagick

# Générer des tailles individuelles à partir d'une image source
magick source-512.png -resize 16x16 favicon-16.png
magick source-512.png -resize 32x32 favicon-32.png
magick source-512.png -resize 48x48 favicon-48.png

# Les regrouper dans un seul fichier ICO
magick favicon-16.png favicon-32.png favicon-48.png favicon.ico

Code HTML pour ajouter des favicons à votre site

Ajoutez les balises suivantes dans la section <head> de votre HTML :

<head>
  <!-- Favicon standard (ICO pour support universel) -->
  <link rel="icon" href="/favicon.ico" sizes="48x48" />

  <!-- Favicon SVG pour navigateurs modernes avec support mode sombre -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />

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

  <!-- Manifeste d'application web pour Android et PWAs -->
  <link rel="manifest" href="/site.webmanifest" />
</head>

Votre fichier site.webmanifest doit référencer les icônes PNG plus grandes :

{
  "name": "Votre Site Web",
  "short_name": "VotreSite",
  "icons": [
    {
      "src": "/favicon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Implémentation spécifique aux frameworks

Next.js (App Router) :

// app/layout.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: "/favicon.ico", sizes: "48x48" },
      { url: "/favicon.svg", type: "image/svg+xml" },
    ],
    apple: "/apple-touch-icon.png",
  },
};

Meilleures pratiques pour 2026

Fournir plusieurs formats

Ne vous fiez pas à un seul fichier favicon. Fournissez ICO pour les navigateurs legacy, PNG pour Apple et Android, et SVG pour les navigateurs modernes.

Supporter le mode sombre avec SVG

De plus en plus d'utilisateurs naviguent en mode sombre. Un favicon SVG avec une media query prefers-color-scheme adaptera automatiquement ses couleurs au thème système de l'utilisateur.

Garder le design simple

Votre favicon sera rendu aussi petit que 16x16 pixels. À cette taille, les dégradés subtils, les lignes fines et les petits textes sont invisibles. Utilisez des formes en gras, des couleurs à fort contraste et peu de détails.

Optimiser la taille du fichier

Les favicons se chargent à chaque visite de page. Passez vos fichiers PNG dans un optimiseur comme pngquant ou optipng. Les fichiers SVG doivent être nettoyés avec svgo.

# Optimiser les favicons PNG
pngquant --quality=65-80 favicon-192.png -o favicon-192.png
optipng -o7 favicon-32.png

# Optimiser le favicon SVG
svgo favicon.svg -o favicon.svg

Utiliser un manifeste d'application web

Même si vous ne construisez pas une PWA, un fichier site.webmanifest indique à Android Chrome où trouver vos icônes et définit la couleur thème de votre application.

Erreurs courantes à éviter

Utiliser uniquement favicon.ico

S'appuyer sur un seul fichier ICO signifie que votre icône semblera floue sur les appareils Apple et Android haute résolution. Incluez toujours des fichiers PNG dédiés à 180x180 et 192x192.

Ignorer l'Apple Touch Icon

Si vous omettez l'apple-touch-icon, iOS fera une capture d'écran de votre page et l'utilisera comme icône d'écran d'accueil. Le résultat est presque toujours une capture illisible et zoomée de votre mise en page.

Oublier de vider le cache après les mises à jour

Les navigateurs mettent agressivement en cache les favicons. Quand vous mettez à jour votre icône, les utilisateurs peuvent voir l'ancienne version pendant des jours ou des semaines. Ajoutez un paramètre de version pour forcer un rafraîchissement :

<link rel="icon" href="/favicon.ico?v=2" sizes="48x48" />

Conclusion

Un favicon bien implémenté est un petit détail qui reflète la qualité globale de votre site web. En fournissant les bonnes tailles, formats et balises HTML, vous vous assurez que votre marque est représentée de manière cohérente sur chaque navigateur, appareil et plateforme.

Pour démarrer rapidement, utilisez notre générateur de favicon gratuit pour créer tous les fichiers dont vous avez besoin à partir d'une seule image source. Téléchargez votre logo ou design, téléchargez le package complet et ajoutez les balises HTML à votre site — le processus entier prend moins d'une minute.

Les points clés pour 2026 : servez ICO, PNG et SVG ensemble ; supportez le mode sombre avec une media query SVG ; gardez votre design simple et en gras ; et testez toujours vos favicons sur de vrais appareils avant de les mettre en ligne.