SVG Favicon Not Working

Solution 1:

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.

Solution 2:

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! :-)

Solution 3:

You can try this:

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

Solution 4:

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?