【.com快速翻译】我最近一直在做一个副项目（StyleCheck和Bedrocss），就像我拥有的??任何其他长期项目一样，我已经到了想要添加一个图标。所以，我决定尝试使用SVG图标，这对于BOOSafari来说已经足够了，但对于某些需求来说还不够。如果在不支持的浏览器上不显示任何图标，这也是可以接受的。通过使用SVG，您可以获得很多好处，例如：?单个文件的清晰图像质量?支持表情符号?内联图标（无需链接资产）?深色模式检测为了了解如何添加SVG图标对于您的项目，我们将通过以下示例（表情符号除外）使用非常基本的圆形SVG：将SVGFavicon添加到HTML扩展名）。在HTML文件的标签中放置一个元素，其rel属性设置为“icon”，href属性设置为图标所在的路径。因为我们使用的是SVG，favicon可以是任何你想要的大小，只要确保画布是正方形的。Icones是一个很好的资源，如果你需要搜索免费图标，或者你可以使用penpot创建你自己的图标。将SVGFavicons作为数据URI内联在切换到SVGfavicons之后，我尝试的第一件事是看看我是否可以将它们与内联格式一起使用，而不是链接到一个单独的文件。我对内联图像或背景使用了Data-URI技巧，效果非常好，它也适用于网站图标。不要链接到路径，而是在整个SVG代码前加上data:image/svg+xml;utf8,（包括最后一个逗号）并将整个内容传递给href属性。...">我真的很喜欢这种方法因为如果你忘记把图标文件放在某个地方一个文件夹，我可以将这段代码复制/粘贴到任何项目中（我的大多数副项目都使用相同的图标）。当然，你可能会觉得这样使用内联SVG图标不太好，因为它会占用内存，而且在每个页面上都添加内联SVG会增加HTML的大小。如果您只有一个网站要处理，这可能不是什么大问题，但对于维护多个网站并使用相同图标的人来说，这是一个不错的选择。使用emoji表达FaviconLeaVerou在Twitter上展示了如何将emoji添加为Favicon，方法非常简单易用。语法和以前一样，因为SVG通过元素支持文本内容，表情符号几乎都是文本，你可以在SVG中放置任何表情符号（可能需要四处移动以获得正确的位置有点适应).[placeemojihere]"/>这使得创建网站图标非常容易，而无需创建自定义网站图标。查看BrysonReece的emojicon.dev以获取表情符号列表，单击其中任何一个，然后将整个图标片段复制到剪贴板。除此之外，WesBos还创建了fav.farm。这是一项第三方服务，可为您生成网站图标。您可以使用您想要的任何表情符号直接链接到他的服务。开发社区的创造力从未停止，那里有很多很酷、很聪明、很有创意的开发者。添加深色模式检测我们可以向SVG添加">在此示例中，我直接将SVG和作为目标，但您也可以使用类。对于自定义SVG，您可能需要这样做。SVG中的
