Comparatif des formats de favicon : ICO vs PNG vs SVG
Trois formats, trois rôles. Utilisez .ico pour le chemin /favicon.ico et les anciens clients, PNG pour les navigateurs modernes et toutes les tailles d'icône d'application, et SVG pour une icône d'onglet nette qui s'adapte au thème.
Chaque format a un rôle différent
Il n'existe pas un unique meilleur format de favicon. Chacun couvre un cas que les autres ne peuvent pas gérer. Choisir un seul format et l'imposer partout, c'est le meilleur moyen de se retrouver avec des onglets vides et des écrans d'accueil affichant un carré gris.
Le format .ico est un conteneur qui regroupe plusieurs tailles dans un seul fichier. Cela compte, car les navigateurs et les robots d'indexation requièrent toujours /favicon.ico par défaut, et les anciens clients ne comprennent que le .ico. Un vrai .ico n'est pas un PNG dont on a renommé l'extension. Renommer un fichier change son nom, pas ses octets, et la plupart des clients le rejetteront.
Le PNG est le cheval de bataille. Tous les navigateurs modernes le lisent, et chaque emplacement d'icône d'application et de manifeste (16, 32, 180, 192, 512) est un PNG. Le SVG est le petit nouveau : un seul fichier vectoriel qui reste net à n'importe quelle taille et peut changer de couleur en mode sombre grâce à une media query placée à l'intérieur du fichier.
ICO vs PNG vs SVG
| Format | Idéal pour | Attention à |
|---|---|---|
| .ico | Le chemin /favicon.ico et les anciens navigateurs ou robots qui ne lisent que le .ico | Doit être un vrai conteneur multi-tailles (16 + 32 + 48), pas un PNG renommé. Ne l'utilisez pas pour les icônes d'application. |
| PNG | Les onglets des navigateurs modernes et toutes les tailles d'icône d'application et de manifeste (16, 32, 180, 192, 512) | C'est du raster, donc chaque taille est un fichier distinct. Il vous faut quand même toutes les tailles, un seul PNG ne les couvre pas toutes. |
| SVG | Une seule icône d'onglet nette qui s'adapte à n'importe quelle taille et peut inverser sa couleur en mode sombre | Non valide en /favicon.ico et non utilisé pour les écrans d'accueil iOS ou Android. Gardez-le simple, les effets peuvent s'afficher différemment selon les navigateurs. |
Comment ils cohabitent dans le head
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Un navigateur qui lit le SVG utilise favicon.svg. Tout le reste se rabat sur les PNG et le .ico. L'apple-touch-icon reste en PNG car iOS ignore le SVG ici.
Questions fréquentes
Puis-je simplement renommer un PNG en favicon.ico ?
Non. Le .ico est un format de conteneur à part entière, pas un PNG avec une autre extension. Certains navigateurs tolèrent un fichier mal étiqueté, mais beaucoup non, et les robots d'indexation sont plus stricts. Générez un vrai .ico multi-tailles.
Ai-je encore besoin de favicon.ico si j'ai un PNG et un SVG ?
Oui, gardez-en un. Les navigateurs, les lecteurs de flux et les robots de recherche requièrent toujours /favicon.ico sans aucune balise. Un fichier à ce chemin est le filet de sécurité lorsque vos balises link passent inaperçues.
Un favicon en SVG est-il meilleur qu'un PNG ?
Pour l'icône d'onglet, ça peut l'être, car un seul fichier reste net à toutes les tailles et peut s'adapter au mode sombre. Il ne remplace pas les icônes d'application en PNG des écrans d'accueil, alors utilisez les deux.
Quel format utiliser pour l'icône de manifeste 512x512 ?
PNG. Le tableau icons du manifeste attend des PNG raster en 192 et 512, dont un maskable. Le SVG n'est pas le format qu'Android utilise pour les icônes d'applications installées.