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

Reusing the non-serialization-related parts of the procedure from How do I set an SVG element to my page's favicon?:

1. Create a element (hereafter referred to as canvasElement).
2. Create an element (hereafter referred to as imageElement) and set its href to your SVG icon.
3. Once the image is loaded (by checking the complete property of the element after setting the href, calling the following steps directly if so and adding them as a listener for the load event if not), set the canvas dimensions to match with canvasElement.width = imageElement.width and canvasElement.height = imageElement.height).
4. Create a drawing context for the canvas using canvasElement.getContext('2d') (hereafter referred to as ctx).
5. Draw the image (after setting ctx.globalCompositeOperation = "copy", especially if re-using the canvas element) onto the canvas using ctx.drawImage(imageElement, 0, 0, canvasElement.width, canvasElement.height).
6. Create a PNG DataURL from the canvas using canvasElement.toDataURL(), and set that to the href attribute of the element in your HTML.