La première impression de 16 pixels
Les favicons sont la plus petite surface de marque que vous possédez — 16×16 pixels dans un onglet de navigateur — et l'une des plus visibles. Les utilisateurs identifient votre site parmi 30 onglets ouverts grâce à ce minuscule carré. Un favicon manquant ou flou signale discrètement « inachevé ». La bonne nouvelle : bien le faire prend environ deux minutes.
De quelles tailles avez-vous vraiment besoin en 2026 ?
- 16×16 et 32×32 — onglets de navigateur et favoris (dans le fichier .ico)
- 48×48 — raccourcis de la barre des tâches Windows (dans le fichier .ico)
- 180×180 — icône tactile Apple pour l'écran d'accueil iOS
- 192×192 et 512×512 — icônes de manifest Android / PWA
- SVG (optionnel mais agréable) — infiniment net dans les navigateurs modernes avec un seul minuscule fichier
Le classique favicon.ico est en fait un conteneur contenant les versions 16, 32 et 48 px — les navigateurs choisissent la bonne. Notre générateur de favicon construit le bon ICO multi-tailles plus tous les PNG à partir d'une seule image source.
Partez de la bonne image source
C'est là que la plupart des favicons échouent. Ne réduisez pas votre logo complet détaillé — à 16 px, il devient de la bouillie. À la place :
- Utilisez un marque simplifiée : juste la partie icône de votre logo, ou même une seule lettre sur un fond aux couleurs de la marque
- Partez d'un PNG carré de 512×512 ou plus avec la marque centrée et rembourrée (gardez ~15 % de marge pour qu'elle ne touche pas les bords)
- Concevez en pensant petite taille : formes audacieuses, contraste élevé, pas de lignes fines ni de petit texte
Testez à 16 px tôt et souvent — si ce n'est pas lisible là, simplifiez davantage.
Onglets en mode sombre : le piège
Le chrome du navigateur suit désormais le mode sombre du système, donc un favicon sombre sur un fond d'onglet sombre disparaît. Deux correctifs : ajoutez un subtil fond clair ou un carré arrondi derrière votre marque, ou fournissez un favicon SVG sensible à prefers-color-scheme. Au minimum, prévisualisez votre favicon sur des barres d'onglets claires et sombres avant de le publier.
Générez le vôtre en une fois
Ajoutez votre image source à notre générateur de favicon — il produit l'ICO multi-tailles, toutes les tailles PNG et un aperçu en direct aux vraies tailles d'onglets. Téléchargez individuellement ou récupérez tout en ZIP, déposez les fichiers à la racine de votre site et ajoutez les balises de lien. Deux minutes, fait correctement.
Questions fréquentes
- ICO est-il encore nécessaire, ou PNG suffit-il ?
- ICO reste le choix par défaut le plus sûr — chaque navigateur le prend en charge, y compris les anciens, et il regroupe plusieurs tailles en une seule requête. Servez les tailles PNG à côté pour le mobile/PWA. Ceinture et bretelles, coût négligeable.
- Pourquoi mon favicon est-il flou ?
- Presque toujours l'une des deux causes : vous avez agrandi une petite image source (partez de 512 px+), ou le navigateur étire votre icône 16 px en 32 px sur un écran retina (fournissez l'ICO multi-tailles pour qu'il choisisse correctement).
- Comment ajouter le favicon à mon site ?
- Placez
favicon.icoà la racine de votre site (les navigateurs y vérifient automatiquement) et ajoutez des balises<link rel="icon">pour les tailles PNG plusapple-touch-icon. Si vous êtes sur Next.js, la conventionapp/icon.pnggère la plupart de cela pour vous.