Guide
Taille d'un favicon : les tailles et formats nécessaires
Un favicon s'affiche à de nombreuses tailles, de l'onglet de 16 pixels à l'icône d'application de 512 pixels. Ce guide liste les tailles qui comptent et la façon de les ajouter.
Taille de favicon pour un site web : la liste courte
| Taille | Fichier | Où elle sert |
|---|---|---|
| 16 × 16 px | favicon.ico | Onglets et favoris |
| 32 × 32 px | favicon.ico | Onglets sur écran haute densité, raccourcis Windows |
| 48 × 48 px | favicon.ico | Windows et résultats de recherche Google |
| 180 × 180 px | apple-touch-icon.png | Écran d'accueil de l'iPhone et de l'iPad |
| 192 × 192 px | icon-192.png | Android et applications web installées |
| 512 × 512 px | icon-512.png | Écrans de démarrage et boutiques d'applications pour les applications web |
Un favicon.ico qui contient les tailles 16, 32 et 48 px, plus les trois fichiers PNG, couvre les navigateurs, les téléphones et les moteurs de recherche. Notre générateur de favicon les crée tous à partir d'une seule image.
Dimensions du favicon pour la recherche Google
Google affiche les favicons à côté des résultats de recherche. Ses consignes exigent un favicon carré d'au moins 8 × 8 pixels et en recommandent un de plus de 48 × 48 pixels pour un bon rendu sur les différentes surfaces (Google Search Central). Un favicon.ico avec une image de 48 px, ou un PNG lié de 192 px, respecte cette recommandation.
Format du favicon : ICO, PNG et SVG
- ICO contient plusieurs tailles dans un seul fichier, et c'est ce que les navigateurs demandent à l'adresse
/favicon.icoquand aucune icône n'est déclarée. Gardez-en un pour la compatibilité. - PNG sert pour l'icône Apple touch et pour les icônes d'application listées dans le manifeste web.
- SVG fonctionne comme favicon dans les navigateurs récents et reste net à toutes les tailles. Ajoutez-le comme icône supplémentaire, pas comme seule icône.
Pour transformer un PNG existant en .ico avec les tailles de votre choix, utilisez le convertisseur PNG en ICO.
Favicon en HTML : les balises à ajouter
Placez les fichiers à la racine de votre site et ajoutez ces balises dans le <head> :
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">Le manifeste liste les icônes de 192 et 512 px. Supprimez la ligne du SVG si vous n'avez pas de version SVG.
Taille du favicon sur WordPress, Shopify et Squarespace
Les créateurs de sites demandent une seule image et génèrent eux-mêmes les tailles. WordPress l'appelle Icône du site et demande une image carrée d'au moins 512 × 512 pixels. Shopify et Squarespace acceptent eux aussi une image carrée dans leurs réglages de marque ou de design. Importez un grand PNG carré et laissez la plateforme le redimensionner ; vérifiez ensuite le résultat dans un onglet du navigateur.