Menu
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?
629
asked Oct 23 '25 16:10
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.
126
answered Oct 25 '25 07:10
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.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
