是否需要为 Favicon.ico 添加链接标记？

有没有现代的浏览器不会自动检测到 Favicon.ico？是否有任何理由添加 Favicon.ico 的链接标签？

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

我的猜测是，只有当您决定使用 GIF 或 PNG 时，才有必要将它包含在 HTML 文档中..。

192629 次浏览
小开
最佳答案

为图标选择 不同的位置或文件类型(例如: http://caniuse.com/# fit = link-icon-PNG”rel = “ noReferrer”> PNG 或者 < a href = “ http://caniuse.com/# fit = link-icon-SVG”rel = “ noReferrer”> SVG ):
其中一个原因可能是您希望将图标放在特定的位置，可能是在图像文件夹或类似的位置。例如:

<link rel="icon" href="_/img/favicon.png">

这个不同的位置甚至可能是一个 CDN，就像 SO 似乎与 <link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">一样。

要了解有关使用其他文件类型(如 PNG)的更多信息，请查看 这个问题。

为了 破坏缓存的目的:
将查询字符串添加到路径以进行缓存破坏:

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

收藏夹缓存非常严重，这是一个很好的方式，以确保刷新。

关于默认位置的脚注:
至于问题的第一点: 所有现代浏览器都会在默认位置检测到一个图标，所以 没有是使用 link的一个理由。

关于 rel="icon"的脚注:
正如 @ Semanino 的回答所指出的，使用 rel="shortcut icon"是一种旧的技术，旧版本的 Internet Explorer 需要这种技术，但在大多数情况下，可以用更正确的 rel="icon"指令来替代。这篇文章@Semanino 基于正确地链接到 合适的规格，它显示 rel值 shortcut不是一个有效的选项。

小开

底线是不是所有浏览器 威尔实际上寻找您的 (西班牙语)文件。一些浏览器允许用户选择是否应该自动查看。因此，为了确保它将 一直都是出现并得到查看，您必须定义它。

小开

请注意，W3C 和 WhatWG 的 HTML5规范都是标准化的

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

注意“ rel”属性的值！

rel属性的值 shortcut icon是一个非常古老的特定于 Internet Explorer 的扩展名和 已弃用。

因此，请考虑不再使用它，并更新您的文件，以便他们是标准兼容，并在所有浏览器中正确显示。

你可能也想看看这篇很棒的文章: Rel = “快捷图标”被认为是有害的

小开 
<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" />
<link rel="icon" type="image/png" href="http://example.com/favicon.png" />
<link rel="icon" type="image/gif" href="http://example.com/favicon.gif" />
<link rel="icon" type="image/jpeg" href="http://example.com/favicon.jpeg" />
<link rel="icon" type="image/webp" href="http://example.com/favicon.webp" />

这完全取决于您喜欢使用哪种格式的图像！
如果你有一个图标的网站，它将是更好的用户体验！

小样

在浏览器选项卡中显示徽标

enter image description here

小开

我们可以为所有具有特定平台大小的设备添加

<link rel="apple-touch-icon" sizes="57x57" href="fav_icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="fav_icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="fav_icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="fav_icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="fav_icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="fav_icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="fav_icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="fav_icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="fav_icons/apple-icon-180x180.png">


<link rel="icon" type="image/png" sizes="192x192"  href="fav_icons/android-icon-192x192.pn">
<link rel="icon" type="image/png" sizes="32x32" href="fav_icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="fav_icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="fav_icons/favicon-16x16.png">
小开

2020年10月更新:

所以，如果你在这一页上抓耳挠腮，为什么我的图标不工作，然后阅读。我尝试了所有的方法(我认为我做的是对的) ，但是在浏览器标签页上没有显示出来。

下面是 很简单的一句话破解代码，它的工作完美无缺:

<link rel="icon" href="https://abcde.neocities.org/bla123.jpg" size="16x16" type="image/jpg">

enter image description here

备注:

  1. 将图像放入 根文件夹(在一次失败的尝试中，我没有使用 root 目录)
  2. 使用直接图标 网址连结(而不是 href = “ images/bla123.jpg”)。
  3. 我在 < 头 > 中将这个标记仅仅放在 在 标题下面 > tag 中
  4. 我的图标大小 64x64像素和大小是2.16 KB

我在 Firefox，Chrome，Edge 和 Opera 上测试过。 操作系统: Win 10，Mac OSX，ios 和 Android。我也没有遇到任何现金问题，工作几乎只要我刷新页面。


提交答案