SVG 图标不工作

Question

我试图在我的网站上获得一个 SVG Favicon，但无论我做什么，它就是不想工作。

我已将以下代码保存为 .svg 文件，保存在我常用的收藏夹位置，但是当我将收藏夹路径更改为 .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 代码有问题，或者我遗漏了什么，我无法确定。谢谢

原文由 Sam Willis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Firefox、Chrome、Edge 和 Opera 现在支持 SVG 图标： https ://caniuse.com/#feat=link-icon-svg

 <link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">

Safari 仍然不受支持，截至 v15.x

原文由 serraosays 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

首先，您用于网站图标的代码缺少一部分，它应该包含在某处。上面写着：type=“image/x-icon”。因此，对于网站图标，使用 .jpg 或其他标准图像（如 .gif），代码如下所示：

 <link href="someimagesourcefileorURL.jpg" rel="icon"  type="image/x-icon" />

1. 对于图像扩展名，.jpg 可以[或者您可以使用其他类似的文件扩展名； .gif 也适用。] 2. 对于 rel，“图标”就足够了 [但如果需要，您也可以在“图标”旁边/之前放置“快捷方式”一词，这是可选的。]

对于 SVG“favicon”，由于一些原因，它有点棘手。这是可选的，但要达到最佳效果，您需要将 SVG 图像的大小设置为小于 256 平方像素（16 x 16 像素，但由于 SVG 通常是可缩放的，我建议在尝试之前立即将高度和宽度设置为 <=16px将它们用作“网站图标”。因此，您需要将高度除以使高度等于或小于 16px 所需的任何数字，宽度也是如此。如果您有正方形、比例均匀的图像, 那么您应该能够简单地按百分比更改整个图像的大小，并且整个图像应该缩小而不会显着扭曲，同时保持方形。如果没有方形，则必须扭曲图像一些正在将它变成方形的形状，因为 favicons 是 16px x 16px 的正方形。假设您已经进行了这些调整，我们将继续。现在，完成该部分后，您将这种格式用于 SVG “图标”：

 <link rel="icon" href="someimagefileorURL.svg" type="image/svg+xml" />

只要您的 SVG 图像已按上述方式缩小尺寸，它就应该可以工作。这是一个很好的 JSfiddle（不是我的），它证明了这段代码是有效的。 https://jsfiddle.net/Daniel_Hug/YawSn/ 我对使用我描述的第一种方法的传统网站图标有很多经验。

希望这可以帮助！当我还不知道如何使用/设置网站图标时，我当然希望有人向我展示这个！ :-)

原文由 Sean Tank Garvey 发布，翻译遵循 CC BY-SA 3.0 许可协议