Why does Chrome request both .svg AND .ico favicons?

3
votes

Most modern browsers support .svg favicons as of Sep 2020. See: https://caniuse.com/link-icon-svg

However, in order to support legacy browsers my site serves a .ico favicon in addition to a .svg favicon with the following html links in <head>:

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

This works as expected where browsers that support .svg favicons appropriately use the .svg favicon while browsers that do not use the .ico favicon. What I don't understand is why browsers that do support .svg favicons (like Chrome) also request the .ico favicon? See the Chrome waterfall below:

DevTools Network Tab

If Chrome has already successfully downloaded the .svg favicon why does it go on to request the .ico favicon as well? Shouldn't Chrome intelligently select only one favicon type to load without forcing the client to download unnecessary resources? Is there a way to instruct Chrome to only download the .svg favicon?

1
htmlgoogle-chromefaviconico
I haven't tried it, but you could probably leave out the reference to the favicon.ico completely. Browsers know to request it if they want it, even if you don't link to it. Therefore, I'm guessing that if the browser can't handle your link to the SVG, it will be requesting the ICO anyway. – Brad
@Brad I'll give you credit, this is an interesting idea. I believe it would require placing the .ico favicon in the root folder because browsers would not know to look for it in images/favicon.ico – YNotRandom
Chrome has only recently implemented support, perhaps you should let them know it's not quite right via their bugtracker – Robert Longson
@Brad So I gave your idea a quick try but unfortunately browsers will only request favicon.ico in the root if there is no favicon specified in the html. So as long as the .svg favicon is still being served, the browser will not look for another favicon even if the browser does not support the format it received. Tested with Safari 13.1 – YNotRandom

1 Answers

7
votes

I had the same problem. What solved it for me was adding sizes="16x16" to the link tag. Here's my full code:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="alternate icon" sizes="16x16" href="/favicon.ico">

Now current Chrome and FF will choose the svg icon while I still have a fallback for older browsers.