How Favicon Formats Work
Knowing how each format works helps you debug the inevitable "my favicon isn't showing" problem.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
The .ico container
An .ico file is a header followed by one or more image entries. Each entry can be BMP or PNG, and each has a width, height, and bit depth.
Browsers parse the directory, pick the entry that matches the requested size, and decode just that one.
PNG inside .ico
For sizes 64×64 and above, PNG compression cuts file size by 5-10x with no visual loss. Modern generators (ours included) do this automatically.
SVG favicons
An SVG favicon is a normal SVG file. Browsers render it like any other SVG, and the <style> block can adapt colors based on prefers-color-scheme.
How browsers pick
If you ship multiple <link rel="icon"> tags, browsers pick the one that best matches the surface (tab vs bookmark vs install). SVG is preferred when supported; .ico is the 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.