Is there a way to render SVG favicons in unsupported browsers?
Reusing the non-serialization-related parts of the procedure from How do I set an SVG element to my page's favicon?:
- Create a
<canvas>
element (hereafter referred to ascanvasElement
). - Create an
<img>
element (hereafter referred to asimageElement
) and set itshref
to your SVG icon. - Once the image is loaded (by checking the
complete
property of the element after setting thehref
, calling the following steps directly if so and adding them as a listener for theload
event if not), set the canvas dimensions to match withcanvasElement.width = imageElement.width
andcanvasElement.height = imageElement.height
). - Create a drawing context for the canvas using
canvasElement.getContext('2d')
(hereafter referred to asctx
). - Draw the image (after setting
ctx.globalCompositeOperation = "copy"
, especially if re-using the canvas element) onto the canvas usingctx.drawImage(imageElement, 0, 0, canvasElement.width, canvasElement.height)
. - Create a PNG DataURL from the canvas using
canvasElement.toDataURL()
, and set that to thehref
attribute of the<link rel="icon">
element in your HTML.
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) <meta name="theme-color">
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 <link rel="icon" sizes="any" href="favicon.svg" type="image/svg+xml">
, you should continue specifying a .png
and/or .ico
icon as well.