Comment fonctionnent les formats de favicon
Comprendre le fonctionnement de chaque format vous aide à résoudre l'inévitable problème « mon favicon ne s'affiche pas ».
Vérifiez les favicons de n'importe quel site
Installez l'extension Chrome FetchFavicon pour extraire, prévisualiser et valider les favicons instantanément.
Le conteneur .ico
Un fichier .ico se compose d'un en-tête suivi d'une ou plusieurs entrées d'image. Chaque entrée peut être en BMP ou en PNG, avec sa propre largeur, hauteur et profondeur de couleur.
Les navigateurs parcourent le répertoire, sélectionnent l'entrée correspondant à la taille demandée et ne décodent que celle-là.
PNG à l'intérieur du .ico
À partir de 64×64, la compression PNG réduit le poids du fichier d'un facteur 5 à 10 sans perte visuelle. Les générateurs modernes (le nôtre inclus) l'appliquent automatiquement.
Favicons SVG
Un favicon SVG est un fichier SVG classique. Les navigateurs le rendent comme n'importe quel autre SVG, et le bloc <style> peut adapter les couleurs en fonction de prefers-color-scheme.
Comment les navigateurs choisissent
Si vous déclarez plusieurs balises <link rel="icon">, les navigateurs sélectionnent celle qui correspond le mieux à la surface (onglet, favori ou installation). Le SVG est préféré quand il est supporté ; le .ico sert de fallback.
FAQ
What is inside a .ico file?
A header plus a directory of image entries. Each entry can be BMP or PNG at a specific width and height.
How do browsers choose which favicon to display?
Browsers read all <link rel="icon"> tags and pick the best match for the surface — tab, bookmark, or install prompt. SVG is preferred when supported; .ico is the fallback.
Why use PNG inside an .ico instead of BMP?
PNG compression cuts file size 5–10× at 64×256 with no visible loss, which speeds up page loads.
Can I use only SVG for favicons?
Not safely. Always ship favicon.ico as a fallback for older browsers, Windows shortcuts, and embedders that ignore SVG.