打开浏览器，看一眼标签页——每个网站前面都有个小图标。有的网站是品牌 logo，有的是一片空白。这个小图标叫 favicon，很多人做网站的时候会忽略它，但它其实是品牌体验里很细节的一块。

favicon 是什么？

favicon（favorite icon 的缩写，也有人叫它网站图标）是显示在浏览器标签页、地址栏、收藏夹和书签栏里的小图标。它是网站的视觉名片：收藏了十个网站，书签栏里一眼认出哪个是哪个，靠的就是它。

对网站站长来说，favicon 还有两个实用意义：一是让网站在用户的标签页和收藏夹里更显眼、更专业；二是部分浏览器和聚合平台在展示链接时会读取网站的 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？

三步走：

  1. 准备一张图片，最好是正方形、图形简洁、颜色对比清晰——小尺寸下复杂图案会糊成一团；
  2. 用转换工具生成 ICO 文件，或直接用 PNG；
  3. 把文件命名为 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">。

图标虽小，但它和网站一起被用户收藏、打开、记住。花两分钟给自己网站做一个专属 favicon，性价比很高——先打开在线图片转ICO图标试试。