我正在尝试在我的网站上获得一个SVG Favicon，但不管我做什么，它只是不想工作。
我在以前的favicon位置将以下代码保存为.svg文件，但是当我将favicon路径更改为.svg而不是.ico时，没有任何内容加载。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 384.5 283.4" style="enable-background:new 0 0 384.5 283.4;" xml:space="preserve" width="100%" height="100%">
<style type="text/css">
.shape1 {fill: #DB6B2A;}
.shape2 {fill: #AE1A31;}
</style>
<path class="shape1" d="M384.5,83.7c-4.6-19.3-14.3-36.3-29.3-51.3C333.4,10.6,307.6,0,276.7,0c-30.9,0-56.7,10.6-78.4,32.4
l-4.6,5.1l-4.5-5.1C167.4,10.6,141.6,0,110.8,0S54.1,10.6,32.4,32.4C10.6,54.1,0,79.9,0,110.8v61.1l55.1-12.8v-48.4
c0-15.2,5.6-28.3,16.2-39C82,60.7,95.1,55.1,110.8,55.1c30.4,0,55.1,25.3,55.1,55.6v22.9l55.6-12.7v-10.1c0-2.5,0-4.6-0.5-7.1
c1.5-12.1,7.1-22.8,16.2-31.9c10.6-11.1,23.8-16.7,39.5-16.7c25.4,0,46.9,17.2,53.3,40.7"/>
<path class="shape2" d="M54.5,187.6c6.4,23.5,27.9,40.7,53.3,40.7c15.7,0,28.8-5.6,39.5-16.7c9.1-9.1,14.7-19.7,16.2-31.9
c-0.5-2.5-0.5-4.6-0.5-7.1v-10.1l55.6-12.7v22.9c0,30.4,24.8,55.6,55.1,55.6c15.7,0,28.8-5.6,39.5-16.7
c10.6-10.6,16.2-23.8,16.2-38.9v-48.4l55.1-12.7v61.1c0,30.9-10.6,56.7-32.4,78.4c-21.7,21.7-47.5,32.4-78.4,32.4
c-30.9,0-56.7-10.6-78.4-32.4l-4.6-5.1l-4.6,5.1c-21.7,21.7-47.6,32.4-78.4,32.4s-56.7-10.6-78.4-32.4C14.3,236,4.6,219,0,199.7"/>
</svg>
这是我用来设置图标的代码;
<link rel="icon" href="http://www.MYSITE.co.uk/favicon.svg?v=4">
如果我的.svg代码存在问题，或者我遗漏了某些东西，我就无法解决问题。谢谢
Firefox，Safari和现在的Edge支持SVG favicons，但Chrome仍然是坚持：https://caniuse.com/#feat=link-icon-svg
在支持改进之前，您可能只想使用.png。
您需要为不支持SVG图标的浏览器（目前大部分都是这些图标）光栅化SVG。见Is there a way to render SVG favicons in unsupported browsers?
首先，你为你的爱好者使用的代码缺少一部分，它应该包含在某处。说：type =“image / x-icon”。所以对于favicon，使用.jpg或其他标准图像，如.gif，代码如下所示：
<link href="someimagesourcefileorURL.jpg" rel="icon" type="image/x-icon" />
1.对于图像扩展，.jpg工作[或者你可以使用另一个类似的文件扩展名; .gif也适用。] 2.对于rel，“icon”就足够了[但如果你愿意的话，你也可以在“icon”之前/之前放置“快捷方式”这个词。）
对于SVG“favicon”来说，由于一些原因，它有点棘手。这是可选的，但为了最好，您需要将SVG图像的大小设置为256平方像素（16像素乘16像素，但由于SVG通常是可伸缩的，我建议在尝试之前立即将高度和宽度设置为<= 16px将它们用作'favicon'。所以你需要将高度除以高度等于或小于16px所需的数量，宽度也是如此。如果你有一个正方形，均匀比例的图像，那么你应该能够简单地改变整个图像大小百分比，并且整个图像应该缩小而不会在保留方形的同时显着扭曲。如果你没有方形，你将不得不扭曲图像一些人正在将它变成方形的形状，因为favicons是16px乘16px的正方形。假设你已经进行了那些调整，我们继续前进。现在，在完成那部分之后，你将这种格式用于SVG “收藏夹图标”：
<link rel="icon" href="someimagefileorURL.svg" type="image/svg+xml" />
只要您的SVG图像已按上述方式调整大小，这应该可以正常工作。这是一个很好的JSfiddle（不是我的），它证明了这段代码的工作原理。 https://jsfiddle.net/Daniel_Hug/YawSn/我对使用我描述的第一种方法的传统favicons有很多经验。
希望这可以帮助！当我不知道如何使用/设置favicons时，我当然希望有人给我看这个！ :-)
你可以这样试试
<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
但大多数浏览器不支持
Optimized SVG Favicons可以只有100-200字节，因此在提出外部请求时没有多大意义。然后继续将其嵌入页面。这样，您将保存外部图像请求，该请求可能比请求图像时发送cookie时的预期更大。
正如其他人所指出的那样，浏览器支持还不是很好，但SVG Favicons提供了一些你无法用PNG做的事情 - 比如通过CSS设置样式甚至基于JS的动画。
这是the Chrome issue增加支持，自2013年开始，由于阻截者没有真正的进步。