迹忆客 专注技术分享

当前位置:主页 > 学无止境 >

rel="shortcut icon"被认为是有害的

作者:迹忆客 最近更新:2023/01/11 浏览次数:

大多数站点使用以下 HTML 来指定网站图标:

<link rel="shortcut icon" href="/favicon.ico">

看起来不错,对吧? 你猜怎么着——不是!

今天,我了解到快捷方式不是有效的链接关系。 事实上,它并没有出现在 HTML5 规范的第 4.12.5 节“链接类型”中。 事实上,它是 Internet Explorer 专有的。 如果没有 IE,rel="icon" 就足以指定一个图标。

那么,是不是一定要用 shortcut 来支持IE呢? 一点也不。

如果 rel 属性中省略了快捷方式值,Internet Explorer ≤ 8 将完全忽略该声明,在站点根目录中搜索名为 favicon.ico 的文件,并使用该文件代替。 事实上,当没有指定链接 rel="icon" 时,几乎每个浏览器都会这样做。 使用 rel="icon shortcut" 在 IE 中也不起作用,因为它不会将 rel 属性视为空格分隔的列表。

更新 :如果 Release Candidate 有任何迹象表明,如果我们指定 type="image/x-icon",IE9 将不再需要快捷链接关系。 不用说,这仍然很糟糕——更有理由将图标命名为 favicon.ico 并将其放在域的根目录中。

只要确保始终将网站图标放在站点的根目录中,并将其命名为 favicon.ico 即可。 这样,无论我们是否在链接元素中指定它,Internet Explorer 都会检测到它。 如果你省略了整个链接 rel="icon" 声明,其他浏览器也会去寻找那个文件。 根目录中没有 favicon.ico 文件会导致很多 404 错误。

几乎所有现代浏览器都默认查找 /favicon.ico:Opera、Safari、Chrome、Firefox、Internet Explorer 5+。 目前唯一不这样做的浏览器是 SeaMonkey

(不过,SeaMonkey 确实提供了“当页面未定义网站图标时积极查找网站图标”设置,但默认情况下它是禁用的。Firefox 则相反:它在 about:config 中有一个 browser.chrome.favicons 条目 可以将其设置为 false 以禁用此行为,但默认值为 true。)

请注意 ,这甚至适用于非 ICO 格式的图标! 支持 SVG favicons 的浏览器寻找 /favicon.ico 都是一样的,没有什么能阻止你在那个 URL 上提供 Content-Type: image/svg+xml 的 SVG 资源。 这只是一个网址。 文件扩展名在网络上并不重要。

这意味着我们可以根据需要从 HTML 中完全省略 favicon 的链接声明。 唯一真正的区别是 favicon 只会在整个文档加载完成后显示。 相比之下:如果我们明确指定它,则浏览器会在浏览器解析链接 rel="icon" 声明时立即加载网站图标。 我会说这是一个巨大的优势。 延迟加载图标绝对是值得的,这样浏览器就可以专注于首先加载文档和所有其他资产。

如果我们希望自己的网站图标尽快加载和/或如果我们坚持要在 SeaMonkey 中显示它,可以简单地使用以下代码:

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

另一个更新:HTML 规范现在明确提到 /favicon.ico

在没有带有 icon 关键字的链接的情况下,对于通过 HTTP 或 HTTPS 获取的文档,用户代理可能会尝试获取并使用通过根据文档地址解析 URL /favicon.ico 获得的绝对 URL 的图标,就好像 该页面已使用 icon 关键字声明该图标。

更新 :由于历史原因,HTML 规范现在允许使用 shortcut 作为链接关系,前提是它紧跟一个 U+0020 空格字符和图标关键字。 当然,最好不要使用任何 HTML。

更新 :Internet Explorer 11 将支持 GIF 或 PNG 图标,而不仅仅是 .ico 文件。 然而,**/favicon.ico** 仍然是隐含的默认值。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 PHP 中编码 HTML

发布时间:2023/03/29 浏览次数:140 分类:PHP

本教程将教你如何在 PHP 中编码 HTML。你将使用 htmlspecialchars()、htmlentities() 和自定义方法。

压缩 PHP 页面的 HTML 输出

发布时间:2023/03/28 浏览次数:115 分类:PHP

在本文中,我们将讨论缩小 PHP 页面的 HTML 输出的过程。 我们缩小输出以提高整体网站性能。

如何使用 CSS Font Weight 属性在 HTML 中加粗文本

发布时间:2023/03/28 浏览次数:89 分类:CSS

CSS 是 web 开发者的一个强大工具。它允许你以各种方式设置 HTML 内容的样式。 一种常见的格式化技术是使用 font-weight 属性将文本加粗。粗体字可以增加对关键信息的强调,创造视觉对

HTML 文本换行

发布时间:2023/03/28 浏览次数:66 分类:HTML

在今天的文章中,我们将学习如何在 HTML 中包装文本。

HTML 字体大小

发布时间:2023/03/28 浏览次数:113 分类:HTML

在今天的文章中,我们将学习如何在 HTML 中显示小字体。

HTML 段落宽度

发布时间:2023/03/28 浏览次数:119 分类:HTML

使用 <div> 标记,我们可以指定段落的宽度、填充、边距和其他属性。 在构建用于段落样式的 div 时,我们可以提供将在 div 中使用的 id。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便