Quelle doit être la taille d'une favicon ?

La taille minimale d'une favicon pour un onglet de navigateur est de 16×16 pixels. Cependant, une configuration moderne inclut plusieurs tailles : 16×16, 32×32 et 48×48 pour les navigateurs ; 180×180 pour l'icône tactile Apple ; 192×192 et 512×512 pour les manifestes Android/PWA. Commencez par une image source de 512×512 pixels et générez toutes les tailles à partir de celle-ci.

Quel format doit avoir une favicon ?

Les navigateurs modernes prennent en charge les favicons aux formats ICO, PNG et SVG. Il est recommandé d'utiliser un favicon SVG pour les navigateurs modernes (redimensionnable à l'infini, fichier très léger), un PNG 32×32 comme solution de repli et une icône Apple Touch au format PNG 180×180. Un fichier ICO contenant les formats 16×16 et 32×32 est destiné aux navigateurs plus anciens.

Pourquoi mon favicon ne s'affiche-t-il pas dans le navigateur ?

Raisons fréquentes : le fichier favicon est introuvable, la balise HTML link est manquante ou son attribut type est incorrect, ou le navigateur a mis en cache une ancienne favicon. Essayez d’actualiser la page (Ctrl+Maj+R ou Cmd+Maj+R) pour forcer le navigateur à recharger la favicon.

Ai-je besoin d'un fichier ICO ou puis-je utiliser un fichier PNG ?

Les navigateurs modernes (Chrome, Firefox, Safari, Edge) prennent tous en charge les favicons au format PNG. Un fichier ICO est uniquement nécessaire pour la compatibilité avec Internet Explorer. Si votre application n'est pas destinée à Internet Explorer, un fichier PNG 32×32 pixels convient parfaitement à l'onglet du navigateur ; vous pouvez alors vous passer du fichier ICO.

À quoi doit ressembler une bonne favicon ?

Une bonne favicon est une version simplifiée de votre logo ou de votre marque, parfaitement lisible aux formats 16×16 et 32×32 pixels. Évitez les petits caractères, les dégradés complexes et les détails fins : ils deviennent illisibles en petit format. Une simple initiale, une icône simple ou une forme audacieuse sont les solutions les plus efficaces.

Comment créer une favicon : guide complet pour tous les navigateurs et appareils

Une favicon (abréviation de « icône des favoris ») apparaît dans les onglets du navigateur, les favoris et sur l’écran d’accueil des appareils mobiles. C’est un élément de marque discret mais important, et sa mise en œuvre correcte sur tous les navigateurs et appareils est étonnamment complexe. Voici comment procéder.

Qu'est-ce qu'une favicon ?

Une favicon est la petite icône associée à un site web. Elle apparaît :

Dans l'onglet du navigateur, à côté du titre de votre page
Dans les favoris et l'historique du navigateur
Sur les écrans d'accueil iOS/Android lorsqu'un utilisateur enregistre votre site (icône tactile Apple)
Dans les installateurs PWA, sous forme d'icône d'application
Dans les résultats des moteurs de recherche (parfois)

Une configuration complète de favicon nécessite plusieurs tailles et formats pour couvrir tous ces contextes.

Tailles requises pour les favicons

Taille	Usage
16×16 px	Onglet de navigateur (standard)
32×32 px	Onglet de navigateur (haute résolution), barre des tâches
48×48 px	Icônes de site Windows
180×180 px	Icône tactile Apple (écran d'accueil iOS)
192×192 px	Écran d'accueil Chrome pour Android
512×512 px	Écran de démarrage PWA, contextes haute résolution
SVG	Navigateurs modernes (mise à l'échelle infinie)

Étape 1 : Commencez avec une image source haute résolution

Créez ou exportez votre logo/icône au format 512 × 512 pixels minimum, au format PNG carré avec fond transparent. Ce fichier servira à générer toutes les tailles inférieures.

Conseils pour une conception compatible avec les favicons :

Faites simple — les designs complexes ne sont pas lisibles sur un écran de 16×16 pouces.
Utilisez un contraste élevé — fonds clairs avec icônes foncées ou inversement
Évitez les traits fins — ils disparaissent aux petits formats.
Testez à une résolution de 16×16 — effectuez un zoom arrière dans votre outil de conception pour vérifier la lisibilité.

Étape 2 : Générer toutes les tailles de favicon

Au lieu de redimensionner manuellement chaque image à la taille requise, utilisez un générateur de favicon. Le générateur de favicon de PicsSizer prend votre image source et produit un package complet :

Téléversez votre image source PNG de 512×512 pixels (ou plus grande).
Prévisualisez l'apparence pour chaque taille.
Téléchargez le pack complet de favicon avec toutes les tailles requises

Étape 3 : Ajouter le code HTML

Placez ces balises dans <head> de votre code HTML :

<!-- Standard favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

<!-- Apple touch icon (iOS home screen) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

<!-- Android / PWA manifest -->
<link rel="manifest" href="/site.webmanifest" />

Étape 4 : Créer le manifeste de l’application Web

Pour les icônes de l'écran d'accueil Android et la prise en charge des PWA, créez un fichier site.webmanifest :

{
  "name": "Your Site Name",
  "short_name": "SiteName",
  "icons": [
    {
      "src": "/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

L'approche des favicons SVG

Pour les navigateurs modernes, une favicon SVG est idéale :

Infiniment adaptable — netteté garantie quelle que soit la résolution
Taille de fichier très réduite — souvent moins de 2 Ko
Compatible avec le mode sombre — vous pouvez utiliser des requêtes média CSS dans les fichiers SVG.

<link rel="icon" href="/favicon.svg" type="image/svg+xml" />

Avec une requête média pour le mode sombre à l'intérieur du SVG :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    @media (prefers-color-scheme: dark) {
      .icon { fill: white; }
    }
    .icon { fill: black; }
  </style>
  <rect class="icon" width="32" height="32" rx="4" />
</svg>

Tous les navigateurs modernes (Chrome, Firefox, Safari 14+, Edge) prennent en charge les favicons SVG.

Dépannage des problèmes courants liés aux favicons

L'icône du favicon ne s'affiche pas :

Vérifiez que le fichier existe à l'emplacement spécifié dans href
Actualisez votre navigateur (Ctrl+Maj+R / Cmd+Maj+R)
Vérifiez l'onglet Réseau des outils de développement de votre navigateur pour les erreurs 404 lors des requêtes de favicon.

L'icône du favicon s'affiche sur ordinateur mais pas sur mobile :

Assurez-vous que apple-touch-icon est configuré pour iOS
Assurez-vous que le fichier manifeste web existe et est lié pour Android

L'ancienne icône de la marque s'affiche toujours après la mise à jour :

Les navigateurs mettent en cache les favicons de manière agressive. Ajoutez une chaîne de requête pour contourner le cache : href="/favicon.png?v=2"

Icône de profil floue ou pixélisée :

Régénérer à partir d'une image source à plus haute résolution (512×512 minimum)
Vérifiez que vous utilisez la bonne taille pour chaque contexte

Liste de vérification complète des favicons

Utilisez PicsSizer's Favicon Generator pour générer l'ensemble du package à partir d'une seule image, ou consultez le Favicon Size Guide pour la référence complète.

Redimensionner

Convertir

Compresse

Améliorer et analyser