The fix
Mark the ICO as a 32px icon and leave the SVG without a sizes attribute:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">With sizes="32x32" on the ICO, browsers that support SVG favicons choose the SVG, and browsers that do not fall back to the ICO.
Why it happens
A page can declare several icons, and the browser picks one using each link's type and sizes. When the ICO link carries no sizes, Chrome can treat it as at least as good a match as the SVG and use it. Declaring the ICO as 32px only tells Chrome it is a small raster, so the scalable SVG wins. The exact selection rules are browser internals and have changed over time. The attribute works regardless, and it costs nothing in browsers that never had the problem.
Why keep favicon.ico at all
- Tools request it blindly. Crawlers, RSS and feed readers, bookmark managers and chat link previews often fetch
/favicon.icowithout parsing your HTML. - Not every browser uses SVG favicons. Support is good in Chromium browsers and Firefox. Safari has historically lacked or limited SVG favicon support, so a raster fallback is the safe choice.
- Browsers ask for it anyway. With no ICO at the root, many browsers still request
/favicon.icoand log a 404.
What a good ICO contains
An ICO file is a container for several images. A good one carries 16, 32 and 48px layers, so each context gets a layer made for it rather than a downscaled one.
| layer | used for |
|---|---|
| 16px | Classic tab and address bar size on standard-density screens. |
| 32px | Tabs on high-density screens, and desktop surfaces that want a larger icon. |
| 48px | Larger shortcuts and some desktop surfaces. |
Drawing each layer at its own size matters. A 256px logo scaled down to 16px turns to mush, while a layer rendered fresh at 16px keeps hard edges. The ICO generator renders each layer separately and writes them into one file.
Why prefer the SVG where it works
- It stays sharp at every size and pixel density, including zoomed and pinned tabs.
- It is usually smaller than a multi-layer ICO.
- It can carry a dark-mode variant through a
prefers-color-schememedia query. See dark mode favicons.
Order and type attributes
Put type="image/svg+xml" on the SVG link so browsers that cannot use SVG favicons skip it without downloading it. Keep the ICO link first, as in the snippet above. It is what favicon.zip writes into every package.
Questions
Should the SVG link have a sizes attribute?
No. Leave sizes off the SVG, or use sizes="any", and put sizes="32x32" on the ICO.
Can I use only an SVG favicon?
You can, but anything that requests /favicon.ico directly, or cannot render SVG favicons, will show a generic icon. Ship both.
Can favicon.ico just be a renamed PNG?
Many browsers will display it, but it is not a real ICO and some tools reject it. Generate a proper multi-layer ICO.