什么是 Favicon？它为何对您的网站很重要？

Favicon（“favorite icon”即“收藏图标”的缩写）是一种小型方形图像，用于在浏览器标签页、书签、历史记录列表、Google 搜索结果、手机主屏幕和已安装的网页应用中代表一个网站。它之所以重要，是因为它让您的网站一眼就能被认出，在众多打开的标签页中更容易找到，表明网站专业可信，而且如今还会显示在 Google 结果中的网站名称旁边。如果没有它，访问者只会看到通用的地球或空白页面图标，而您的服务器日志里也会充斥着 404 错误。您可以使用 MakeFav favicon 生成器免费创建一套完整的 favicon。

什么是 favicon？

Favicon 是一个带有品牌特征的小图形，通常是标志的简化版本，或是单个字母或符号，浏览器和其他软件会从您的网站获取它，并在需要简洁视觉标识的任何地方显示。在桌面浏览器中，它通常以 16 × 16 CSS 像素绘制，不过文件本身应该更大，这样在高密度屏幕上才能保持清晰。

从技术上讲，favicon 只是一个由 HTML 引用（或位于默认位置）的图像文件，用户代理会将其与页面内容分开下载。如今，“favicon”很少只是一个文件。现代网站通常会提供同一图标的多个版本，让浏览器、搜索引擎、iOS 和 Android 都能获得适合自己的格式和尺寸。

Favicon 简史

Favicon 可以追溯到 1999 年 3 月，当时微软发布了 Internet Explorer 5。该浏览器允许用户将页面保存到“收藏夹”列表，同时还会在网站根目录查找名为 favicon.ico 的小图标文件，并显示在每个已保存条目旁边。这个想法很简单：如果网站提供了 /favicon.ico，图标就会出现在书签旁边。

其他浏览器很快采用了这一功能，而标签页浏览让它变得更加有用。随着标签页成为人们浏览网页的主要方式，favicon 也从书签装饰变成了核心导航辅助工具。多年来，这种做法不断演变：

• 21 世纪初：<link rel="icon"> 元素允许网站将图标指向任意 URL，而不仅限于根目录，非 IE 浏览器也开始接受 PNG 和 GIF 文件。
• 2010 年代：Apple 为 iOS 主屏幕推出了 apple-touch-icon，Android 和 Windows 也加入了各自的规范，例如 manifest 图标和磁贴图像。
• 如今：SVG favicon、网页应用 manifest、支持深色模式的图标以及 Google 对搜索结果 favicon 的要求，已使 favicon 成为网站技术配置中虽小却实在的一部分。

Favicon 如今出现在哪些地方

您的 favicon 出现的地方远不止浏览器标签页。主要有：

• 浏览器标签页：最显眼的位置，当打开很多标签页时，图标往往是您唯一能看到的内容。
• 书签和收藏夹：图标显示在书签栏和菜单中的页面标题旁边。
• 历史记录和常访问页面：浏览器会在历史记录列表和新标签页中显示 favicon。
• Google 搜索结果：无论在手机还是桌面端，Google 都会在网站名称和 URL 旁边显示网站的 favicon。
• 主屏幕：当访问者在 iOS 或 Android 上将您的网站添加到主屏幕时，触控图标或 manifest 图标会成为类似应用的快捷方式。
• 已安装的 PWA：渐进式网页应用使用其网页应用 manifest 中的图标作为启动器图标、启动画面和任务切换器图标。
• Windows 磁贴和固定的网站：较旧的 Windows 和 Edge 版本使用为固定网站定义的磁贴图像；新版本大多直接复用您的标准图标。
• 部分应用中的链接预览：某些聊天和生产力工具（Slack 就是一个著名的例子）会在展开的链接旁边显示网站的 favicon。大多数预览主要依赖 Open Graph 图像，但 favicon 往往提供那个小小的品牌标记。

为什么 favicon 对您的网站很重要

品牌识别

人们识别颜色和形状的速度比阅读文字更快。一个在标签页、书签和搜索结果中反复出现的统一图标，每次被看到都会增加熟悉感，让每次访问都成为免费的品牌曝光。

信任与可信度

缺少 favicon 会让网站显得未完成。一个清晰、渲染正确的图标，是在传达有人在用心对待细节的小小信号，有助于让人觉得网站是合法可靠的。它不是安全功能，钓鱼网站也可以复制图标，但空白的默认图标很难帮助企业显得成熟稳健。

搜索结果中的点击率

由于 Google 会在您的搜索结果旁边显示 favicon，它就成为您的结果与竞争对手相比时外观的一部分。Google 并未公布 favicon 对排名有任何影响，您也不应期待排名因此提升。其好处在于视觉识别：认识您图标的用户更有可能注意到并选择您的结果，尤其是在结果排布紧凑的手机端。

多标签页下的易用性

当浏览器打开了二十个标签页时，标题会被截断到几乎看不见，只剩下 favicon。一个有辨识度的图标能让人立刻找到您的标签页并返回，而不是重复打开一个，或把它忘掉。

专业形象

设计精良的 favicon 体现出与网站其他部分一样的细致用心。无论是产品页面、文档、博客还是网页应用，它都是您能添加的成本最低的润色细节之一。

便于查找标签页的无障碍性

图标能帮助那些依靠视觉扫描而不是阅读的用户，包括阅读障碍或认知差异人群，以及需要在任务间快速切换的任何人。高对比度、形状简单的图标更容易辨认。不过请记住，favicon 只是补充：它不能取代清晰的页面标题，屏幕阅读器和辅助技术依赖的正是页面标题。

如果没有 favicon 会怎样

即使您的 HTML 中没有提及，浏览器也会自动从域名根目录请求 /favicon.ico。如果该文件不存在，就会发生以下几件事：

• 通用图标：访问者会在标签页和书签中看到默认的地球、文档或空白图标，显得毫无特色。
• 日志中的 404 错误：每个请求该文件的浏览器都会产生一次失败请求。在访问量大的网站上，这会给访问日志、错误监控和分析增加噪音，并可能掩盖真正的问题。
• Google 结果中没有图标：如果没有有效且可抓取的 favicon，Google 会在您的搜索结果旁边显示其默认占位图标。
• 浪费的请求：浏览器可能会重试，给您的服务器增加虽小却毫无意义的负载。

即使是非常简单的图标也胜过没有，因为它能消除 404 错误，并为用户提供可识别的标志。

Favicon 格式详解

没有任何单一格式能覆盖所有平台，因此大多数网站会使用一小组文件。

旧版 Windows 磁贴图像（通过 browserconfig.xml 配置）曾是 Internet Explorer 11 和旧版 Edge 所需要的。除非您必须支持这些环境，否则现在已很少需要。

Google 对搜索结果 favicon 的指南

如果您希望图标出现在 Google 搜索中，请遵循 Google 公布的要求：

• 尺寸：图像必须是正方形（1:1），且边长为 48 像素的倍数，例如 48x48、96x96 或 144x144。Google 随后会将其缩小到 16x16 进行显示。支持的最小尺寸为 8x8，但建议使用 48x48 或更大。
• 格式：浏览器支持的任何格式都可以，包括 ICO、PNG 和 SVG。
• 稳定的 URL：不要频繁更改 favicon 的 URL。稳定的地址有助于 Google 让您的图标保持最新。
• 可抓取：favicon 文件和您的主页都必须允许 Googlebot 访问。不要在 robots.txt 中屏蔽它们，也不要将其置于登录之后。
• 每个网站只声明一次：图标与网站主页绑定，因此请将 <link> 标签放在主页的 head 中。
• 具有代表性且合适：图标应体现您的品牌，Google 可能会用默认图标替换冒犯性或具有误导性的图标。

发布或更改 favicon 后，Google 可能需要数天到数周才能重新抓取并更新，因此不要期待立刻生效。

如何使用 MakeFav 快速创建 favicon

您不需要设计软件，也不需要命令行。MakeFav 生成器可将一张源图像转换为上述所有文件。

1. 准备您的图稿。使用 512 x 512 px 或更大的方形标志或符号。简单的形状效果最好，因为图标会以 16 px 的大小显示。
2. 在 MakeFav 首页上传图片，或打开编辑器，在导出前调整图像、背景和内边距。
3. 预览小尺寸下以及浅色和深色背景上的效果，确保图标仍然清晰易辨。
4. 下载文件包。其中包含 ICO、各种尺寸的 PNG、Apple touch icon、manifest 图标以及可直接粘贴的 HTML 代码片段。
5. 将文件上传到您网站的根目录，使其可通过 /favicon.ico 等路径访问。
6. 添加 HTML 到每个页面的 <head> 中，或添加到您的共享布局或模板中。
7. 使用 favicon 检查器验证，然后清除浏览器缓存并重新加载，即可看到新图标。

HTML 代码片段示例

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

ICO 链接上的 sizes="48x48" 属性有助于支持 SVG 的浏览器优先选择 SVG，同时保留 ICO 作为备用。96 px 的 PNG 满足 Google 的 48 的倍数规则。

网页应用 manifest 示例

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

如果您使用构建流水线，或希望自动化图标创建，请参阅开发者资源。

打造实用 favicon 的设计技巧

• 保持简洁。一个形状、一个字母或一个醒目的字母组合图案，胜过在 16 px 下糊成一团的复杂标志。
• 使用强对比。确保图标在浅色和深色浏览器主题下都清晰可见。带颜色的背景底块会有帮助。
• 避免使用文字。单个首字母没问题；单词在这个尺寸下无法辨认。
• 为 maskable 和圆角图标留出一点内边距，避免重要内容被裁切。
• 保持一致，与您的标志和品牌色保持统一，让 favicon 强化品牌识别。
• 在真实设备上测试，查看它在标签页、书签和 Google 结果中的显示效果。

常见 favicon 问题

如果图标没有显示，常见原因是缓存、路径错误和文件被屏蔽。浏览器会积极缓存 favicon，因此强制刷新或打开新的隐私窗口通常就足以看到更新。请检查文件 URL 是否返回 200 状态码和正确的内容类型，并确认 <link> 标签位于 <head> 中。对于搜索，请确保 robots.txt 没有屏蔽图标或主页。MakeFav 检查器可以帮助您快速发现这些问题。

常见问题

Favicon 是什么的缩写？

Favicon 是“favorite icon”（收藏图标）的缩写。这个名称源自 Internet Explorer 5，该浏览器在 1999 年首次使用小图标文件来装饰浏览器收藏夹列表中的条目。尽管如今图标出现在许多其他地方，这个术语仍沿用至今。

Favicon 对 SEO 有帮助吗？

Favicon 不是直接的排名因素。不过，它确实会显示在手机和桌面端 Google 结果中您的网站名称旁边，因此可以提升品牌识别度和搜索结果的视觉吸引力，从而可能间接促进点击。遵循 Google 的指南，才能让图标具备显示资格。

Favicon 应该多大？

对于 Google 搜索，请使用边长为 48 像素倍数的方形图像，例如 48x48 或 96x96。为了更广泛的覆盖，还应提供 ICO 文件、180x180 的 Apple touch icon，以及 192x192 和 512x512 的 manifest 图标。再加上 SVG 能带来很好的可缩放性。

如果我使用 PNG 或 SVG，还需要 favicon.ico 吗？

仍然建议保留。浏览器和一些工具默认会请求 /favicon.ico，较旧的软件也依赖它。在网站根目录保留 ICO 文件可以避免 404 错误，并在不支持 SVG 或 PNG 时提供安全的备用方案。

为什么我的 favicon 没有更新？

浏览器和搜索引擎会长时间缓存 favicon。请尝试强制刷新、使用隐私窗口或清除缓存。确保文件路径正确，并且新文件已正常提供。在 Google 搜索中，更改后的图标可能需要数天或数周才能被重新抓取并更新。