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

Question

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

Answer 1

重用过程中与非序列化相关的部分如何将SVG元素设置为我的页面的favicon？:

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

Answer 2

我不知道任何垫片.不幸的是,我认为没有任何可行的方法,因为在浏览器用户界面而不是网站本身上显示了一个favicon.但是,我确实认为浏览器支持情况终于开始好转了.截至目前,Firefox中的SVG图标仅在第一页加载时加载,然后返回.png或关注(.ico如果有的话).即将推出的Safari 9也有部分支持,使用单色SVG favicons用于新的"固定标签"功能 - 但这需要SVG完全黑色,包含非官方mask属性,如果需要,可以定义单一颜色整个图标应使用(不相关)<meta name="theme-color">标签着色.Firefox似乎正在进行修复 (更新:在Firefox 41中修复),并且所有其他浏览器都有一个功能请求站点,用于实现SVG favicons(Edge,Chrome和Webkit/Safari).

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