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?
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.
-
-
It's probably best to just keep using both a SVG and a PNG for now. I hope more browsers start supporting SVG favicons, seeing as how many various sizes different browsers use. Is there a way to force Firefox to use the SVG instead of the PNG? The SVG file is much smaller and I would prefer that supporting browsers such as Firefox would use it rather than the PNG. – Brandon Aug 2 '15 at 4:59
-
@Brandon I totally agree - make sure to vote on the Edge UserVoice site, for instance. Firefox seems to use the last favicon specified (some use the first in the list, too - it's a real mess), so I have my
<link rel=icon href=favicon.svg>
as my last<link rel=icon>
, and that's the one showing up in Firefox 41+ (I don't know what's being loaded in the background, though). Cheers! – mnsth Aug 3 '15 at 9:10
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 (heretofore referred to ascanvasElement
). - Create an
<img>
element (heretofore 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')
(heretofore 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.
-
Note that all modern browsers, following the behavior described in the HTML Living Standard for image loading, shouldn't set the
complete
property until after theload
event fires: see the original answer for a rewritten version expecting spec-compliant behavior. – Stuart P. Bentley Jan 20 '18 at 22:11