favicon 到底是什么
favicon 就是你网站地址栏和浏览器标签页上显示的那个小图标。它会出现在这些地方：
- 浏览器标签页的左侧
- 书签收藏夹
- 手机添加到主屏幕后的图标
- 搜索结果里网站名称旁边（部分搜索引擎会显示）
它是网站最简单的一次品牌曝光：用户开着十几个标签页时，能不能一眼找到你，很多时候就靠这个 16×16 像素的小方块。
需要准备哪些尺寸
不同场景需要的大小不一样，所以成熟的 ICO 文件里会一次装好几档：
| 16×16 | 浏览器标签页 |
|---|---|
| 32×32 | 任务栏、书签栏、macOS 部分场景 |
| 48×48 | Windows 桌面快捷方式 |
| 180×180 | iPhone 添加到主屏幕（apple-touch-icon） |
| 256×256 | 高分屏、Windows 大图标视图 |
好消息是：你不需要自己一档一档地做。把一张方形的 PNG 转成 ICO，转换器会一次打包好这些尺寸。
为什么用 ICO，而不是直接用 PNG
现代浏览器其实也接受 PNG 作为 favicon，但 ICO 有两个实际优势：
- 一个文件装多个尺寸。系统会挑合适的那一档显示，标签页里用 16×16 的清晰小图，桌面快捷方式用 256×256 的大图，两边都不用妥协。
- 兼容更老的环境。一些旧系统、旧版 IE、各种抓取工具只认 ICO。
做的时候注意这几点
- 用正方形。非正方形图片会被裁切或拉伸，图标会变形。
- 源图至少 256×256，最好 512×512。用小图放大会糊，用大图缩下来才锐利。
- 图案要极简。16×16 的尺寸下，超过两三个元素的图案就只剩一团色块了。字母、单一符号、简单几何图形效果最好。
- 不要带细小文字。两个字以上的中文在标签页里几乎看不清。
- 留意透明背景。深色模式下，纯黑或深色的图标会糊在背景里；深色图标建议加一圈浅色描边，或者干脆用品牌色做底。
做好之后怎么装到网站上
把 ICO 文件放到网站根目录，命名为 favicon.ico，然后在网页的 <head> 里加上：
<link rel="icon" href="/favicon.ico" sizes="any"><link rel="apple-touch-icon" href="/apple-touch-icon.png">（180×180 的 PNG）
浏览器和系统会自动从 ICO 里挑合适的尺寸显示。改完之后记得强制刷新（⌘+Shift+R），favicon 缓存很顽固，有时候要等一会儿才会更新。
现在就做一个
准备好一张正方形的 PNG 或 JPG，用在线转 ICO 工具一步搞定——本地转换，图片不上传。