有没有办法在不受支持的浏览器中呈现 SVG 图标？

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

截至目前，似乎唯一支持它们的浏览器是 Firefox。显然 Opera 曾经支持它，但后来放弃了它。也许 JavaScript 垫片？

我不知道有任何垫片。不幸的是，我认为没有任何可行的方法，因为网站图标显示在浏览器用户界面中，而不是网站本身。但是，我确实相信浏览器支持情况终于开始改善了。截至目前，Firefox 中的 SVG 图标仅在第一页加载时加载，然后回退到 .png 或 .ico 图标（如果有）。 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)。

现在，除了指定 <link rel="icon" sizes="any" href="favicon.svg" type="image/svg+xml">，您还应该继续指定 .png and/or .ico 图标。

重复使用 How do I set an SVG element to my page's favicon? 过程中与序列化无关的部分：

  1. 创建一个<canvas>元素（以下简称canvasElement）。
  2. 创建一个 <img> 元素（以下称为 imageElement）并将其 href 设置为您的 SVG 图标。
  3. 图片加载完成后（通过设置href后检查元素的complete 属性，如果是则直接调用以下步骤并将其添加为侦听器load 事件，如果没有），设置 canvas 维度以匹配 canvasElement.width = imageElement.width 和 canvasElement.height = imageElement.height）。
  4. 使用canvasElement.getContext('2d')（以下简称ctx）为canvas创建绘图上下文。
  5. 使用 ctx.drawImage(imageElement, 0, 0, canvasElement.width, canvasElement.height).
    6. 将图像（设置 ctx.globalCompositeOperation = "copy" 后，特别是如果重新使用 canvas 元素）绘制到 canvas 上
  6. 使用 canvasElement.toDataURL() 从 canvas 创建一个 PNG DataURL，并将 that 设置为 [=26= 的 href 属性] 元素在你的 HTML.