在 HTML 标题中排序图标 <link> 标签的最佳实践
Best practice for ordering icon <link> tags in HTML head
我想在我的 HTML 标题中包含 <link> 标签到各种不同大小的图标。在 <head> 标签中排序图标 <link> 的最佳做法是什么？我将它们包含在什么顺序中重要吗？从最小到最大？从大到小？
我建议每个 rel 标签从大到小。然后设备或用户代理应使用它可以支持的最高分辨率图像。
我认为你只想知道关于网站图标的信息，因为你的问题有标签 favicon。在其他情况下，我可以写一本关于它的书。 :-) 我没有找到关于尺寸顺序的信息，但我会从最小到最大的顺序来做，因为可以节省服务器资源。
Internet Explorer 9 uses site icons in the following places:
- Address bar (
16x16)
- New Tab page (
32x32)
- Taskbar button (
32x32)
- Pinned site browser UI (
24x24)
As you create your Pinned site, you might need additional icons to use in the following ways:
- Jump List tasks (
16x16)
- Thumbnail Toolbar buttons (
16x16)
- Overlay icons (
16x16)
To achieve the best experience in Internet Explorer 9, your icons
should support the following image sizes:
- Recommended
16x16, 32x32, 48x48
- Optimal
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 和 "as big as possible"。例如，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 在 MDN.
推荐尺寸是多少？选择您最喜欢的平台：
- Most desktop browsers:
16x16, 32x32, "as big as possible"
- Android Chrome:
192x192（添加到智能手机的主屏幕）
- Google 电视：
96x96
关于经典和非经典 favicons 的附加信息：
- Favicons - Best practices（很多信息不是经典的图标）
- Creating custom tiles for IE11 websites MSDN
- Here's Everything You Need to Know About Favicons in 2017
- Configuring Web Applications
- Microsoft defines the tile picture
- Favicon Generator
来自HTML5 specs:
The specified resource is an icon representing the page or site, and
should be used by the user agent when representing the page in the
user interface.
Icons could be auditory icons, visual icons, or other kinds of icons.
If multiple icons are provided, the user agent must select the most
appropriate icon according to the type, media, and sizes attributes.
If there are multiple equally appropriate icons, user agents must use
the last one declared in tree order at the time that the user agent
collected the list of icons. If the user agent tries to use an icon
but that icon is determined, upon closer examination, to in fact be
inappropriate (e.g. because it uses an unsupported format), then the
user agent must try the next-most-appropriate icon as determined by
the attributes.
这真的取决于网络浏览器来确定使用哪个图标，所以在我看来，顺序应该不是什么大问题。我建议您采用与规范示例中相同的方法。
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
希望对您有所帮助！
我想在我的 HTML 标题中包含 <link> 标签到各种不同大小的图标。在 <head> 标签中排序图标 <link> 的最佳做法是什么？我将它们包含在什么顺序中重要吗？从最小到最大？从大到小？
我建议每个 rel 标签从大到小。然后设备或用户代理应使用它可以支持的最高分辨率图像。
我认为你只想知道关于网站图标的信息，因为你的问题有标签 favicon。在其他情况下，我可以写一本关于它的书。 :-) 我没有找到关于尺寸顺序的信息，但我会从最小到最大的顺序来做，因为可以节省服务器资源。
Internet Explorer 9 uses site icons in the following places:
- Address bar (
16x16)- New Tab page (
32x32)- Taskbar button (
32x32)- Pinned site browser UI (
24x24)As you create your Pinned site, you might need additional icons to use in the following ways:
- Jump List tasks (
16x16)- Thumbnail Toolbar buttons (
16x16)- Overlay icons (
16x16)To achieve the best experience in Internet Explorer 9, your icons should support the following image sizes:
- Recommended
16x16, 32x32, 48x48- Optimal
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 和 "as big as possible"。例如，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 在 MDN.
推荐尺寸是多少？选择您最喜欢的平台：
- Most desktop browsers:
16x16,32x32, "as big as possible" - Android Chrome:
192x192（添加到智能手机的主屏幕） - Google 电视：
96x96
关于经典和非经典 favicons 的附加信息：
- Favicons - Best practices（很多信息不是经典的图标）
- Creating custom tiles for IE11 websites MSDN
- Here's Everything You Need to Know About Favicons in 2017
- Configuring Web Applications
- Microsoft defines the tile picture
- Favicon Generator
来自HTML5 specs:
The specified resource is an icon representing the page or site, and should be used by the user agent when representing the page in the user interface.
Icons could be auditory icons, visual icons, or other kinds of icons. If multiple icons are provided, the user agent must select the most appropriate icon according to the type, media, and sizes attributes. If there are multiple equally appropriate icons, user agents must use the last one declared in tree order at the time that the user agent collected the list of icons. If the user agent tries to use an icon but that icon is determined, upon closer examination, to in fact be inappropriate (e.g. because it uses an unsupported format), then the user agent must try the next-most-appropriate icon as determined by the attributes.
这真的取决于网络浏览器来确定使用哪个图标，所以在我看来，顺序应该不是什么大问题。我建议您采用与规范示例中相同的方法。
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
希望对您有所帮助！