Comment créer un favicon : guide PNG vers ICO

Un favicon est la petite icône dans l'onglet du navigateur, les favoris et les résultats de recherche. Un favicon manquant ou cassé donne à un site une apparence inachevée, et Google affiche désormais les favicons à côté des résultats de recherche mobile, ce qui affecte directement les clics.

Pourquoi ICO et pas simplement PNG ?

Les navigateurs modernes acceptent les favicons en PNG, mais le classique favicon.ico reste le choix le plus sûr : c'est ce que les navigateurs demandent par défaut à l'adresse /favicon.ico, ce qu'attendent les anciens navigateurs et certains outils, et le conteneur ICO peut stocker plusieurs résolutions dans un seul fichier.

Créer un ICO à partir de votre logo

  1. Préparez un PNG carré de votre logo, idéalement 256×256 ou plus, avec transparence.
  2. Ouvrez le convertisseur PNG vers ICO et importez-le.
  3. Cliquez sur « Convertir » : le résultat est un ICO 256×256 (compressé en PNG, le format moderne Vista+ qui se réduit proprement).
  4. Placez le fichier à la racine de votre site sous le nom favicon.ico.
Emplacement publicitaire — activez les annonces dans public/ads.js · article-mid

Le HTML

Pour une couverture complète, ajoutez à votre <head> :

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> (PNG 180×180 pour iOS)

Conseils de design

  • Testez en 16×16 : les détails fins disparaissent, les formes simples et épaisses l'emportent.
  • Conservez le contraste aussi bien sur les thèmes clairs que sombres du navigateur.
  • La transparence est plus esthétique qu'un fond blanc uni.