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

Asked 14/9, 2020 at 5:39 Answered 18/11, 2021 at 22:2

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?

Ossy answered 14/9, 2020 at 5:39 Comment(4)

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. – Hydranth 14/9, 2020 at 5:42

@Hydranth 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 – Ossy 14/9, 2020 at 5:59

Chrome has only recently implemented support, perhaps you should let them know it's not quite right via their bugtracker – Irwin 14/9, 2020 at 6:38

@Hydranth 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 – Ossy 14/9, 2020 at 8:0

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.

Maine answered 13/10, 2020 at 8:17 Comment(3)

Note sizes "any" will also work. – Embonpoint 29/9, 2021 at 1:6

this is a great workaround until Chrome fixes bugs.chromium.org/p/chromium/issues/detail?id=1162276 – Honorable 16/11, 2022 at 13:59

@Embonpoint As of 2024 on desktop, sizes="any" does NOT work on Chromium browsers (tested on Chrome & Edge). It will load the ICO icon instead. Though it works on Firefox. – Durra 5/9 at 13:29

There has been a recent post by CSS-Tricks highlighting the current solution

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

needed to prevent the second for Chrome due to bug 1162276.

Worthy answered 18/11, 2021 at 22:2 Comment(0)

Recommended topics

Hot tags