Quelle taille pour un favicon ?
Choisir la bonne taille de favicon est essentiel pour un affichage correct sur tous les navigateurs, appareils et plateformes.
Ce guide explique les tailles de favicon recommandées et dans quels cas utiliser chaque format.
Réponse rapide
En bref :
Les tailles de favicon recommandées sont 16×16, 32×32, et 48×48 pour les navigateurs, 180×180 pour les appareils Apple, et 192×192 ainsi que 512×512 pour les applications Android et PWA.
Tailles de favicon pour les navigateurs
Pour les navigateurs de bureau et mobiles, il est préférable de fournir plusieurs tailles d’icônes PNG ainsi qu’un fichier ICO multi‑tailles pour une compatibilité maximale.
| Taille | Fichier | Utilisation |
|---|---|---|
| 16×16 | favicon-16x16.png | Onglets de navigateur |
| 32×32 | favicon-32x32.png | Barres de tâches et interface |
| 48×48 | favicon-48x48.png | Raccourcis sur le bureau |
| Multi‑taille | favicon.ico | Support des anciens navigateurs |
Tailles d’icônes Apple Touch
Les appareils Apple utilisent des icônes plus grandes lorsqu’un site est ajouté à l’écran d’accueil.
| Taille | Fichier | Appareil |
|---|---|---|
| 152×152 | apple-touch-icon-152x152.png | iPad |
| 167×167 | apple-touch-icon-167x167.png | iPad Pro |
| 180×180 | apple-touch-icon.png | iPhone |
Tailles d’icônes Android et PWA
Les PWA et Android Chrome imposent des dimensions spécifiques pour les icônes.
| Taille | Fichier | Utilisation |
|---|---|---|
| 192×192 | android-chrome-192x192.png | Icône d’écran d’accueil |
| 512×512 | android-chrome-512x512.png | Lanceur d’applications et écran de démarrage |
Ces tailles sont requises pour réussir les vérifications d’installation PWA.
Taille d’un favicon SVG
Les favicons SVG sont vectoriels et ne nécessitent pas de taille fixe.
Recommandations :
- Utiliser un viewBox carré (par exemple 0 0 100 100)
- Garder le visuel centré
- Éviter les détails trop fins
Les favicons SVG restent parfaitement nets sur les écrans haute densité et lorsque l’utilisateur zoome.
Quels formats de favicon utiliser ?
| Format | Quand l’utiliser |
|---|---|
| PNG | Cas le plus courant, excellente compatibilité |
| ICO | Support des anciens navigateurs et contextes spécifiques |
| SVG | Navigateurs modernes, besoin de vectoriel et de mode sombre |
Best practice: Use PNG + ICO + SVG together.
Recommended HTML Markup
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="manifest" href="/site.webmanifest">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/android-chrome-512x512.png" sizes="512x512">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">Common Favicon Mistakes
- Using only one favicon size
- Forgetting Apple Touch Icons
- Missing PWA icons
- Using low-resolution source images
Generate All Favicon Sizes Automatically
Instead of manually resizing icons, you can generate all required favicon sizes instantly using favicon.pub. Upload a single image and download a complete package containing ICO, PNG, SVG, Apple Touch Icons, Android icons, and a PWA manifest.
Internal Links
Téléversez une image et générez un pack complet de favicons