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

到目前为止，似乎唯一支持它们的浏览器是Firefox。显然Opera过去支持它，但后来放弃了。也许是JavaScript垫片？

我不知道有垫片。不幸的是，我认为没有任何一种方法可以奏效，因为favicon显示在浏览器用户界面中，而不是网站本身。然而，我相信浏览器支持情况终于开始改善了。到目前为止，Firefox中的SVG图标仅在第一页加载时加载，然后返回到

.png

或

.ico

favicons（如果有的话），对于新的“固定标签”功能，使用单色SVG favicons，但这要求SVG完全为黑色，包含一个非官方的

mask

属性，如果需要，可以定义单色，整个图标应使用（不相关的）

标记着色。（更新：在Firefox 41中修复），所有其他浏览器都有一个要实现的SVG favicons的功能请求站点（，和）

---

现在，除了指定

，您还应该继续指定

.png

和/或

.ico

图标。

从以下位置重新使用过程的非序列化相关部分：

创建一个

元素（以下称为

canvasElement

）

创建一个

元素（以下称为

imageElement

），并将其

href

设置为SVG图标

加载图像后（通过在设置

href

后检查元素的

complete

属性，如果是，则直接调用以下步骤，如果不是，则将其添加为

加载

事件的侦听器），将画布尺寸设置为与

canvascelement.width=imageElement.width

和

canvascelement.height=imageElement.height

）匹配

使用

canvasElement.getContext（'2d'）

（以下称为

ctx

）为画布创建绘图上下文

使用

ctx.drawImage（imageElement，0，0，canvasElement.width，canvasElement.height）在画布上绘制图像（在设置
ctx.globalCompositeOperation=“copy”
后，尤其是在重新使用canvas元素时）

使用

canvascelement.toDataURL（）

从画布创建PNG数据URL，并将其设置为HTML中

元素的

href

属性

---

我找到了一些东西-也许能帮上忙？它将SVG转换为

，然后再转换为PNG。现在最好继续使用SVG和PNG。我希望更多的浏览器开始支持SVG favicons，看看有多少不同大小的浏览器在使用。有没有办法强迫Firefox使用SVG而不是PNG？SVG文件要小得多，我更希望Firefox等支持浏览器使用它，而不是PNG文件。@Brandon我完全同意——比如，一定要投票表决。Firefox似乎使用了指定的最后一个favicon（有些人也使用了列表中的第一个-这真是一团糟），因此我将我的

作为我的最后一个

，这就是Firefox 41+中显示的版本（不过我不知道后台加载了什么）。干杯请注意，所有现代浏览器都遵循HTML图像加载生活标准中描述的行为，在触发

load

事件之前，不应设置

complete

属性：请参阅，以获取预期符合规范行为的重写版本。