使用内联 SVG 作为网站图标

Question

使用内联 SVG 作为网站图标

我有一个 HTML 页面，我想从内联 svg 创建一个 favicon 并在 HTML 中使用它。如何进行？

这是我目前的尝试：

<!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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jer*_*mie 20

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

<link rel="icon" type="image/svg+xml"
      href="data:image/svg+xml,[YOUR ENCODED SVG HERE]" />

Run Code Online (Sandbox Code Playgroud)

Answer 2

小智 8

可以是dataURL，不需要使用base64。您只需要将“#”与“%23”交换，将所有内容放在一行中，当然要小心引号。我的搜索引擎页面图标：

<link
  rel="shortcut icon"
  href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='.8 .8 14.4 14.4'><path d='M10 8.99a1 1 0 00-.695 1.717l4.004 4a1 1 0 101.414-1.414l-4.004-4A1 1 0 0010 8.99z' fill='%2380b0ff' stroke='%235D7FDDaa' stroke-width='.3'/><path d='M6.508 1C3.48 1 1.002 3.474 1.002 6.5S3.48 12 6.508 12s5.504-2.474 5.504-5.5S9.536 1 6.508 1zm0 2a3.486 3.486 0 013.504 3.5c0 1.944-1.556 3.5-3.504 3.5a3.488 3.488 0 01-3.506-3.5C3.002 4.556 4.56 3 6.508 3z' fill='%2380b0ff' stroke='%235D7FDDaa' stroke-width='.3'/></svg>"
>

Run Code Online (Sandbox Code Playgroud)

但正确的做法应该是：

<link
  rel="shortcut icon"
  href="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='.8%20.8%2014.4%2014.4'%3e%3cpath%20d='M10%208.99a1%201%200%2000-.695%201.717l4.004%204a1%201%200%20101.414-1.414l-4.004-4A1%201%200%200010%208.99z'%20fill='%2380b0ff'%20stroke='%235D7FDDaa'%20stroke-width='.3'/%3e%3cpath%20d='M6.508%201C3.48%201%201.002%203.474%201.002%206.5S3.48%2012%206.508%2012s5.504-2.474%205.504-5.5S9.536%201%206.508%201zm0%202a3.486%203.486%200%20013.504%203.5c0%201.944-1.556%203.5-3.504%203.5a3.488%203.488%200%2001-3.506-3.5C3.002%204.556%204.56%203%206.508%203z'%20fill='%2380b0ff'%20stroke='%235D7FDDaa'%20stroke-width='.3'/%3e%3c/svg%3e"
>

Run Code Online (Sandbox Code Playgroud)

...所以杰里米的链接可能很有用。

Answer 3

Ser*_*lho -2

Favicon需要是一个外部文件，或者一个.svg [DataURL][1]，您可以使用SVG，但它需要保存为独立文件，并指向href“favicon16.svg”之类的文件。或转换为 base64 并插入为DataURL 阅读更多

但是，如果您尝试使用 SVG 动态创建自定义 favicon，我建议您使用以下方法：SVG to Base64，使用 base64 作为 favicon以及如何动态更改 favicon

归档时间：	4 年，6 月前
查看次数：	10010 次
最近记录：	1 年，11 月前