SVG Favicon Not Working

svg favicon example
svg favicon chrome
svg to ico
svg favicon fallback
html favicon
favicon size
safari svg favicon
svg favicon emoji

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

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 only added since version 80.x.

Are you using SVG favicons yet? A guide for modern browsers., This method won't work with the mask-icon since the colour is in the attribute but Safari adds a white background if there isn't enough contrast. <� If a browser doesn’t support a SVG favicon, it will ignore the first link element declaration and continue on to the second. This ensures that all browsers that support favicons can enjoy the experience. You may also notice the alternate attribute value for our rel declaration in the second line.

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

SVG, Favicons, and All the Fun Things We Can Do With Them, If a browser doesn't support a SVG favicon, it will ignore the first link element declaration and continue on to the second. This ensures that all browsers that support favicons can enjoy the experience. You may also notice the alternate attribute value for our rel declaration in the second line. SVG Favicon upload not working Divi theme. Resolved tigergagnon (@tigergagnon) 1 year, 7 months ago. When trying to upload my svg favicon (favico-01.svg, 512px x

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?

SVG favicons, While all browsers support the .ico format, the SVG format can be preferable to more easily support higher resolutions or larger icons. Usage % of. Svg can be into into html and styled with css. What this article is demonstrating is that you can write the css directly in the .svg image file with the media query prefers-color-scheme: dark, which can alter the style of the image (even when used as a favicon)

You can try like this

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

but most of browser does not support

Support for SVG in favicons, Allows using images in SVG format as favicons with . Using a scalable format for favicons allows having fewer such resources in total. After a feature ships in Chrome, the values listed here are not guaranteed to be up to� design - realfavicongenerator - svg to favicon . Generating Icon Files (2) I'm looking for an online solution for generating .ICO files. Favicon NOT working on Edge

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 since 2013 with no real progress due to blockers.

Making And Deploying SVG Favicons, The Problem. From their origins as 16 � 16 pixel graphics, the favicon concept has grown and mutated to cover a whole series of touch icons,� This seems to affect favicon loading, which is loaded using another means that the web page alone (so, even if the web page works, favicon does not work). To enable loopback for Edge, run this in PowerShell as Administrator: CheckNetIsolation LoopbackExempt -a -n="Microsoft.MicrosoftEdge_8wekyb3d8bbwe"

The United SVG Favicon Myth - Favicon's blog, And suggest the obvious solution: a single SVG image. In the later case, the problem is similar to the one already described with macOS� (Not working in Opera 15 and later) 228×228: favicon-228.png: Opera Coast icon: Instagram was the only site that had an SVG favicon option on its website)

SVG favicon support <link rel="icon" type="image/svg+xml" href , SVG favicon support Mobile device bookmark icon support This issue GitHub is home to over 50 million developers working together to host� Also IE 10 does not read conditional comments thus IE 10 won't show a favicon. With IE 11 and Edge available I don't see IE 10 in widespread use, so I ignore this browser. For the rest of the browsers we are going to use the standard way to cite a favicon:

SVG Favicon - JSFiddle, <meta charset="utf-8">. 5. <title>SVG Favicon</title>. 6. <link rel="icon" type=" image/svg+xml" href="http://www.w3.org/html/logo/downloads/HTML5_Badge. svg">. When your web site is not new and you want to update your favicon, that can be a problem: your loyal visitors won't notice the change. A workaround is to append a version to the favicon URLs as a query parameter.

Comments
  • I'm no web expert, but do you think the svg version and link version should match? version="1.1" vs. ?v=4.
  • why? It's not supported in anything but FF anyway. caniuse.com/#feat=link-icon-svg
  • I was just trying to test it to see how they worked, no real world purpose yet due to the lack of support.
  • 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.
  • Looks like it is dropping in Chrome 80 chromestatus.com/feature/5180316371124224
  • Supported by Firefox since version 58.
  • @Cryptopat - since somewhere in the Firefox 20s I believe...maybe even earlier.
  • Would like to add that Microsoft Edge also supports .svg favicon's, but not chrome
  • As described in the given CanIUse link, this is now possible to use an SVG resource for favicon in Chrome since the very last release 80. Keep in mind that - as usual - we will have to wait a while before using it safely (for Chrome users).
  • height less then 16px for SVG? Looks esoteric to me. I don't think this is needed. I use SVG as favicon with 180px. And I guess it would look the same if I would use 1800px or 18000px.
  • Esoteric? Really? But you are right, that of course SVG for 16px height is not needed. But you can also, of course, use a SVG for ANY height..