Favicon

À quoi sert le favicon ?

Le favicon remplit plusieurs fonctions concrètes :

• Identification visuelle — quand un utilisateur a 15 onglets ouverts, le favicon lui permet de retrouver rapidement votre site parmi les autres.
• Crédibilité et professionnalisme — un site sans favicon affiche une icône générique de globe ou rien du tout. C’est un signal immédiat d’amateurisme. Un favicon présent montre un site soigné.
• Favoris et historique — dans la liste des favoris ou l’historique du navigateur, le favicon facilite la reconnaissance visuelle.
• Écran d’accueil mobile — quand un utilisateur ajoute votre site à l’écran d’accueil de son smartphone (progressive web app), le favicon devient l’icône de l’application.
• Résultats de recherche mobile — Google affiche le favicon à côté de votre nom de domaine dans les résultats mobiles.

Les formats et tailles de favicon

Historiquement, le favicon était un simple fichier .ico de 16×16 pixels. Aujourd’hui, les usages sont plus variés et nécessitent plusieurs versions :

• 16×16 et 32×32 px — pour les onglets de navigateur et les favoris.
• 48×48 px — icône de bureau sous Windows.
• 180×180 px (apple-touch-icon) — pour l’ajout à l’écran d’accueil iOS.
• 192×192 px et 512×512 px — pour Android et les Progressive Web Apps (manifest.json).
• Formats — ICO (historique), PNG (le plus courant), SVG (pour les favicons vectoriels modernes).

Comment créer un bon favicon

• Partir du logo, pas de l’identité complète — le favicon est trop petit pour contenir un logo avec du texte. Utilisez un symbole ou une initiale qui représente la marque.
• Simplicité maximale — en 16×16 pixels, tout détail complexe disparaît. Formes simples, contrastes marqués.
• Reconnaissable en miniature — testez votre favicon à sa taille réelle avant de valider. Ce qui est beau en 512×512 peut être illisible en 16×16.
• Fond transparent ou coloré selon les usages — certains navigateurs affichent le favicon sur fond sombre (dark mode) ou clair. Prévoir une version qui fonctionne dans les deux contextes.
• Outils de génération — des sites comme Favicon.io, Real Favicon Generator ou Favicon Generator créent automatiquement toutes les tailles et formats nécessaires à partir d’une image source.

Favicon et WordPress

Sur WordPress, le favicon se configure depuis l’outil de personnalisation : Apparence > Personnaliser > Identité du site > Icône du site. Uploadez une image carrée d’au moins 512×512 pixels, WordPress se charge de générer les différentes tailles nécessaires.

Pour une configuration plus avancée (apple-touch-icon, manifest.json pour PWA, versions dark mode), il faut passer par le thème enfant ou une extension comme “RealFaviconGenerator”. Nous utilisons généralement la configuration native de WordPress qui couvre 95% des besoins.

Besoin d’un site web au design professionnel ?