SVG Favicon 不工作

Posted 2023-03-28

【中文标题】SVG Favicon 不工作

【英文标题】：SVG Favicon Not Working

【发布时间】：2016-03-30 12:01:03

【问题描述】：

我正在尝试在我的网站上获取 SVG Favicon，但无论我做什么，它都无法正常工作。

我将以下代码保存为 .svg 文件，保存在我常用的 favicon 位置，但是当我将 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"   >

<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 代码有问题，还是我遗漏了一些东西。 谢谢

【问题讨论】：

我不是网络专家，但是您认为 svg 版本和链接版本应该匹配吗？ version="1.1" 与 ?v=4.

路径上有两个class 属性，用内联属性<path fill="#DB6B2A" d="..." 替换可能更好...注意icebird ... v=4 是缓存清除ID。

【参考方案1】：

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

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

在 80.x 版本中添加了对 Chrome 的支持。

【讨论】：

自 58 版起受 Firefox 支持。

@Cryptopat - 我相信在 Firefox 20 年代的某个地方......也许更早。

Safari 尚不支持

【参考方案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 像素 x 16 像素，但由于 SVG 通常是可缩放的，我建议在尝试之前立即将高度和宽度都设置为

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

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

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

【讨论】：

SVG 的高度小于 16 像素？对我来说看起来很深奥。我不认为这是必要的。我使用 SVG 作为 180px 的图标。我想如果我使用 1800px 或 18000px 看起来会一样。

深奥？真的吗？但你是对的，当然不需要 16px 高度的 SVG。当然，您也可以将 SVG 用于任何高度。

【参考方案3】：

你可以试试这个：

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

【参考方案4】：

对于不支持 SVG 图标（目前大多数浏览器）的浏览器，您需要栅格化 SVG。见Is there a way to render SVG favicons in unsupported browsers?

【参考方案5】：

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

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

这里是 the Chrome issue 添加支持，从 2013 年到 2020 年开放，由于阻止程序没有实际进展。最终在 2020 年初通过as mentioned 由 Matthew Steeples 解决。

【讨论】：

截至 2020 年 2 月，它现在在 Chrome 中

【参考方案6】：

对于 Angular 9+，您还必须将 favicon.svg 放入 assets 文件夹中。

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

同时在 angular.json 中列出 assets 中的文件

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