使用内联 SVG 作为网站图标答案

【问题标题】：Use inline SVG as favicon使用内联 SVG 作为网站图标
【发布时间】：2021-06-30 06:29:46
【问题描述】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/svg+xml" sizes="21x21" href="favicon16.svg">
    <title>Document</title>
</head>
<body>
    <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   </svg>
</body>
</html>

我只有一个页面 HTML，javascript 是内联的，我想创建一个网站图标并在 HTML 中使用它。请帮忙。

【问题讨论】：

标签： html svg

【解决方案1】：

您可以使用此工具对 SVG 进行编码 https://yoksel.github.io/url-encoder/
在此标记中添加编码的 SVG

&lt;link rel="icon" href="data:image/svg+xml,[YOUR ENCODED SVG HERE]" type="image/svg+xml" /&gt;

【讨论】：

【解决方案2】：

Favicon 需要是外部文件，或者[DataURL][1]，可以使用SVG，但需要保存为独立文件，并像“favicon16.svg”一样指向href。或者转换为base64并插入为DataURLRead more

但如果您尝试使用 SVG 即时创建自定义网站图标，我建议您使用以下方法：SVG to Base64、using base64 as favicon 和 how to change favicon dynamically

【讨论】：

不，可以是data URL
对不起，我想说的是“简单的方法”，第二部分是bas64的方法，我的英语不太流利，所以我表达得很糟糕。我已经用 dataURL 进行了编辑