SVG Favicon不工作

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代码存在问题,或者我遗漏了某些东西,我就无法解决问题.谢谢

Answer 1

Firefox,Safari和Edge现在支持SVG favicons,但Chrome仍然是坚持:https: //caniuse.com/#feat=link-icon-svg

在支持改进之前,您可能只想使用.png.

Answer 2

首先，您用于收藏夹图标的代码缺少一部分，它应该包含在某处。上面写着：type="image/x-icon"。因此，对于收藏夹图标，使用 .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将它们用作“收藏夹图标”。因此，您需要将高度除以所需的任何数字，以使高度等于或小于 16 像素，宽度也是如此。如果您有一个正方形，比例均匀的图像，那么您应该能够简单地按百分比更改整个图像的大小，并且整个图像应该缩小而不会显着扭曲，同时保留方形。如果您没有方形，则“ 在将图像变成方形的过程中，必须对图像进行一些扭曲，因为网站图标是 16 像素 x 16 像素的正方形。假设您已经进行了这些调整，我们将继续前进。现在，在该部分完成后，您可以将这种格式用于 SVG 'favicon'：

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

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

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

Answer 3

您需要为不支持SVG图标（目前大多数是SVG图标）的浏览器光栅化SVG。请参阅是否可以在不受支持的浏览器中呈现SVG网站图标？

Answer 4

你可以试试这个：

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