SVG Favicon Not Working

82
votes

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

6
htmlsvgfavicon
I'm no web expert, but do you think the svg version and link version should match? version="1.1" vs. ?v=4. – icebird76
you have two class attributes on the paths, probably better replacing with inline attributes <path fill="#DB6B2A" d="..." ... note to icebird ... the v=4 is a cachebusting id. – Ruskin

6 Answers

106
votes

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.

7
votes

First of all the code you are using for your favicons is missing one part, it should include, somewhere. that says: type="image/x-icon". So for favicons, using .jpg or other standard images like .gif the code looks like this: 

<link href="someimagesourcefileorURL.jpg" rel="icon"  type="image/x-icon" />

1. For image extension, .jpg works [or you can use another comparable file extension; .gif works too.] 2. For rel, "icon" is sufficient [but you can also put the word "shortcut" next to/before "icon" if you want, optionally.]

For an SVG 'favicon' it's a little trickier, for a few reasons. This is optional but to work best, you need the SVG image to be sized to under 256 square pixels (16 pixels by 16 pixels, but since SVG are normally scalable, I recommend setting the height and width to both <=16px immediately before trying to use them as a 'favicon'. So you need to divide your height by whatever number is needed to get the height to equal or be less than 16px and the same is true for width. If you have a square, evenly-proportioned image, then you should be able to simply change the entire image size by a percentage and the whole image should scale down without distorted significantly while retaining the square shape. If you don't have a square shape, you'll have to distort the image some in the process of turning it into a square-ish shape because favicons are 16px by 16px squares. Assuming you've already made those adjustments, we're moving on. Now, after that part is done, you use this format for SVG 'favicons':

<link rel="icon" href="someimagefileorURL.svg" type="image/svg+xml" />

That should work as long as your SVG image has been sized down already as described above. Here's a good JSfiddle (not-mine) that demonstrates that this code works. https://jsfiddle.net/Daniel_Hug/YawSn/ And I have lots of experience with the traditional favicons working with the first method I described.

Hope this helps! I sure wish someone showed me this when I didn't know how to use/set-up favicons yet! :-)

5
votes

You can try this:

<link rel="icon" href="gnome.svg" sizes="any" type="image/svg+xml">
4
votes

You need to rasterize the SVG for browsers that don't support SVG icons (which is currently most of them). See Is there a way to render SVG favicons in unsupported browsers?

3
votes

Optimized SVG Favicons can be as little as 100-200 bytes so there's not much sense in making an external request. Just go ahead and embed it on the page. In doing so you'll save an external image request which could be larger than expected due to cookies getting sent when images are requested.

As others have pointed out, the browser support isn't great yet but the SVG Favicons afford some things you simply can't do with PNG—such as styling via CSS and even JS-based animation.

Here's the Chrome issue to add support, open from 2013 to 2020 with no real progress due to blockers. Finally resolved in early 2020 as mentioned by Matthew Steeples.

0
votes

For Angular version 9+ you also have to put favicon.svg into the assets folder.

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

Also list the file in the assets in angular.json

     "assets": [
              ...,
              "src/assets/favicon.svg"
            ],