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:
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?
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.