Les tailles de favicon expliquées

Le favicon de 16 × 16 pixels est le standard Web d'origine. Il est utilisé dans les onglets du navigateur sur les écrans standard (96 dpi), dans la barre d'outils des favoris de tous les navigateurs de bureau et dans certaines listes d'historique du navigateur. Parce que 16 × 16 est une toile extrêmement étroite, le design de votre favicon doit être réduit à sa forme la plus simple : une seule forme, une lettre ou une marque abstraite. Tout ce qui est plus complexe sera illisible.

La taille de 32 × 32 pixels double la taille de 16 × 16 et sert les onglets du navigateur Retina/HiDPI avec une densité 2x, les icônes de signets à DPI élevé et les icônes de suggestion de barre d'adresse dans Chrome. Les navigateurs modernes demandent beaucoup plus souvent le 32×32 que le 16×16, car les écrans haute densité sont devenus la majorité des appareils. Si vous ne pouviez publier qu’une seule taille, 32×32 serait le choix le plus efficace.

La taille de 48 × 48 pixels correspond à la taille d'affichage des «icônes moyennes» de Windows Explorer et constitue le minimum requis par la recherche Google pour l'éligibilité des favicon dans les extraits de résultats de recherche. Les sites dont le favicon ne respecte pas le minimum de 48×48 apparaissent avec une icône de globe générique à côté de leur URL dans les résultats Google au lieu de leur marque. Incluez toujours 48×48 dans votre bundle .ico.

La taille de 64 × 64 pixels est utilisée dans la vue des grandes icônes de Windows Explorer et dans certains environnements de bureau Linux. L'inclure dans votre fichier .ico multi-tailles ajoute une surcharge négligeable mais garantit un rendu propre dans les gestionnaires de fichiers et les environnements shell. De nombreux outils générateurs de favicon en incluent 64 par défaut dans le cadre du bundle .ico standard.

La taille de 128 × 128 pixels sert aux vignettes d’application Windows Store et aux vignettes de la barre des tâches haute densité. Il est moins couramment nécessaire pour les favicons Web purs, mais est important si votre site est présenté sous la forme d'un PWA ou si les utilisateurs l'épinglent en tant qu'application Windows. Le regrouper dans .ico avec la compression PNG maintient la taille du fichier à un niveau raisonnable.

La taille de 256 × 256 pixels est la plus grande image .ico standard. Il est utilisé pour les raccourcis du bureau Windows, les résultats de recherche du menu Démarrer de Windows et certains contextes d'applications installées. À cette résolution, vous devez utiliser la compression PNG à l'intérieur du conteneur .ico plutôt que BMP : une image BMP 256 × 256 non compressée ajoute inutilement 256 Ko au fichier .ico.

La taille de 180 × 180 pixels est exclusivement destinée au iOS apple-touch-icon. Lorsqu'un utilisateur d'iPhone ou d'iPad appuie sur « Ajouter à l'écran d'accueil », Safari récupère l'image déclarée dans `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>`. Cette taille couvre tous les modèles d'iPhone actuels (l'iPhone 6 Plus et les versions ultérieures utilisent 180 × 180 à une densité 3x ; les modèles plus anciens utilisent 120 × 120 et 152 × 152 – un seul fichier 180 les couvre tous gracieusement).

La taille de 192 × 192 pixels est l'icône minimale requise dans un manifeste d'application Web (site.webmanifest) pour l'invite d'installation PWA de Android Chrome. Lorsque les utilisateurs ajoutent un PWA à leur écran d'accueil Android, Chrome affiche l'icône 192 × 192 dans le lanceur et l'icône de l'application dans le sélecteur d'applications récentes. Sans cette taille dans le manifeste, l'invite d'installation PWA affiche une icône générique ou ne se déclenche pas du tout.

La taille de 512 × 512 pixels est la deuxième icône de manifeste requise. Chrome l'utilise pour l'écran de démarrage PWA qui s'affiche pendant le chargement de l'application après un lancement sur l'écran d'accueil, et pour l'aperçu de la boîte de dialogue d'installation sur le système d'exploitation de bureau Chrome. Il s'agit également de la taille de source idéale pour générer toutes les variantes plus petites : à partir de 512 × 512, chaque sortie sous-échantillonnée conserve des bords nets et des couleurs précises.

Les tailles comprises entre 512 × 512 et le très grand 1024 × 1024 sont principalement utilisées pour les icônes d'applications natives sur les soumissions macOS et iOS App Store, et non pour les favicons Web. Cependant, si vous envisagez de convertir votre présence sur le Web en une application native à l'aide d'un wrapper (Electron, Capacitor, Tauri), vous aurez besoin de 1024 × 1024 pour le processus d'examen de l'App Store. Stockez ce fichier maître avec votre package favicon.

Les favicons SVG sont indépendants de la résolution et couvrent chaque densité avec un seul fichier. Un navigateur prenant en charge les favicons SVG (Chrome 80+, Edge 80+, Firefox 41+, Safari 15+) préférera le SVG à n'importe quelle taille de raster car il s'affiche parfaitement à 1x, 2x, 3x ou tout autre DPI personnalisé. Le compromis est que tous les contextes ne prennent pas en charge les raccourcis SVG — Windows, les lecteurs RSS et les outils plus anciens ont toujours besoin de la solution de secours .ico.

Il est important de comprendre la relation entre les tailles et le conteneur .ico. Un fichier .ico n'est pas une image unique, c'est une archive multi-images. Chaque image à l’intérieur est une image raster distincte de taille différente. Le navigateur lit le répertoire ICO, identifie quelle image correspond le mieux à la taille dont il a besoin et décode uniquement cette image. C'est pourquoi un fichier .ico peut également servir des onglets de 16, 32, 48 et 64 px.

L'ensemble minimum recommandé pour un site Web de production en 2026 est : favicon.ico regroupant des images de 16, 32, 48 et 64 px ; apple-touch-icon.png à 180×180 ; android-chrome-192x192.png; android-chrome-512x512.png; favicon.svg pour les navigateurs modernes ; et un site.webmanifest faisant référence aux 192 et 512 PNG. Le favicon generator produit cet ensemble complet à partir d'un téléchargement d'une seule source en un seul clic.

Vérifier si toutes vos tailles de favicon sont correctement servies est simple avec le favicon tester. Entrez l'URL de votre site et le testeur tente de récupérer votre favicon.ico, vérifie les balises de lien dans votre tête HTML et affiche un aperçu de chaque taille. Les tailles manquantes sont signalées par des recommandations concrètes.