Meilleures tailles de favicon pour les sites web

Un favicon est adapté à de nombreux pixels physiques : 16 × 16 dans un onglet, 32 × 32 sur une barre de favoris Retina, 180 × 180 sur l'écran d'accueil d'un iPhone, 512 × 512 sur un écran de démarrage PWA. Une seule image ne peut pas bien les servir à tous. Utilisez notre [générateur favicon] (outil : favicon-generator), [convertisseur PNG en ICO] (outil : png-to-ico), [convertisseur SVG en ICO] (outil : svg-to-ico) et [testeur favicon en direct] (utilitaire : favicon-tester) pour créer et vérifier votre jeu d'icônes, et lisez le compagnon guide pour une présentation condensée.

La mise à l'échelle d'une petite source produit du flou. La réduction d'une résolution détaillée de 1024 × 1024 sans test fait perdre des lignes fines. Le correctif consiste en un petit ensemble d'exportations spécialement conçues, ou un .ico multi-tailles qui intègre les cadres de bureau courants.

Envoyer toutes les tailles répertoriées sur les anciens articles de blog est un gaspillage. En publier trop peu laisse un vide visible sur une plate-forme. La matrice ci-dessous reflète les requêtes réelles mesurées sur 2026 navigateurs.

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

Les onglets du bureau affichent généralement une icône de 16 × 16 pixels CSS, qui correspond à 16 × 16 ou 32 × 32 pixels de l'appareil en fonction de la densité d'affichage.

Les barres de signets et les onglets épinglés utilisent souvent 32×32 ou 48×48. Chromium peut sélectionner automatiquement le cadre intégré le plus proche de favicon.ico.

Les trois tailles d'onglets courantes (16, 32, 48) s'adaptent confortablement à l'intérieur d'un seul .ico multi-tailles. C'est pourquoi le conteneur .ico reste le format de diffusion de bureau le plus efficace.

Windows Le menu Démarrer, les broches de la barre des tâches et les raccourcis de l'Explorateur de fichiers peuvent demander 24 × 24, 32 × 32, 48 × 48, 64 × 64, 128 × 128 ou 256 × 256 selon le contexte et la mise à l'échelle de l'affichage.

Microsoft documente 16, 24, 32, 48, 64, 128 et 256 comme ensemble pratique pour les applications Windows. Les favicon Web bénéficient du regroupement d'au moins 16 à 256 dans favicon.ico.

macOS préfère .icns pour les applications natives mais consomme volontiers .ico et PNG pour les raccourcis Web. iOS ignore .ico pour les icônes de l'écran d'accueil et souhaite un PNG dédié 180 × 180 via l'icône Apple-Touch.

Les manifestes d’applications Web nécessitent des icônes ayant un objectif quelconque et éventuellement masquables. Les tailles courantes sont 192×192 et 512×512 PNG.

Android Chrome utilise des icônes de manifeste pour l'installation de l'interface utilisateur et des écrans de démarrage. Une source 512 × 512 diminue proprement ; un manifeste de 192 × 192 uniquement semble doux sur les téléphones haut de gamme.

iOS ne lit pas les icônes de manifeste pour le placement sur l'écran d'accueil. Vous devez déclarer <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">.

16×16 — onglets du navigateur (densité 1×). 32 × 32 — onglets et signets sur les écrans Retina. 48 × 48 — certains contextes d'interface utilisateur Windows et utilisations de signets hérités.

64 × 64 et 128 × 128 — Raccourcis Windows à une échelle plus élevée. 256 × 256 — Carreaux épinglés Windows et aperçus haute résolution.

180 × 180 — icône Apple-Touch (iOS / iPadOS). 192 × 192 et 512 × 512 — Icônes de manifeste PWA pour Android et invites d'installation.

Blog personnel : favicon.ico au 32/16/48 uniquement. Acceptable si vous ne vous souciez pas du polissage de l'écran d'accueil iOS.

Site marketing de l'entreprise : offre groupée .ico plus icône Apple-Touch 180 × 180 plus 32 × 32 PNG <lien> pour les onglets Retina explicites.

PWA installable : .ico complet, icône Apple-Touch, manifeste 192 + 512, SVG en option pour Chrome évolutif de l'interface utilisateur.

Application de bureau Electron : Windows .ico avec 16 à 256 ; macOS .icns séparément si vous distribuez en dehors du navigateur.

Multi-tailles favicon.ico (16, 32, 48, 64, 128, 256) à /favicon.ico.

apple-touch-icon.png à 180 × 180 pour les écrans d'accueil iOS.

Un 512 × 512 PNG dans site.webmanifest pour les surfaces d'installation Android.

Ce trio couvre environ 95 % des demandes d'icônes du monde réel. Ajoutez SVG lorsque vous souhaitez une mise à l'échelle infinie et un style en mode sombre dans les onglets modernes.

Ai-je besoin d'un PNG 16×16 s'il se trouve à l'intérieur du .ico ? Non, sauf si vous souhaitez un <link rel="icon" sizes="16x16"> explicite pour le débogage.

Le 120×120 est-il toujours requis ? C'était une ancienne taille iOS. Le Safari moderne attend 180×180.

Qu’en est-il des favicon 64×64 ? Utile à l'intérieur de .ico pour Windows ; rarement nécessaire en tant que PNG autonome.

Puis-je ignorer 256×256 ? Seulement si vous ne vous souciez jamais des aperçus de raccourcis Windows haute résolution. La plupart des équipes l'incluent.

L'icône iOS a des coins arrondis et semble rognée : c'est le masquage iOS — une conception avec un remplissage sécurisé, pas un bug dans votre fichier.

L'installation PWA affiche une icône générique : icônes de manifeste manquantes ou inférieures à 192 × 192 minimum. Validez JSON avec Chrome DevTools → Application.

Icône d'onglet logicielle sur Retina Mac : assurez-vous que favicon.ico contient un cadre 32 × 32, pas seulement 16 × 16.

Énorme téléchargement .ico : vous avez intégré BMP 256 × 256 non compressé. Reconstruisez avec la compression PNG à l'intérieur du conteneur.

Les pixels CSS ne sont pas des pixels physiques. Un emplacement d'onglet 16 × 16 sur un écran 2 × charge souvent un bitmap 32 × 32 pour plus de netteté.

C'est pourquoi un favicon.ico contenant à la fois 16 et 32 ​​images surpasse un seul PNG 16 × 16 sur les MacBook Retina et les ordinateurs portables Windows à haute DPI.

Les Android Les PWA affichent des icônes de manifeste sur les écrans de démarrage à pleine résolution de l'appareil : une source 192 × 192 étendue à un téléphone 1 440p semble douce ; 512 × 512 réduit proprement.

iOS applique son propre masque et son propre rayon de coin aux ressources Apple-Touch-Icon. Conception avec un rembourrage sûr afin que les bords importants ne soient pas coupés par le cercle.

Lors des tests, capturez l'onglet avec un zoom du navigateur à 100 % et une mise à l'échelle du système d'exploitation à 200 %. Si les deux semblent nets, votre matrice de taille est probablement correcte.

Téléchargez favicon.ico et ouvrez-le dans un outil qui répertorie les cadres intégrés. Confirmez que 16, 32, 48 et au moins une image de grande taille existent.

Récupérez apple-touch-icon.png et vérifiez les dimensions dans n'importe quel inspecteur d'images – attendez-vous à 180 × 180, et non à 120 × 120 à partir de modèles obsolètes.

Ouvrez site.webmanifest et vérifiez que les icônes [] incluent 192 × 192 et 512 × 512 avec les chemins d'accès et les types d'image/png corrects.

Chargez votre site dans Chrome DevTools → Application → Manifest. Les entrées manquantes ou invalides affichent des avertissements avant que les utilisateurs ne voient une boîte de dialogue d'installation interrompue.

Conservez une feuille de calcul mappant chaque fichier à son consommateur (onglet, iOS, PWA, Windows). À l’avenir, vous n’aurez plus à procéder à une rétro-ingénierie du dossier d’actifs lors d’un changement de marque.

De nouvelles classes d’appareils apparaissent lentement dans le pays favicon. Les icônes manifestes 512 × 512 couvrent aujourd'hui les interfaces utilisateur pliables et d'installation de tablettes mieux que 192 seules.

Évitez les tailles exotiques (96 × 96, 120 × 120), à moins qu'un document de plate-forme spécifique ne les impose toujours - elles ajoutent une charge de création sans grand avantage.

Stockez le vecteur maître ou le raster 1024 × 1024 dans votre dépôt de conception même si vous ne l'publiez jamais. Les futures plates-formes pourraient demander des icônes de manifeste plus grandes.

Automatisez la régénération à partir du maître afin que lorsqu'une nouvelle taille recommandée apparaît, vous réexécutiez un script au lieu de l'exporter manuellement dans Photoshop.