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

Question

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

Answer 1

重用How do you set GDB debug flag with cmake?：

中程序的非序列化相关部分

1. 创建<canvas>元素（以下简称canvasElement）。
2. 创建<img>元素（以下简称imageElement）并将其href设置为您的SVG图标。
3. 加载图像后（通过在设置complete后检查元素的href属性，如果是，则直接调用以下步骤并将其添加为load的侦听器如果没有，则设置画布尺寸以匹配canvasElement.width = imageElement.width和canvasElement.height = imageElement.height）。
4. 使用canvasElement.getContext('2d')（以下简称ctx）为画布创建绘图上下文。
5. 使用ctx.globalCompositeOperation = "copy"在画布上绘制图像（在设置ctx.drawImage(imageElement, 0, 0, canvasElement.width, canvasElement.height)之后，尤其是在重新使用画布元素时）。
6. 使用canvasElement.toDataURL()从画布创建PNG DataURL，并将 设置为HTML中href元素的<link rel="icon">属性。

Answer 2

我不知道任何垫片。不幸的是，我认为没有任何可行的方法，因为在浏览器用户界面而不是在网站本身上显示了一个favicon。但是，我确实认为浏览器支持情况终于开始好转了。截至目前，Firefox中的SVG图标仅在第一页加载时加载，然后回退到.png或.ico favicons（如果有的话）。 The upcoming Safari 9 also has partial support，使用单色SVG favicons用于新的“固定标签”功能 - 但这需要SVG完全黑色，包含非正式mask属性，如果需要，可以定义单色，整个图标应使用（无关）<meta name="theme-color">标记进行着色。 Firefox seems to be working on a fix （更新：在Firefox 41中修复），所有其他浏览器都有一个功能请求网站，可以实现SVG favicons（Edge，Chrome和Webkit/Safari）。

目前，除了指定<link rel="icon" sizes="any" href="favicon.svg" type="image/svg+xml">之外，您还应继续指定.png和/或.ico图标。