5

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">

This seems to work great in Firefox.

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.

Do Chromium browsers prefer .ico favicons?

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.

Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
Armadillo
  • 457
  • 1
  • 9
  • 17
  • I just ran into exactly the same problem with quite similar code. According to [css-tricks.com](https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/), 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](http://dahlström.net/svg/favicon/favicon.html), which is linked from the [Chrome Platform Status page](https://www.chromestatus.com/feature/5180316371124224), that works because the alternate icon is a PNG. – Kaspar Etter Aug 18 '20 at 16:05
  • It seems like this is a bug in Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=1162276 – Karl Horky Dec 31 '20 at 15:15
  • 1
    Does this answer your question? [Why does Chrome request both .svg AND .ico favicons?](https://stackoverflow.com/questions/63878618/why-does-chrome-request-both-svg-and-ico-favicons) – Mahozad Aug 22 '21 at 07:12
  • 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. – addMitt May 03 '23 at 15:35

1 Answers1

-2

Maybe try putting the SVG image after the ICO image.

Stratification
  • 7
  • 2