如何将内联SVG与rel="icon"的<link>标签结合使用？

你需要把内联SVG转换成<link>标签能识别的资源格式，这里有两种实用方法：

方法1：直接用Data URI嵌入SVG #

不用单独创建SVG文件，把你的SVG代码转成Data URI格式，直接填到<link>的href里就行：

1. 先把SVG代码压缩成一行，去掉多余的换行和空格，比如：

<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /></svg>

2. 把这段代码放到data:image/svg+xml;charset=utf-8,后面，注意把SVG里的双引号换成单引号（避免和href的双引号冲突），最终的<link>标签如下：

<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;charset=utf-8,<svg width='100' height='100'><circle cx='50' cy='50' r='40' stroke='green' stroke-width='4' fill='yellow' /></svg>" />

方法2：保存为单独SVG文件引用 #

如果更习惯用文件形式，把你的内联SVG代码复制出来，保存成一个单独的.svg文件（比如custom-favicon.svg），然后用<link>直接引用这个文件：

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

custom-favicon.svg的内容就是你写的SVG代码：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

两种方法各有好处：Data URI不用额外发请求，适合小图标；单独文件方便后续修改复用，适合需要多次调用的图标。

内容的提问来源于stack exchange，提问作者Serge Hulne