Dynamic svg favicon?

I have an icon as SVG. I want to have it in different colo开发者_C百科rs as favicon.

Since there isn't any toDataUrl() for SVG elements I don't see a solution that doesn't involve a server.

Any idea for a client side solution?

fabric.js supports rendering of SVG elements into canvas elements.

This is not exactly what you asked, but here's a page testing the support for svg favicons in browsers.

If the browser supports svg as favicon it's trivial to generate a data url from the svg markup and use that. However, if you wanted a raster image (png, jpg) then yeah, look at the canvas solution. Some people even make games in the favicon...

You have an SVG icon and you want to use it as a favicon so you can show it in different colors without hitting the server.

Any idea for a client side solution?

Firefox 41 introduced support for SVG favicons. Here's an example I tested in Firefox 52 just now:

<link rel="icon" sizes="any" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M224 387.814V512L32 320l192-192v126.912C447.375 260.152 437.794 103.016 380.93 0 521.287 151.707 491.48 394.785 224 387.814z'/%3E%3C/svg%3E">

Drop it in your page and watch it update as you alter it via script.

Notes

• Use the sizes attribute with a value of any to hint to the browser it's a vector icon.
• For browser support: http://caniuse.com/#feat=link-icon-svg.
• See Optimizing SVGs in data URIs for encoding tips.