Is there a way to render SVG favicons in unsupported browsers?

Question

As of right now, the only browser that seems to support them is Firefox. Apparently Opera used to support it but later dropped it. Perhaps a JavaScript shim?

Answer 1

I don't know of any shims. Unfortunately, I don't think there are any that would work, since a favicon is displayed in the browser user interface rather than on the website itself. However, I do believe the browser support situation is finally starting to improve. As of now, an SVG icon in Firefox only loads on the first page load, and then falls back to .png or .ico favicons if any. The upcoming Safari 9 also has partial support, with using single-colored SVG favicons for the new "pinned tabs" feature - but that requires the SVG to be completely black, have an unofficial mask attribute included, and if you want, define a single color the whole icon should be colored using the (unrelated) tag. Firefox seems to be working on a fix (update: fixed in Firefox 41), and all the other browsers have a feature request site for SVG favicons to be implemented (Edge, Chrome and Webkit/Safari).

For now, along with specifying , you should continue specifying a .png and/or .ico icon as well.