SVG 收藏夹无效

我试图得到一个 SVG 的收藏夹在我的网站上，但无论我做什么，它只是不想工作。

我将下面的代码保存为。Svg 文件在我通常的收藏图标位置，但是当我改变收藏图标路径为。代替。伊科，没什么大不了的。

<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 代码的问题，或者我遗漏了什么。 谢谢

102846 次浏览
小开
最佳答案

SVG favicons are now supported for Firefox, Chrome, Edge and Opera: https://caniuse.com/#feat=link-icon-svg

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

Safari remains unsupported, as of v15.x

小开

You need to rasterize the SVG for browsers that don't support SVG icons (which is currently most of them). See Is there a way to render SVG favicons in unsupported browsers?

小开

You can try this:

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

First of all the code you are using for your favicons is missing one part, it should include, somewhere. that says: type="image/x-icon". So for favicons, using .jpg or other standard images like .gif the code looks like this: 

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

1. For image extension, .jpg works [or you can use another comparable file extension; .gif works too.] 2. For rel, "icon" is sufficient [but you can also put the word "shortcut" next to/before "icon" if you want, optionally.]

For an SVG 'favicon' it's a little trickier, for a few reasons. This is optional but to work best, you need the SVG image to be sized to under 256 square pixels (16 pixels by 16 pixels, but since SVG are normally scalable, I recommend setting the height and width to both <=16px immediately before trying to use them as a 'favicon'. So you need to divide your height by whatever number is needed to get the height to equal or be less than 16px and the same is true for width. If you have a square, evenly-proportioned image, then you should be able to simply change the entire image size by a percentage and the whole image should scale down without distorted significantly while retaining the square shape. If you don't have a square shape, you'll have to distort the image some in the process of turning it into a square-ish shape because favicons are 16px by 16px squares. Assuming you've already made those adjustments, we're moving on. Now, after that part is done, you use this format for SVG 'favicons':

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

That should work as long as your SVG image has been sized down already as described above. Here's a good JSfiddle (not-mine) that demonstrates that this code works. https://jsfiddle.net/Daniel_Hug/YawSn/ And I have lots of experience with the traditional favicons working with the first method I described.

Hope this helps! I sure wish someone showed me this when I didn't know how to use/set-up favicons yet! :-)

小开

Optimized SVG Favicons can be as little as 100-200 bytes so there's not much sense in making an external request. Just go ahead and embed it on the page. In doing so you'll save an external image request which could be larger than expected due to cookies getting sent when images are requested.

As others have pointed out, the browser support isn't great yet but the SVG Favicons afford some things you simply can't do with PNG—such as styling via CSS and even JS-based animation.

Here's the Chrome issue to add support, open from 2013 to 2020 with no real progress due to blockers. Finally resolved in early 2020 as mentioned by Matthew Steeples.

小开

For Angular version 9+ you also have to put favicon.svg into the assets folder.

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

Also list the file in the assets in angular.json

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

提交答案