How Favicon Formats Work
Knowing how each format works helps you debug the inevitable "my favicon isn't showing" problem.
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.