Pourquoi la taille du favicon est cruciale
Un favicon est petit… mais puissant. Il agit sur :
Reconnaissance immédiate
Même avec 50 onglets ouverts, votre logo reste identifiable.
Compatibilité multi-appareils
Desktop, mobile, écrans Retina… votre favicon reste net et clair.
Expérience utilisateur optimisée
Un favicon lisible améliore la navigation et la rétention.
SEO indirect
Une UX soignée → signaux positifs pour Google → meilleur ranking.
Les tailles et formats indispensables en 2026
Pour que votre favicon soit parfait partout :
- 16×16 / 32×32 → navigateurs classiques (onglets et favoris)
- 180×180 → Apple Touch Icon pour iOS / Safari
- 192×192 & 512×512 → PWA / Android / Chrome (écran d’accueil et splash)
- ICO multi-tailles → compatibilité Windows legacy
- SVG (optionnel) → scalabilité infinie et micro-animations
Créer et intégrer un favicon étape par étape
1. Sur un site codé “à la main”
Si vous codez votre site directement, voici comment faire :
- Préparez vos fichiers : 16×16, 32×32, 180×180, 192×192, 512×512, et favicon.ico.
- Placez-les à la racine de votre site (
/). - Ajoutez ce code dans le
<head>:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#0a0e17">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#0a0e17">
2. Sur WordPress
WordPress facilite beaucoup l’intégration des favicons :
- Allez dans Apparence → Personnaliser → Identité du site.
- Cliquez sur Ajouter un logo ou Icône du site.
- Téléchargez un PNG carré ≥ 512×512.
- WordPress génère automatiquement toutes les tailles nécessaires pour navigateurs et Apple Touch.
- Enregistrez et publiez. Vérifiez sur desktop et mobile.
3. Sur Shopify
Shopify permet aussi une intégration simple :
- Dans votre admin Shopify, allez sur Thème → Personnaliser.
- Cliquez sur Paramètres du thème → Icône du site.
- Chargez un PNG carré ≥ 512×512.
- Shopify générera automatiquement les icônes pour tous les appareils et navigateurs.
- Vérifiez sur desktop, mobile et Apple Touch pour être sûr que tout s’affiche correctement.
Générer rapidement tous les formats avec PNGSVG.fr
Avec notre outil, vous pouvez créer en 60 secondes tous vos fichiers favicon :
- Préparez votre source : SVG (ou PNG carré).
- Ouvrez l’outil Générateur de favicon sur PNGSVG.fr.
- Chargez le fichier.
- Téléchargez instantanément : 16×16, 32×32, 180×180, 192×192, 512×512 + favicon.ico.
- Intégrez en suivant les instructions pour WordPress, Shopify ou code normal.
FAQ : Taille, formats et intégration
Le plus simple est un PNG carré ≥ 512×512. Ces plateformes génèrent toutes les tailles automatiquement.
- Scalabilité parfaite, même sur écrans Retina
- Léger et rapide à charger
- Permet micro-animations et effets CSS
Indirect mais tangible :
- UX améliorée → utilisateurs restent plus longtemps
- Reconnaissance rapide → navigation facilitée
- PWA mieux installée → plus de visites récurrentes
- Ouvrez votre site sur desktop et mobile
- Ajoutez-le à l’écran d’accueil sur iOS / Android
- Vérifiez que toutes les tailles sont bien nettes et visibles