CODEWITHSUNDEEP
svgfavicon
Brandon
Brandon

Reputation: 259

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

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?

Upvotes: 8

Views: 6897

Answers (2)

Stuart P. Bentley
Stuart P. Bentley

Reputation: 10675

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 <canvas> element (hereafter referred to as canvasElement).
  2. Create an <img> 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 <link rel="icon"> element in your HTML.

Upvotes: 10

mnsth
mnsth

Reputation: 2277

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.

Upvotes: 8

Related Questions