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

Préparez un PNG carré de votre logo, idéalement 256×256 ou plus, avec transparence.
Ouvrez le convertisseur PNG vers ICO et importez-le.
Cliquez sur « Convertir » : le résultat est un ICO 256×256 (compressé en PNG, le format moderne Vista+ qui se réduit proprement).
Placez le fichier à la racine de votre site sous le nom favicon.ico.

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.

Faut-il vraiment plusieurs tailles dans un seul ICO ?

Un unique ICO en 256×256 compressé en PNG suffit pour les navigateurs modernes, qui le réduisent proprement pour l'onglet et la barre de favoris. Regrouper des tailles supplémentaires (16×16, 32×32, 48×48) dans le même ICO aide surtout les anciens logiciels Windows et la barre des tâches du bureau, où une petite icône ajustée à la main paraît plus nette qu'une réduction automatique. Si votre site est purement destiné au web, le fichier unique en 256×256 est le choix le plus simple et tout aussi efficace.

Erreurs courantes sur le favicon

Oublier complètement le fichier. Les navigateurs demandent automatiquement /favicon.ico même sans balise link, donc un fichier manquant apparaît comme une erreur 404 dans les journaux de votre serveur à chaque chargement de page.
Utiliser un logo rectangulaire sans le retoucher. Un logo texte large réduit dans un favicon carré devient généralement illisible ; recadrez plutôt sur le seul symbole ou les initiales.
Omettre l'apple-touch-icon. Sans lui, enregistrer votre site sur l'écran d'accueil d'un iPhone se rabat sur une capture de la page plutôt que sur votre icône.