Favicon : créer l'icône de son site web

Qu'est-ce qu'un favicon ?

Le favicon (contraction de "favorite icon") est la petite icône qui s'affiche dans l'onglet de votre navigateur, dans vos favoris, et sur l'écran d'accueil mobile quand un utilisateur ajoute votre site. C'est un détail qui fait toute la différence en termes de professionnalisme : un site sans favicon semble inachevé.

Les formats et tailles à connaître

Usage	Taille	Format
Onglet navigateur	16×16px, 32×32px	ICO ou PNG
Favoris Windows	16×16px	ICO
Raccourci Android	192×192px	PNG
App iOS (Apple Touch)	180×180px	PNG
PWA (Progressive Web App)	512×512px	PNG

En pratique, la plupart des générateurs de favicon créent automatiquement toutes ces tailles à partir d'une image source haute résolution.

Créer votre favicon en 3 étapes

Étape 1 — Préparer votre image source

Idéalement, utilisez votre logomark (la partie icône de votre logo, sans le texte) en PNG avec fond transparent, à 512×512px minimum. Le pack final du Pack Logo inclut un fichier ICO lorsque votre logo comporte une icône détectable — il contient déjà les tailles 16, 32 et 48px.

Étape 2 — Générer le pack favicon

Si vous voulez générer un pack complet (ICO + PNG toutes tailles + manifest.json) :

favicon.io : le plus simple, gratuit, génère tout en un clic
realfavicongenerator.net : le plus complet, prévisualisation sur tous les appareils

Étape 3 — Intégrer dans votre site

Dans le <head> de votre HTML :

<link rel="icon" type="image/ico" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

Sur Next.js (App Router) : placez votre favicon.ico directement dans le dossier /app. Next.js le détecte automatiquement.

Sur WordPress : Apparence → Personnaliser → Identité du site → Icône du site.

Design : qu'est-ce qui fait un bon favicon ?

Un favicon doit être reconnaissable à 16×16px. Quelques règles :

Utilisez une seule lettre, une initiale, ou un pictogramme simple — jamais le logo complet avec texte
Contraste élevé entre l'icône et le fond (clair ou transparent)
Evitez les détails fins : ils disparaissent à petite taille
Testez en simulant l'onglet navigateur (barre de titre sombre)

BrandMotion Lab et le favicon

Lorsqu'une icône est détectée dans votre logo, le pack final du Pack Logo contient un fichier ICO : la version optimisée du logomark pour les petites tailles. Vous pouvez l'utiliser directement comme favicon de votre site, ou l'importer dans favicon.io pour générer le pack complet.