什么是 Favicon？

Favicon，是“favorite icon”的缩写，是一个包含一个或多个与特定网站或网页关联的小图标的文件。它也被称为快捷方式图标、网站图标、标签页图标、URL 图标或书签图标。

网页设计师可以通过多种方式创建此类图标并将其上传到网站（或网页），然后图形网页浏览器将使用它们。

网页的 Favicon 通常会显示在浏览器的地址栏（有时也会显示在历史记录中），以及在支持 Favicon 的浏览器中，会显示在书签列表中该网页名称的旁边。

网页的 Favicon 通常会显示在标签式文档界面的页面标题旁边，而特定网站的浏览器则将 Favicon 用作桌面图标。

Favicon 的历史

1999 年 3 月，微软推出了 Internet Explorer 5，这是第一个支持 Favicon 的浏览器。最初，Favicon 是一个名为 favicon.ico 的文件，放在网站的根目录下。

然而，Internet Explorer 在使用 .ico 格式显示图像（而非 Favicon）时，无法查看带有此标准 MIME 类型的文件。

HTML Living Standard 于 2011 年表示，“shortcut”出于历史原因可以直接放在“icon”之前，但“shortcut”在此上下文中没有实际意义。

遗产

Internet Explorer 5-10 只支持 ICO 文件格式。Netscape 7 和 Internet Explorer 5 和 6 仅在页面被添加书签时显示 Favicon，而不是在页面浏览时显示，这与后来的浏览器不同。

支持 Favicon 的设备。

通过在 Safari 的共享表单中点击“添加到主屏幕”选项，用户可以提交一个自定义图标，他们可以在主屏幕上显示该图标，适用于运行 iOS 1.1.3 或更高版本的 Apple 设备，以及部分 Android 智能手机。

通过在网站提供的文档的 head 部分提供一个链接 rel="apple-touch-icon"...> 来启用此功能。

此图标推荐的基本尺寸为 152x152 像素。

iPad 的标准尺寸为 180x180 像素。Android 平板电脑（通过 Chrome）偏好使用 192x192 的 PNG 图标。

apple-touch-icon 图标文件已更改为包含圆角。在 iOS 7 之前的版本中，包含了一个阴影和反射光泽，并提供了一个 apple-touch-icon-precomposed 图标，以指示设备不要在图片上应用反射光泽。

限制和批评

如果 Favicon 缺失，由于需要在固定位置检查它，这可能会导致页面加载时间不必要地延迟，并在服务器日志中产生多余的 404 条目。

Favicon 经常被用于针对 HTTPS 网站的网络钓鱼和窃听攻击。许多网页浏览器会在用户界面的某些部分（如地址栏）显示 Favicon，以指示与网站的连接是否安全（如 TLS）。

在攻击中，攻击者可以通过将 Favicon 更改为熟悉的锁形图像，来欺骗用户，让他们认为自己安全地连接到了他们想要访问的正确网站。

SSLStrip 等自动中间人攻击程序使用此技术。

由于 Favicon 通常位于服务器站点目录的根目录下，因此可以用来可靠地检测 Web 客户端是否已登录到特定服务。

2021 年，伊利诺伊大学的研究人员在很大程度上证实了 Favicon 还可以用来跟踪浏览器。

软件要求

只需访问“免费资源编辑器和图标编辑器”页面并下载一个。页面上列出了一些免费的图标和资源编辑器。在这里，我们可以轻松选择任何图标并下载。

我们可能还可以选择下载一个包含资源编辑器功能的软件包。程序员使用资源编辑器来创建和编辑 Windows 的“资源”，例如图标、光标（鼠标指针）、菜单、对话框等。出于我们的目的，只需要使用此类资源编辑器的图标编辑器组件。

如何创建“Favicon.ico”文件

1. 创建一个 16x16 像素的图像。是的，它非常小，我们能做的有限。我们还需要将自己限制在 Windows 16 色调色板内，但我认为 256 色就足够了。
2. 如果需要，我们还可以创建一个 32x32 像素的图标，该图标将自动调整以适应“收藏夹”菜单和地址栏。我们还可以使用同一个图标文件来存储 16x16 和 32x32 像素的图标。
3. 将图像制成 ICO 文件（当然，命名为“favicon.ico”）。
4. 将其上传到我们的网站。我们也可以将其保存在图片目录中，但这需要我们修改网页。

求助！我的 Web 主机不接受 ICO 文件！

如果使用的是不让我们上传具有 .ICO 扩展名的文件的免费 Web 服务器，可以尝试以其他扩展名（如 GIF）上传（以二进制模式）。一旦上传到我们的站点，请使用我们的 FTP 工具将其重命名为正确的扩展名。

在上例中，将“/favicon.ico”替换为 favicon.ico 文件的实际位置，例如，如果它在我们的“/images/”目录中，则为“/images/favicon.ico”。

如果我们已将“favicon.ico”文件放置在旧位置或默认位置，或者放在网站的根目录下，则可以跳过此步骤。否则，我们将不得不修改我们所有现有的网页以使用“favicon.ico”功能。

谁收藏了我的网站？

这个“favicon.ico”在过去有一个有趣的副作用。即使我们没有在我们的网站上使用 Favicon，这个错误或副作用仍然会发生。

因为 IE 5 会请求服务器检查服务器日志，以确定哪个网站安装了 Favicon。

使用此公式，我们可以根据 favicon.ico 请求的数量来估算收藏我们网站的总用户数：IE 5 书签数除以使用 IE 5 的访问者百分比。

然而，随着技术的发展和升级，这种副作用已不再有益。

在使用 Internet Explorer 时，如果看到旧版本的 Favicon，则需要清除缓存。

由于 favicon.ico 文件被缓存在 Internet Explorer 的“临时 Internet 文件”文件夹中，如果我们不清除缓存，我们很可能会看到旧版本而不是我们创建的新版本。这也意味着，如果我们的访问者清除其缓存，与我们网站书签关联的 Favicon.ico 文件副本也会被删除。

有时会显示我们网站的 Favicon，有时则不会。

不要太担心。如果我们想确保我们的 Favicon 工作正常，请在多个浏览器中进行测试。

根据我的经验，网站的 Favicon 是否显示在 Internet Explorer 中取决于许多变量，以至于最好将其视为一个随机事件。没有必要为此烦恼，因为它对我们和我们网站的访问者都适用。

结论

“favicon.ico”功能并非我们网站运行的必需品。事实上，很少有人知道它的存在，而且它太小了，无法容纳任何有意义的东西。

更重要的是，设计这样一个图标可以提升我们网站的专业性，让我们看起来是一位注重细节的网页设计师。