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 代码有问题，还是我遗漏了什么。谢谢

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">

截至 v15.x

，Safari 仍然不受支持

Answer 2

您需要为不支持 SVG 图标的浏览器（目前是大多数浏览器）栅格化 SVG。参见

Answer 3

你可以试试这个：

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

Answer 4

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

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

1.对于图像扩展名，.jpg 有效 [或者您可以使用其他类似的文件扩展名； .gif 也可以。] 2。对于 rel，"icon" 就足够了 [但如果需要，您也可以将单词 "shortcut" 放在 to/before "icon" 之后。]

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

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

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

希望对您有所帮助！当我还不知道如何 use/set-up 网站图标时，我真希望有人能给我看这个！ :-)

Answer 5

Optimized SVG Favicons 可以小至 100-200 字节，因此发出外部请求没有多大意义。只需继续并将其嵌入页面即可。这样做时，您将保存一个外部图像请求，由于在请求图像时会发送 cookie，该请求可能比预期的要大。

正如其他人指出的那样，浏览器支持还不是很好，但是 SVG Favicons 提供了一些您根本无法使用 PNG 做的事情——例如通过 CSS 设置样式，甚至是基于 JS 的动画.

这里是 Matthew Steeples 的 the Chrome issue to add support, open from 2013 to 2020 with no real progress due to blockers. Finally resolved in early 2020 。

Answer 6

对于 Angular 版本 9+，您还必须将 favicon.svg 放入资产文件夹。

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

同时列出资产中的文件 angular.json

     "assets": [
              ...,
              "src/assets/favicon.svg"
            ],

SVG 图标不工作

SVG Favicon Not Working

html

svg

favicon