Créer un favicon : le guide complet pour tous les navigateurs

Un favicon (abréviation de « favorites icon ») apparaît dans les onglets du navigateur, les favoris et sur les écrans d'accueil mobiles. C'est un point de branding petit mais important — et il est étonnamment complexe à mettre en œuvre correctement sur tous les navigateurs et appareils. Voici exactement comment procéder.

Qu'est-ce qu'un favicon ?

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

• Dans l'onglet du navigateur, à côté du titre de la page
• Dans les favoris et l'historique du navigateur
• Sur les écrans d'accueil iOS/Android quand un utilisateur enregistre votre site (Apple touch icon)
• Dans les installateurs de PWA comme 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.

Les tailles de favicon requises

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

Créez ou exportez votre logo/icône à 512×512 pixels minimum, en PNG carré avec un fond transparent. Ce sera votre source pour générer toutes les tailles plus petites.

Conseils pour un design adapté au favicon :

• Restez simple — les designs complexes ne se lisent pas à 16×16
• Utilisez un contraste élevé — fonds clairs avec icônes sombres, ou l'inverse
• Évitez les lignes fines — elles disparaissent aux petites tailles
• Testez à 16×16 — dézoomez dans votre outil de design pour vérifier la lisibilité

Étape 2 : générez toutes les tailles de favicon

Plutôt que de redimensionner manuellement pour chaque 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 :

1. Importez votre PNG source de 512×512 (ou plus grand)
2. Prévisualisez son rendu à chaque taille
3. Téléchargez le package de favicon complet avec toutes les tailles requises

Étape 3 : ajoutez le code HTML

Placez ces balises dans le <head> de votre 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éez le manifeste de l'application web

Pour les icônes d'écran d'accueil Android et la prise en charge 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 du favicon SVG

Pour les navigateurs modernes, un favicon SVG est idéal :

• Redimensionnable à l'infini — net à toute résolution
• Taille de fichier minuscule — souvent moins de 2 Ko
• Prend en charge le mode sombre — vous pouvez utiliser des media queries CSS à l'intérieur du SVG

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

Avec une media query 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.

Résolution des problèmes courants de favicon

Le favicon ne s'affiche pas :

• Vérifiez que le fichier existe bien au chemin indiqué dans le href
• Actualisez votre navigateur en forçant le cache (Ctrl+Shift+R / Cmd+Shift+R)
• Vérifiez l'onglet Réseau des DevTools du navigateur pour repérer des erreurs 404 sur les requêtes de favicon

Le favicon s'affiche sur ordinateur mais pas sur mobile :

• Assurez-vous que apple-touch-icon est défini pour iOS
• Assurez-vous que le manifeste web existe et est bien lié pour Android

L'ancien favicon s'affiche encore après une mise à jour :

• Les navigateurs mettent le favicon en cache de façon agressive. Ajoutez une chaîne de requête pour forcer le rafraîchissement : href="/favicon.png?v=2"

Le favicon est flou ou pixelisé :

• Régénérez-le à partir d'une image source de résolution plus élevée (512×512 minimum)
• Vérifiez que vous utilisez la bonne taille pour chaque contexte

Liste de vérification complète du favicon

• Image source à 512×512 px (PNG transparent)
• favicon.ico (16×16 + 32×32 dans l'ICO, pour Internet Explorer historique)
• favicon-16x16.png
• favicon-32x32.png
• apple-touch-icon.png (180×180)
• android-chrome-192x192.png
• android-chrome-512x512.png
• favicon.svg (facultatif mais recommandé)
• site.webmanifest
• Balises HTML <link> dans le <head>

Utilisez le générateur de favicon de PicsSizer pour générer l'ensemble du package à partir d'une seule image, ou consultez le Guide des tailles de favicon pour la référence complète.