如何生成网站 favicon 的 HTML 代码和 SVG 标记

先了解可获得的结果

如果你要为网站准备浏览器标签页图标相关代码，这个工具可以根据可选的图标 URL、表情符号以及颜色输入，生成 HTML favicon 标记和 SVG favicon 标记。生成结果同时提供适合放入网页的 HTML 内容，以及可单独查看或使用的 SVG 内容。HTML 中还会包含一个 SVG data URI 图标链接，因此你可以根据网站的引用方式选择所需结果。需要注意的是，网站标题输入虽然可以填写，却不会出现在生成的标记中；它不是用来设置图标文字、文件名或页面标题的字段。

填写输入并生成 favicon 标记

打开工具后，先查看输入区域，并按需要填写图标 URL。这个字段可以留空；如果填写内容，请把它当作希望写入 favicon 链接标记的地址，而不是图像上传入口。
在表情符号字段中输入希望显示在 SVG 内的字符。未填写时，生成的 SVG 会使用扳手表情符号作为默认文字。接着填写背景色和文字颜色；没有提供时，背景色使用 #2563eb，文字颜色使用 #ffffff。
如果界面提供网站标题字段，可以按照自己的记录习惯填写，但它不会参与生成结果。确认输入后执行生成操作，等待结果区域显示生成的内容。
查看 HTML favicon 标记和 SVG favicon 标记，再按实际用途复制相应部分。图标 URL 非空时，HTML 会包含两个使用经过 HTML 转义的该地址的图标链接元素；同时，结果会提供 SVG data URI 图标链接和独立的 SVG 标记。这样可以分别处理网页中的引用内容与 SVG 本身，而不必把两种结果混为一谈。

理解各部分输出的用途

阅读结果时，先区分两类输出：HTML favicon 标记用于查看网页图标链接写法，SVG favicon 标记则是图标本身的矢量标记内容。SVG 中的文字来自你填写的表情符号，背景和文字颜色来自对应输入；如果这些输入为空，应按扳手表情符号、#2563eb 和 #ffffff 这组默认值理解。

图标 URL 的作用范围是进入 HTML favicon 链接标记。非空地址会以经过 HTML 转义的形式出现在两个图标链接元素中，这并不表示工具会根据地址取得或处理图像。若结果中需要网页引用，可查看 HTML 内容；若要单独使用图标标记，则查看独立提供的 SVG 内容。网站标题没有生成作用，所以不能通过它改变图标外观或输出文本。

使用示例

你正在为一个网站准备深色背景和星星图案的 favicon 标记，并希望同时取得 HTML 与 SVG 两种结果。

在图标 URL 字段中输入一个非空图标地址，将表情符号设为星星，背景色设为 #111827，文字颜色设为 #f9fafb，然后执行生成。

结果包含 HTML favicon 标记和 SVG favicon 标记；HTML 中包含 SVG data URI 图标链接，且非空图标地址会出现在两个经过 HTML 转义的图标链接元素中。

使用限制

图标 URL 的支持范围是将地址插入 HTML favicon 链接标记，工具不会负责取得、验证或转换该地址指向的图像；网站标题也不会用于生成结果。

常见错误

如果把图标 URL 当成图像上传、下载或转换入口，得到的结果可能与预期不符。请将它填写为要插入 HTML favicon 链接标记的地址，并检查生成内容中经过 HTML 转义的地址。

常见问题

图标 URL 可以不填写吗？

可以。留空时仍可执行生成；只有在该字段包含非空地址时，HTML 才会加入两个使用经过 HTML 转义地址的图标链接元素。

可以用表情符号制作 SVG favicon 吗？

可以。输入的表情符号会作为文字放入 SVG；如果不输入字符，结果会采用扳手表情符号作为默认文字。

填写网站标题会改变 favicon 吗？

不会。网站标题字段可以接受输入，但生成的标记不使用它；要调整 SVG 外观，应修改表情符号、背景色或文字颜色。