网页元数据（head 部分有什么？）

为你的网站添加自定义图标

为了进一步丰富你的网站设计，你可以在元数据中添加对自定义图标的引用，这些图标将在特定上下文中显示。其中最常用的是 favicon（“收藏夹图标”的缩写，指其在浏览器“收藏夹”或“书签”列表中的使用）。

不起眼的 favicon 已经存在多年了。它是这种类型图标中的第一个：一个 16 像素的方形图标，用于多个位置。你可能会看到（取决于浏览器）在包含每个打开页面的浏览器选项卡中以及书签面板中的书签页面旁边显示 favicon。

可以通过以下方式将 favicon 添加到你的页面：

将其保存到与站点索引页相同的目录中，以.ico格式保存（大多数也支持更常见的格式如.gif或.png的 favicon）。

在你的 HTML 的块中添加以下行来引用它：

html

这是一个书签面板中 favicon 的示例：

您可能还需要针对不同环境使用不同的图标。例如，您会在 MDN Web Docs 主页的源代码中找到这些内容：

html

这是一种让网站在保存到 Apple 设备主屏幕时显示图标的方法。你甚至可能希望为不同的设备提供不同的图标，以确保图标在所有设备上都看起来不错。例如：

html

rel="apple-touch-icon"

sizes="167x167"

href="/apple-touch-icon-167x167.png" />

rel="apple-touch-icon"

sizes="180x180"

href="/apple-touch-icon-180x180.png" />

rel="apple-touch-icon"

sizes="152x152"

href="/apple-touch-icon-152x152.png" />

注释解释了每个图标的用途——这些元素涵盖了例如在网站保存到 iPad 主屏幕时提供一个漂亮的高分辨率图标等内容。

现在不用太担心实现所有这些类型的图标——这是一个相当高级的功能，你不会被要求掌握这些知识才能继续课程。这里的主要目的是让你了解这些东西是什么，以防你在浏览其他网站的源代码时遇到它们。如果你确实想了解更多关于所有这些值以及如何选择它们的信息，请阅读元素的参考页面。

注意：如果您的网站使用内容安全策略 (CSP) 来增强其安全性，则该策略适用于网站图标。如果您遇到网站图标无法加载的问题，请验证Content-Security-Policy标头的img-src指令没有阻止对其的访问。