I'm trying to get an SVG Favicon on my site but no matter what I do, it just doesn't want to work.
I've got the following code saved as an .svg file in my usual favicon location, but when I change the favicon path to be .svg instead of .ico, nothing loads.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 384.5 283.4" style="enable-background:new 0 0 384.5 283.4;" xml:space="preserve" width="100%" height="100%"> <style type="text/css"> .shape1 {fill: #DB6B2A;} .shape2 {fill: #AE1A31;} </style> <path class="shape1" d="M384.5,83.7c-4.6-19.3-14.3-36.3-29.3-51.3C333.4,10.6,307.6,0,276.7,0c-30.9,0-56.7,10.6-78.4,32.4 l-4.6,5.1l-4.5-5.1C167.4,10.6,141.6,0,110.8,0S54.1,10.6,32.4,32.4C10.6,54.1,0,79.9,0,110.8v61.1l55.1-12.8v-48.4 c0-15.2,5.6-28.3,16.2-39C82,60.7,95.1,55.1,110.8,55.1c30.4,0,55.1,25.3,55.1,55.6v22.9l55.6-12.7v-10.1c0-2.5,0-4.6-0.5-7.1 c1.5-12.1,7.1-22.8,16.2-31.9c10.6-11.1,23.8-16.7,39.5-16.7c25.4,0,46.9,17.2,53.3,40.7"/> <path class="shape2" d="M54.5,187.6c6.4,23.5,27.9,40.7,53.3,40.7c15.7,0,28.8-5.6,39.5-16.7c9.1-9.1,14.7-19.7,16.2-31.9 c-0.5-2.5-0.5-4.6-0.5-7.1v-10.1l55.6-12.7v22.9c0,30.4,24.8,55.6,55.1,55.6c15.7,0,28.8-5.6,39.5-16.7 c10.6-10.6,16.2-23.8,16.2-38.9v-48.4l55.1-12.7v61.1c0,30.9-10.6,56.7-32.4,78.4c-21.7,21.7-47.5,32.4-78.4,32.4 c-30.9,0-56.7-10.6-78.4-32.4l-4.6-5.1l-4.6,5.1c-21.7,21.7-47.6,32.4-78.4,32.4s-56.7-10.6-78.4-32.4C14.3,236,4.6,219,0,199.7"/> </svg>
This is the code I'm using to set the favicon;
<link rel="icon" href="http://www.MYSITE.co.uk/favicon.svg?v=4">
I can't work out if it is an issue with my .svg code, or I'm missing something. Thanks
Icon used by browsers to identify a webpage or site. While all browsers support the . ico format, the SVG format can be preferable to more easily support higher resolutions or larger icons.
When you add a favicon to your site, it may not show up since your browser has 'saved' your site as one without a favicon. You need to clear the cache in your browser or use a different browser.
Adding An SVG Favicon To HTMLIn your HTML file's <head> tag you place a <link> element with the rel attribute set to “icon” and the href attribute set to the path where your icon lives.
You should be using SVG favicons. They're supported in all modern browsers right now. Also, you probably don't need all these icon links and sizes you're copying from projects to projects.
SVG favicons are now supported for Firefox, Safari, Chrome, Edge and Opera: https://caniuse.com/#feat=link-icon-svg
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
Chrome support was added in version 80.x.
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