ICO vs PNG pour les favicons

ICO est universel mais ancien ; PNG est moderne mais nécessite une déclaration explicite. Voici comment utiliser les deux ensemble.

4 min de lecture

Vérifiez les favicons de n'importe quel site

Installez l'extension Chrome FetchFavicon pour extraire, prévisualiser et valider les favicons instantanément.

Installer l'extension Chrome

ICO : le fallback universel

Tout navigateur desktop récupère /favicon.ico sans que vous n'ayez rien à faire. C'est un conteneur capable d'embarquer plusieurs résolutions.

Les raccourcis Windows et l'Explorateur de fichiers reposent sur le .ico. Même si les favicons web ne vous préoccupent pas, fournissez-en un pour le système d'exploitation.

PNG : un rendu net quelle que soit la densité

Le PNG s'affiche nettement sur les écrans haute densité lorsqu'il est déclaré avec <link rel="icon" sizes="...">.

Utilisez des PNG de 192×192 et 512×512 pour le web manifest, et 180×180 pour l'apple-touch-icon.

Verdict : utilisez les deux

Publiez un .ico multi-tailles pour la compatibilité universelle, plus des variantes PNG pour les écrans HD et les invites d'installation PWA. Ajoutez un SVG par-dessus pour une icône vectorielle toujours nette.

FAQ

Should I use ICO or PNG for a favicon?

Use both: ICO for universal /favicon.ico fallback and PNG for high-DPI tabs and PWA manifest icons.

Does every browser support PNG favicons?

Modern browsers do when you link them with <link rel="icon" type="image/png">. ICO remains the safest default.

Is ICO outdated?

ICO is older but still required for Windows shortcuts and automatic /favicon.ico discovery by browsers.

Guides associés

Essayez les outils

Continuer la lecture