Chromium seems to display ico instead of svg favicon

Question

I've been tinkering with support for dark-mode by using a media query in my svg favicon. This is visible on my website.

<link href="favicon.svg" rel="icon" type="image/svg+xml">
<link href="favicon.ico" rel="alternate icon" type="image/x-icon">

Comparison between dark and light mode with Firefox

However, when using a Chromium based browser (Google Chrome version 84), it uses the favicon.ico. When I remove the ico completely, the browser does show the svg favicon, so I know it works and the browser supports svg favicons. However, the browser seems to pick the .ico if it's got the option to do so.

Can I force Chromium based browsers to pick the svg favicon, while maintaining support for older browsers by including the ico format? It should be noted none of these are stored on the root of my website.

Norrie

I just ran into exactly the same problem with quite similar code. According to css-tricks.com, the alternate in front of icon should do the trick but, as reported by you, this doesn't work for me either. Maybe this bug was recently introduced? (I'm also testing this on Chrome version 84.) Here is a demo, which is linked from the Chrome Platform Status page, that works because the alternate icon is a PNG. – Cleaver

It seems like this is a bug in Chrome: bugs.chromium.org/p/chromium/issues/detail?id=1162276 – Hypophysis

Does this answer your question? Why does Chrome request both .svg AND .ico favicons? – Ious

Reporting from 2023 to say that this is still an issue, and I personally cannot get the .svg to load AT ALL if an .ico file is specified anywhere. The order doesn't matter. Doesn't matter what attributes you do or do not put on either of them. The .ico is always chosen over the .svg if it exists, period. However, it is possible to use a .png icon as fallback instead, and have the .svg take precedence over that. – England

Answer 1

It's 2024 and the issue seems to be still there.

But setting sizes attribute for favicon.ico makes it work properly:

<link rel="icon" type="image/x-icon" href="/favicon.ico" sizes="32x32" />

I found this fix and some more useful info on favicons here: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs

Sequestered

Answer 2

Dont set in your markup, add the /favicon.ico file in your site root directory instead. SVG favcion supporting browsers will load the SVG icon, while all others GET /favicon.ico. <link rel="icon"> is just a way to explicitly change the icon URL.

source, the HTML spec

Vareck

Answer 3

Maybe try putting the SVG image after the ICO image.

Hamelin