打开浏览器看一眼标签页，每个网站前面都有个小图标。有的网站是品牌 logo，有的是一片空白。这个小图标叫 favicon，很多人做网站的时候会忽略它，但它其实是品牌体验里挺细节的一块。
favicon 是什么
favicon（favorite icon 的缩写，也有人叫网站图标）是显示在浏览器标签页、地址栏、收藏夹和书签栏里的小图标。它是网站的视觉名片：收藏了十个网站，书签栏里一眼认出哪个是哪个，靠的就是它。
对站长来说还有两个实用意义：一是让网站在标签页和收藏夹里更显眼、更专业；二是部分浏览器和聚合平台在展示链接时会读取网站的 favicon，算是最小的品牌露出。
favicon 用什么格式
最常见的是 ICO 格式。ICO 是 Windows 的图标容器格式，历史能追溯到 1990 年代，最大的特点是可以在一个文件里打包多个尺寸的图标，浏览器按场景自动选：标签页用 16×16，高清屏用 32×32，收藏夹用 48×48。
现代浏览器也支持直接用 PNG 当 favicon，兼容性上 ICO 依然最稳。所以大多数网站根目录都放一个 favicon.ico，再配合 HTML 里的 link 标签声明。
favicon 一般做多大
- 16×16：浏览器标签页常规尺寸；
- 32×32：高清屏标签页、部分收藏夹；
- 48×48：Windows 收藏夹、开始菜单；
- 128 / 256：高清场景和部分应用图标；
- 180×180：苹果设备触摸图标（apple-touch-icon）。
不想一个个尺寸去切？用站里的在线图片转ICO图标，选好尺寸一键生成，透明背景也会保留。
怎么把图片做成 favicon
三步走：准备一张正方形、图形简洁、颜色对比清晰的图片，小尺寸下复杂图案会糊成一团；用转换工具生成 ICO 文件，或直接用 PNG；把文件命名为 favicon.ico 放到网站根目录，并在页面 head 里加一行 <link rel="icon" href="/favicon.ico">。也可以把 ICO 放任意路径，在 link 标签里写对应地址。改完记得强制刷新（Ctrl+F5），标签页里的旧图标才会更新。
几个小提醒
透明背景很关键。浏览器标签页背景可能是浅色也可能是深色，图标最好带透明背景或边缘干净，否则会出现难看的白块。简单图形优先，16×16 只有 256 个像素点，放不下复杂细节，用粗线条、大色块的图形小尺寸下才可辨识。苹果设备单独处理，iPhone 添加到主屏幕时用 apple-touch-icon（180×180），不带透明通道，可以在 head 里单独声明 <link rel="apple-touch-icon" href="/apple-touch-icon.png">。
| 尺寸 | 常见使用场景 |
|---|---|
| 16 × 16 | 浏览器标签页默认尺寸 |
| 32 × 32 | 高清屏标签页、Windows 任务栏 |
| 48 × 48 | Windows 收藏夹、开始菜单 |
| 128 × 128 | 部分浏览器标签页、应用图标 |
| 180 × 180 | 苹果设备 apple-touch-icon |
| 192 / 512 | PWA 应用图标（如果做了站点应用） |
常见问题：改了 favicon 还是显示旧图标，是浏览器缓存，Ctrl+F5 强制刷新，还不行换无痕窗口，手机端缓存周期更长，等一两天正常。PNG 能直接当 favicon 用吗？可以，现代浏览器都支持，但 ICO 兼容性最稳，根目录放一个 favicon.ico 是通用做法。favicon 是网站最小的品牌资产，两分钟搞定，却每天被用户和搜索引擎反复看到，这笔投入挺值。
