【发布时间】：2020-06-17 10:24:05
【问题描述】：
这个标签我已经看过好几次了，但找不到一个我们“非专业人士”都能理解的简单解释。
【问题讨论】：
-
您正在查看favicon tag，这就是您在地址栏中设置小图标的方式。
标签： html
【发布时间】：2020-06-17 10:24:05
【问题描述】：
来自MDN：
rel 代表“关系”，可能是关键之一 元素的特征 - 值表示项目如何 链接到与包含文档相关。正如你将看到的 我们的链接类型参考，有很多不同的类型 关系。
根据您的问题，data 可能指向一个 base64 编码值，该值将呈现为网站的图标。您也可以对其他元素的值进行 base64 编码，例如在此示例中：
<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7">
href='data: 是什么？
嗯，href 是一个超文本引用。通常，您会看到 href 的值指向文件或链接的路径，例如：
<a href="some-page.html">
但它可以指向编码图像。表示编码图像的方式是使用data。所以我们要求浏览器将href 与我们在data: 中创建的图像相关联。
示例图标结构
这里是一个示例结构，您可以按照 base64 对图标进行编码。正如@agrm 指出的评论，您还需要指定mediatype。
<link rel="icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF/QA6OjoAKysrABwcH" />
【讨论】：
-
是的，我看过 favicon.ico 行，例如：
-
@Rhino 我的回答是否为您提供了解决方案？如果是这样，请接受它:)
-
糟糕，输入太早了。我见过 favicon.ico 行，例如： 但请跟我解释一下“ href='data:, " 部分.....
-
数据url格式为
data:<mediatype>,<data>。您看到的图标 (data:,) 没有给出媒体类型或数据，这意味着它将是一个空图标。 -
好的，所以 行自己没有做任何事情？？ （它需要一个base64编码的数据sring来实际显示一个favicon）？？ （程序行来自另一个html程序的cut n' paste，这就是为什么我不知道它是如何工作的）。因此，如果我设法生成一个 base64 编码的网站图标代码字符串，是否应该将此字符串放在该行的“数据：”部分之后？？
标签在不请求服务器的情况下返回一个空图像。
您出于速度原因使用它：您避免了 1 个服务器请求、1 个数据传输、1 个布局/渲染浏览器计算。例如，我有一个静态 HTML，其大小为 10ko，仅包括 1 个服务器请求。我的网站图标是 9ko。而且我不想将请求和传输大小乘以 2。
【讨论】：