ICO vs PNG pour les favicons
ICO est universel mais héritage ; PNG est moderne mais nécessite des liens explicites. Cette comparaison couvre le comportement du navigateur, la taille du fichier, la transparence, des exemples concrets et la manière d'publier les deux formats sans problèmes de duplication.
Pourquoi cette comparaison est toujours importante
Les équipes qui découvrent le front-end choisissent souvent PNG parce qu'il semble moderne, ou ICO parce qu'un tutoriel de 2012 le disait. La bonne réponse en 2026 est presque toujours les deux, utilisées pour des emplois différents. 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 [guide complémentaire] (guide : ico-vs-png) pour un procédure pas à pas condensée.
ICO est un format conteneur : un fichier, plusieurs bitmaps intégrés. PNG est une seule image raster par fichier. Les navigateurs les traitent différemment lorsqu'ils décident quoi récupérer pour un onglet par rapport à une bannière d'installation PWA.
Un mauvais choix entraîne des onglets flous, des téléchargements volumineux ou des icônes manquantes dans les raccourcis Windows. Ce guide explique où chaque format gagne et comment les combiner.
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.
ICO : la solution de repli universelle
Chaque navigateur de bureau demandera /favicon.ico même si vous n'ajoutez jamais de balise <link>. Cette récupération implicite est la raison pour laquelle la racine .ico reste obligatoire.
À l'intérieur du conteneur, chaque entrée stocke les données de largeur, de hauteur et de pixels (souvent compressées PNG pour les tailles 64 × 64 et supérieures). Le client choisit la correspondance la plus proche de la densité d'affichage.
Windows Explorer, les aperçus des liens Outlook et les anciens lecteurs RSS dépendent toujours de .ico. Le sauter brise les icônes pour les utilisateurs qui ne visitent jamais votre HTML <head>.
PNG : un pixel parfait quelle que soit la densité
PNG vous donne une résolution connue par fichier. Liez-le explicitement : <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">.
Les écrans haute résolution en bénéficient car vous pouvez publier un PNG 32 × 32 que les navigateurs restituent sur un emplacement CSS 16 × 16 à une densité 2 × – plus net qu'un haut de gamme 16 × 16 naïf.
Les PWA nécessitent des icônes manifestes PNG à 192 × 192 et 512 × 512. Les icônes tactiles Apple utilisent 180 × 180 PNG. Ces tailles n’appartiennent pas à un procédure .ico classique multi-tailles.
Comparaison côte à côte
Prise en charge du navigateur : ICO gagne sur les récupérations implicites de /favicon.ico. PNG gagne lorsque vous déclarez les tailles des onglets Retina et des lanceurs Android.
Taille du fichier : un .ico bien construit avec 128 et 256 entrées compressées avec PNG est souvent plus petit que six fichiers PNG distincts. Les PNG amples gagnent lorsque vous n’avez besoin que d’une ou deux tailles.
Transparence : les deux prennent en charge l'alpha lorsqu'ils sont correctement encodés. Un mauvais outil .ico aplatit la transparence en blanc ; utilisez un générateur qui préserve PNG alpha à l'intérieur du conteneur.
Création : PNG est plus facile à prévisualiser dans n'importe quelle visionneuse d'images. ICO nécessite un outil d'exportation multi-tailles — c'est pourquoi les générateurs existent.
Exemples pratiques
Blog minimal : seulement favicon.ico à la racine. Aucune balise <link> requise ; acceptable pour les sites personnels.
Site marketing SaaS : favicon.ico plus favicon.svg plus 180×180 apple-touch-icon.png. Déclaré en <head> ; couvre les intégrations de bureau, iOS et sociales.
PWA installable : ajoutez android-chrome-192x192.png et android-chrome-512x512.png à site.webmanifest tout en conservant favicon.ico pour les anciens clients à onglets.
Wrapper d'application de bureau Windows : publiez un .ico compatible 256 × 256 pour Electron ou Tauri ; PNG en option pour l'interface utilisateur intégrée à l'application à des tailles fixes.
Verdict : utiliser les deux ensemble
Publiez un favicon.ico multi-tailles pour une prise en charge universelle et des récupérations implicites. Ajoutez des variantes PNG pour l'icône Apple-Touch, les icônes de manifeste et les balises <link> facultatives par taille.
Superposez SVG par-dessus lorsque votre marque est compatible avec les vecteurs et que vous souhaitez des onglets compatibles avec le mode sombre. ICO reste le parquet ; SVG et PNG sont des optimisations.
Ne convertissez pas PNG en ICO en renommant l'extension. Les vrais fichiers .ico nécessitent une structure de répertoires appropriée et des cadres par taille.
Questions fréquemment posées
ICO est-il obsolète ? Non, les navigateurs le récupèrent toujours par défaut. C'est un héritage dans la conception, pas dans l'utilisation.
Un PNG peut-il remplacer favicon.ico ? Pas en toute sécurité. Vous manquerez les requêtes /favicon.ico implicites et de nombreuses surfaces Windows.
Quelles tailles PNG sont les plus importantes ? 32×32 pour les onglets, 180×180 pour iOS, 192 et 512 pour PWA.
ICO prend-il en charge l'animation ? Les favicon animés classiques sont obsolètes. Publiez plutôt un .ico statique multi-tailles.
Dépannage
Chrome affiche PNG mais Edge affiche une icône floue : Edge est peut-être encore en train de lire un ancien cache .ico. Régénérez le .ico avec un cadre 32×32 net.
Le fichier ICO fait plus de 300 Ko : entrées BMP probablement non compressées à 256 × 256. Réexportez avec la compression PNG à l'intérieur du conteneur.
PNG a l'air net, contrairement à ICO : vous avez peut-être construit le .ico à partir d'une source plus petite que le PNG. Utilisez le même maître 512 × 512 pour les deux.
Transparence perdue dans ICO uniquement : votre outil a codé BMP 32 bits au lieu d'entrées compressées PNG. Changez de générateur ou réexportez avec alpha préservé.
Guide de décision rapide
Si vous avez besoin d'une prise en charge implicite de /favicon.ico ou de raccourcis Windows : publiez ICO.
Si vous avez besoin d'une netteté des onglets Retina avec un contrôle explicite : ajoutez des balises PNG <link> à 32 × 32 ou des tailles de bundle dans ICO.
Si vous avez besoin de PWA, installez l'interface utilisateur : PNG dans le manifeste en 192 et 512 – ICO ne remplace pas les icônes du manifeste.
Si vous avez besoin d'une mise à l'échelle infinie et d'un mode sombre CSS dans les onglets : ajoutez SVG, mais conservez ICO en dessous.
Lorsque la bande passante est importante sur un site statique avec une seule icône : un ICO multi-taille bien compressé seul est souvent plus petit que ICO plus trois PNG libres.
Lorsque la conception est itérée chaque semaine : conservez SVG dans Git comme source, régénérez les exportations ICO et PNG sur chaque balise de version via un script.
Migration de PNG uniquement vers ICO+PNG
Auditez les balises actuelles avec View Source ou DevTools. Notez chaque rel="icon" et apple-touch-icon href déjà déployés.
Générez un favicon.ico multi-tailles à partir du même maître PNG que vous avez utilisé pour les fichiers libres. Remplacez la racine /favicon.ico sans renommer les actifs non liés.
Conservez les balises PNG <link> existantes si elles fonctionnent. Ajoutez ICO en premier dans la liste afin que les analyseurs plus anciens le voient tôt.
Déployez en cas de faible trafic, purgez le cache CDN pour /favicon.ico spécifiquement et vérifiez avec curl -I que Content-Type est image/x-icon ou image/vnd.microsoft.icon.
Recherchez dans Google Search Console les erreurs d'exploration sur les URL des icônes après la migration. Les icônes de racine brisée apparaissent parfois sous la forme de soft 404 dans les journaux.