Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SVG Favicon Not Working

Tags:

html

favicon

svg

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

like image 484
Sam Willis Avatar asked Dec 24 '15 01:12

Sam Willis


People also ask

Can you use an SVG as a favicon?

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.

Why is my favicon not displaying?

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.

How set SVG favicon in HTML?

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.

Should favicon be ICO or SVG?

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.


1 Answers

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.

like image 160
serraosays Avatar answered Oct 02 '22 16:10

serraosays