在 HTML 头部中排序图标 <link> 标记的最佳实践

Posted 2023-03-10

技术标签:

【中文标题】在 HTML 头部中排序图标 <link> 标记的最佳实践【英文标题】：Best practice for ordering icon <link> tags in HTML head 【发布时间】：2018-11-25 04:32:53 【问题描述】：

我想在我的 html 头部中包含 <link> 标记，用于不同大小的各种图标。在<head> 标签中订购图标<link>s 的最佳做法是什么？我将它们包含在什么顺序中是否重要？从最小到最大？从大到小？

【问题讨论】：

【参考方案1】：

我认为您只想知道有关网站图标的信息，因为您的问题带有标签favicon。在其他情况下，我可以写一本关于它的书。 :-) 我没有找到有关尺寸顺序的信息，但是由于节省了服务器资源，我会从最小到最大的顺序进行。

Internet Explorer 9 在以下位置使用网站图标：
地址栏 (16x16) 新标签页 (32x32) 任务栏按钮 (32x32) 固定站点浏览器用户界面 (24x24)
在创建固定网站时，您可能需要通过以下方式使用其他图标：
跳转列表任务 (16x16) 缩略图工具栏按钮 (16x16) 叠加图标 (16x16)
为了在 Internet Explorer 9 中获得最佳体验，您的图标应支持以下图片尺寸：
推荐16x16, 32x32, 48x48 最佳16x16, 24x24, 32x32, 64x64

一个 ICO 文件可以包含多张图片，Microsoft 建议将 16x16、32x32 和 48x48 版本的图标放在 favicon.ico 中。例如，IE 将使用16x16 版本作为地址栏，使用32x32 作为任务栏快捷方式。

您可以像下面这样编写网站图标：

<link rel="icon" href="/path/to/icons/favicon.ico">

现代桌面浏览器（IE11、Chrome、Opera、Firefox...）更喜欢使用 PNG 图标。通常的预期尺寸是16x16、32x32 和“尽可能大”。例如，MacOS/Safari 使用196x196 图标，如果它是它所能找到的最大的。

PNG 图标声明为：

<link rel="icon" type="image/png" href="/path/to/icons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-32x32.png" sizes="32x32">
...

文档：<link>: The External Resource Link element on MDN。

推荐的尺寸是多少？选择您最喜欢的平台：

Most desktop browsers: 16x16, 32x32, "as big as possible" android Chrome: 192x192（添加到智能手机的主屏幕）谷歌电视：96x96

关于经典而非经典网站图标的附加信息：

Favicons - Best practices（很多信息不是经典的网站图标） MSDN 上的Creating custom tiles for IE11 websites Here's Everything You Need to Know About Favicons in 2017 Configuring Web Applications Microsoft defines the tile picture Favicon Generator

【讨论】：

这并没有回答我关于图标大小顺序的问题，这是我所问的。我应该按什么顺序声明图标？ @JulianLachniet，就像我已经写过的：如果你想节省服务器资源，那么我宁愿使用从小到大的顺序。但是，如果您想为用户提供最佳质量的图标，请使用从大到小的顺序。【参考方案2】：

来自 HTML5 specs:

指定的资源是代表页面或站点的图标，并且用户代理在表示页面时应该使用用户界面。

图标可以是听觉图标、视觉图标或其他类型的图标。如果提供了多个图标，用户代理必须选择最根据类型、媒体和尺寸属性选择合适的图标。如果有多个同样合适的图标，用户代理必须使用用户代理时按树顺序声明的最后一个收集图标列表。如果用户代理尝试使用图标但经过仔细检查，该图标被确定为实际上是不合适（例如，因为它使用了不受支持的格式），那么用户代理必须尝试下一个最合适的图标，由属性。

这真的取决于网络浏览器来确定使用哪个图标，所以在我看来，订购应该不是什么大问题。我建议您采用与规范中的示例相同的方法。

<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">

希望这会有所帮助！

【讨论】：

【参考方案3】：

我建议每个 rel 标签从最大到最小。然后设备或用户代理应该使用它可以支持的最高分辨率图像。

【讨论】：

以上是关于在 HTML 头部中排序图标 <link> 标记的最佳实践的主要内容，如果未能解决你的问题，请参考以下文章

10HTML头部

外部样式表用标签<link/>导入放在头部，为啥不需要<style></style>,而@import要放在 <style>里面？