我想包括 <link>我的 HTML 中的标签指向各种不同大小的图标。订购图标的最佳做法是什么 <link>在 <head> 中标签？我将它们包含在什么顺序中重要吗？从最小到最大？从大到小？
最佳答案
我想你只想知道关于网站图标的信息，因为你的问题有标签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 和“尽可能大”。例如，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(添加到智能手机的主屏幕) - 谷歌电视:
96x96
关于经典和非经典网站图标的附加信息:
关于html - 在 HTML head 中排序图标 <link> 标签的最佳实践，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53464667/