logo标签列表

SVG网站图标无法正常显示

htmlsvgfavicon
88

我试图在我的网站上获取一个SVG图标，但无论我做什么，它都不想工作。

我将以下代码保存为.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"  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代码的问题，还是我漏掉了什么。

谢谢。

我不是网站专家，但你认为SVG版本和链接版本应该匹配吗？version="1.1" vs. ?v=4。 - icebird76
在路径上有两个“class”属性，最好用内联属性替换 <path fill="#DB6B2A" d="..." ... 注意到 icebird ... v=4 是一个缓存破坏 id。 - Ruskin
6个回答
133

现在 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仍然不受支持，截至v16.x版本。
自 Firefox 58 版本开始支持。 - NVRM
1
@Cryptopat - 我相信自从 Firefox 20 左右的版本开始就有了...甚至可能更早。 - serraosays
3
暂不支持 Safari。 - aarjithn
8

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

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

1. 对于图像扩展名，.jpg有效[或者您可以使用另一个类似的文件扩展名; .gif也有效]。 2. 对于rel属性，“icon”足以[但是如果您想要，您也可以在“icon”之前或之后加上“shortcut”这个词，选择性地]

对于SVG 'favicon'会有一些难度，原因有几个。这不是必需的，但为了使其最好工作，需要将SVG图像调整为小于256平方像素（16像素乘16像素），但由于SVG通常可缩放，建议在尝试将它们用作'favicon'之前立即将高度和宽度设置为<=16px。因此，需要将高度除以所需数字以使高度等于或小于16px，宽度也是如此。如果您有一个正方形，均匀成比例的图像，然后您应该能够通过百分比改变整个图像大小，并且整个图像应该在保留正方形形状的同时显著缩小而不会失真。如果您没有一个正方形的形状，则在将其变成近似正方形的形状的过程中，您将不得不在转换过程中略微扭曲图像，因为“favicons”是16px×16px的正方形。假设您已经做出了这些调整，我们将继续进行。现在，在该部分完成后，您可以使用以下格式来使用SVG 'favicons'：

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

只要您像上述所述将SVG图像调整大小，那么这应该可以正常工作。这里有一个很好的JSFiddle（不是我的），演示了这个代码的工作原理。https://jsfiddle.net/Daniel_Hug/YawSn/ 我在使用我所描述的第一种方法与传统的网站图标有很多经验。
希望这可以帮助您！我当时还不知道如何使用/设置网站图标，真希望有人向我展示过这一点！ :-)
SVG高度小于16像素？对我来说看起来很玄学。我认为这不是必要的。我使用180像素的SVG作为网站图标。我猜如果我使用1800像素或18000像素，它看起来也会一样。 - guettli
玄学？真的吗？但是你是对的，当然不需要使用高度为16px的SVG。但是你也可以，当然，为任何高度使用SVG。 - Sean Tank Garvey
5
您可以尝试这个：
<link rel="icon" href="gnome.svg" sizes="any" type="image/svg+xml">
4
3

优化的SVG网站图标可以仅为100-200字节，因此没有必要进行外部请求。直接嵌入到页面中即可。这样做可以节省外部图片请求，因为在请求图像时可能会发送cookie，导致请求变大。

正如其他人所指出的那样，浏览器支持还不够好，但是SVG网站图标提供了一些PNG无法实现的功能，例如通过CSS进行样式设置，甚至可以使用基于JS的动画效果。

这里是Chrome问题的链接，该问题从2013年到2020年一直存在，并且由于存在阻碍因素而没有取得真正的进展。最终在2020年初得到解决，由Matthew Steeples提到。

1
截至2020年2月，它现在已经在Chrome中了。 - Matthew Steeples
2
对于Angular 9及以上版本，您还需要将favicon.svg放入assets文件夹中。
<link rel="icon" href="assets/favicon.svg" type="image/svg+xml" />

也要在 angular.json 中的 assets 列表中列出该文件。
     "assets": [
              ...,
              "src/assets/favicon.svg"
            ],
谢谢，兄弟。我已经找了一个小时了。 - undefined
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接