167

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

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

我的猜测是，如果您决定使用 GIF 或 PNG，则只需将其包含在 HTML 文档中......

4

6 回答 6

271

为favicon选择不同的位置或文件类型（例如PNG或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">

网站图标被大量缓存，这是确保刷新的好方法。

关于默认位置的脚注：
就问题的第一部分而言：所有现代浏览器都会在默认位置检测到一个网站图标，所以这不是使用 a 的理由link。

关于脚注rel="icon"：
正如@Semanino 的回答所示，使用rel="shortcut icon"是旧版本 Internet Explorer 所需的旧技术，但在大多数情况下可以用更正确的rel="icon"指令代替。文章@Semanino 基于此正确链接到显示值的适当规范不是有效选项。relshortcut

于 2012-04-18T21:22:45.947 回答
55

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

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

注意“rel”属性的值！

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

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

您可能还想看看这篇很棒的帖子：rel="shortcut icon" 被认为是有害的

于 2015-06-30T07:36:49.743 回答
13 
<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" />

这完全取决于您喜欢使用哪种格式的图像！
如果你有你网站的图标，那对用户体验来说会更好！

演示

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

在此处输入图像描述

于 2016-11-24T17:13:50.887 回答
3

2020 年 10 月更新：

因此，如果您在此页面上摸不着头脑，为什么我的网站图标不起作用，请继续阅读。我尝试了所有的东西（我应该认为我做对了），但 favicon 没有出现在浏览器选项卡上。

这是一个完美运行的简单破解代码：

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

在此处输入图像描述

笔记：

  1. 将图像放在ROOT文件夹中（在我的一次不成功的尝试中，我没有使用根目录）
  2. 使用直接的 favicon url 链接（而不是 href="images/bla123.jpg"）。
  3. 我把这个标签放在< Header >中的 < title > 标签下面
  4. 我将图标大小设置为64x64 像素，大小为 2.16 KB

我在 Firefox、Chrome、Edge 和 opera 上对其进行了测试。操作系统：Win 10、Mac OSX、ios 和 Android。我也没有遇到任何兑现问题，我一刷新页面就可以正常工作。

于 2020-10-22T08:45:48.763 回答
2

我们可以为平台特定尺寸的所有设备添加

<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">
于 2018-05-14T13:10:39.513 回答
1

最重要的是，并非所有浏览器都会真正查找您的favicon.ico文件。一些浏览器允许用户选择是否应该自动查看。因此，为了确保它始终出现并被查看，您必须对其进行定义。

于 2012-04-18T21:35:43.663 回答