Favicon（网站图标）

Favicon（网站图标）是与某个网站或网页关联的小尺寸图标文件，浏览器会把它显示在标签页、地址栏、书签列表等位置，用来标识这个网站，因此也常被称为收藏夹图标、标签页图标或书签图标。

概述

Favicon 一词由英文 favorite icon（收藏夹图标）缩合而来。这一机制最早由微软的 Internet Explorer 浏览器引入：只要把一个名为 favicon.ico 的图标文件放在网站根目录下，浏览器就会自动请求并在收藏夹中显示它。后来这一做法被各大浏览器普遍采纳，并通过 HTML 标准中的 link 标签（rel="icon"）规范化，站长可以自定义图标的路径、格式和尺寸，不再局限于根目录的 ico 文件。

如今 Favicon 的用途早已超出书签范围：多标签浏览时靠它快速分辨页面，浏览历史和搜索结果中靠它增强辨识度，网站被添加到手机主屏或安装为桌面应用时，它还会充当应用图标。对网站而言，Favicon 是成本极低但曝光频率极高的品牌标识。

主要特点

• 体积小、多尺寸：常见尺寸为 16×16、32×32、48×48 像素，ICO 格式可在一个文件里打包多种尺寸，由浏览器按需选用。
• 格式多样：除传统的 ICO 外，现代浏览器普遍支持 PNG、SVG 等格式，SVG 可无级缩放且体积小。
• 两种引用方式：根目录放置 favicon.ico 的传统约定，以及在网页头部用 link 标签显式声明，两者可以并存互为兜底。
• 显示位置广：标签页、地址栏、书签、历史记录、搜索结果，以及 iOS 主屏图标（apple-touch-icon）和 PWA 桌面图标。

如何为网站添加 Favicon

一般流程是：准备一张方形的标志图片，用图像工具或在线 Favicon 生成器转换出 ICO、PNG 等所需规格，上传到网站目录，再在网页的 head 部分用 link 标签引用；同时在根目录保留一份 favicon.ico 以兼容旧浏览器。若希望 iOS 用户添加到主屏时有清晰图标，还应额外提供 apple-touch-icon 版本。WordPress 等建站程序通常在后台就能直接上传站点图标，无需手动改代码。

常见问题

问：Favicon 必须用 .ico 格式吗？答：不是。现代主流浏览器都支持 PNG、SVG 等格式，但 ICO 兼容性最好且可打包多尺寸，通常建议保留根目录的 favicon.ico 作为兜底。

问：换了新图标为什么浏览器还显示旧的？答：浏览器对 Favicon 缓存较重。可以强制刷新或清除缓存，也可以给图标文件改名或在引用地址后加版本参数，促使浏览器重新拉取。

问：Favicon 对 SEO 有影响吗？答：它不直接影响排名，但搜索结果和书签中会展示图标，有助于提升辨识度和点击意愿；缺失时浏览器仍会请求该文件，服务器日志里会出现 404 记录。