ICO vs PNG pour un favicon : quel format choisir ?
Utilisez le PNG comme favicon principal et conservez un favicon.ico à la racine du site comme solution de repli. Le PNG vous offre une couleur complète 24 bits et un vrai canal alpha, il compresse mieux, et tous les navigateurs actuels l'acceptent depuis une balise link ; l'avantage qui reste à l'ICO est qu'il regroupe plusieurs tailles dans un seul fichier et qu'il est ce que les clients demandent à /favicon.ico lorsqu'aucune balise n'est présente. Livrer les deux coûte un fichier supplémentaire et supprime complètement le compromis.
Les deux formats
L'ICO est le conteneur d'icônes de Windows, et il est devenu le format de favicon par accident : Internet Explorer demandait /favicon.ico et tout le monde en a livré un. Sa propriété caractéristique est qu'un seul fichier .ico contient plusieurs bitmaps à différentes tailles, et le consommateur en choisit un.
Le PNG est un format d'image web ordinaire avec compression sans perte et un canal alpha complet. Il ne contient qu'une seule image à une seule taille, donc couvrir plusieurs tailles signifie plusieurs fichiers et plusieurs balises link, ce qui correspond de toute façon à ce que les navigateurs modernes attendent.
Lequel choisir
ICO
Repli et requêtes par chemin brut
- Un seul fichier regroupe les bitmaps de 16, 32 et 48 pixels
- Demandé à /favicon.ico par les navigateurs, robots d'exploration et lecteurs de flux, sans balise link impliquée
- Compris par tous les navigateurs jamais publiés, y compris les très anciens
- Format natif des raccourcis de bureau Windows
- Peu commode à créer et inspecter ; la plupart des outils le traitent comme un artefact de build
PNG
Start hereVotre favicon principal
- Couleur 24 bits, donc les dégradés et les marques photographiques survivent
- Canal alpha complet, donc les bords s'anticrénellent proprement sur n'importe quelle couleur d'onglet
- Plus léger que l'ICO équivalent à qualité égale
- Pris en charge par tous les navigateurs actuels via link rel="icon"
- Le format que les manifestes Android et PWA attendent pour les icônes d'installation
Comparaison technique
| Propriété | ICO | PNG |
|---|---|---|
| Profondeur de couleur | Palette 8 bits dans les fichiers classiques ; 32 bits dans les modernes | Couleur 24 bits plus alpha 8 bits |
| Transparence | Masque 1 bit dans les fichiers classiques ; canal alpha dans les entrées 32 bits | Canal alpha complet |
| Tailles par fichier | Plusieurs, généralement 16, 32 et 48 | Une |
| Compression | Bitmaps non compressés, ou entrées compressées en PNG | DEFLATE sans perte |
| Demandé sans balise link | Oui, à /favicon.ico | Non |
Que mettre dans l'en-tête
<!-- PNG first: modern browsers pick these -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- ICO fallback; also served from /favicon.ico for bare requests -->
<link rel="icon" href="/favicon.ico" sizes="any">Déclarer les deux n'est pas un conflit. Un navigateur lit chaque lien d'icône, fait correspondre le type et la taille, et n'utilise l'ICO que s'il le préfère ou si les PNG échouent.
FAQ ICO vs PNG
Puis-je abandonner complètement favicon.ico ?
Vous le pouvez, et les navigateurs modernes s'en accommoderont tant que vos balises link PNG sont présentes. Ce qui casse, c'est tout ce qui demande /favicon.ico par chemin sans analyser votre HTML (robots d'exploration, lecteurs de flux, bots d'aperçu de liens, certains outils d'analyse), qui enregistrera une 404 et n'affichera rien.
Quel format l'emporte si je déclare les deux ?
Le navigateur décide, à l'aide des attributs type et sizes de chaque lien. En pratique, les navigateurs actuels prennent le PNG qui correspond le mieux à la taille dont ils ont besoin, et se rabattent sur l'ICO si rien d'autre ne correspond.
L'ICO est-il de moins bonne qualité que le PNG ?
Pas intrinsèquement. Une entrée ICO 32 bits porte la même couleur et le même alpha qu'un PNG, et de nombreux fichiers ICO intègrent littéralement des données PNG. Les plaintes sur la qualité viennent des vieux ICO à palette 8 bits avec transparence 1 bit, qui produisent des bords durs et crénelés.