favicon 是显示在浏览器标签页、书签栏和地址栏旁边的小图标。你不需要手动用图像软件一张张调尺寸、导格式，只要准备一张高清源图，用在线生成器上传、生成、下载，就能一次性得到包含多种尺寸的图标包，再替换到网站根目录并刷新即可。
先搞清楚 favicon 要覆盖哪些尺寸和格式
不同场景读取的图标规格不一样，一套完整的图标包通常需要覆盖这些尺寸：
- 16x16：浏览器标签页最常用的最小尺寸
- 32x32：高分屏标签页、任务栏
- 48x48：部分浏览器的站点信息面板、桌面快捷方式
- 180x180 左右的大尺寸：移动端添加到主屏幕时使用
- SVG：现在主流浏览器推荐的矢量格式，缩放不糊
传统做法要求把前面的位图尺寸打包进一个 favicon.ico 文件，这是老格式，但兼容性最好。现代做法则是在 ico 之外，额外提供 SVG 和若干 PNG，让浏览器自己挑最合适的。
关键点在于：源图必须是高清的。你随手画的、用手机拍的都可以，但分辨率越高、边缘越干净，自动缩放出来的小尺寸就越清晰。反过来，如果源图本身就很糊，生成器也救不回来。
分步操作：从一张图到完整图标包
第一步：准备源图
选一张能代表站点的图，优先满足这几个条件：
- 正方形，或者主体居中、便于裁成正方形
- 背景干净，避免复杂纹理在小尺寸下糊成一团
- 分辨率足够大，至少能覆盖你要生成的最大尺寸
- 主体不要贴边，留出一点边距，防止缩放时被切掉
如果你的原图不是正方形，生成器一般会自动居中裁剪，所以主体居中很重要。
第二步：上传并生成
打开一个 favicon 生成器，把源图传上去。工具会自动完成这几件事：
- 裁剪成正方形
- 按需要的尺寸逐档缩放
- 生成 favicon.ico 这种老格式
- 生成主流浏览器推荐的 SVG 格式
- 打包成一套适配各种设备的图标文件
这一步你不需要懂代码，也不需要管像素密度，上传、点击生成、下载，三步走完。
第三步：放置到网站并引用
把下载下来的图标文件放到网站根目录，然后在页面的 head 区域加上引用。常见的写法是引用 ico 和 SVG，让不同浏览器各自取用。放好之后刷新浏览器，必要时清一下缓存，图标才会更新。
第四步：验证
- 打开标签页，看图标是否正常显示
- 收藏一下，看书签栏里的图标
- 在移动端添加到主屏幕，看大尺寸图标是否清晰
- 如果还是旧图标，多半是缓存问题，强制刷新或清缓存再看
常见错误和避坑点
- 源图太糊：小尺寸会变成马赛克，这是最常见的问题，换高清源图即可。
- 主体不居中：自动裁剪后主体被切掉一半。
- 只放了 ico 没放 SVG：老浏览器没问题，但新浏览器拿不到矢量图，缩放场景会糊。
- 忘了刷新缓存：图标换了但浏览器还在读旧的，容易误以为没生效。
- 尺寸不全：只生成了一个尺寸，导致某些设备上显示默认图标。
适用与不适用场景
适合：个人站点、企业官网、博客、任何需要统一品牌形象、又不想手动折腾图标的场景。尤其是客户临时要换 logo 时，重新上传生成一遍就行，不用重做整套流程。
不太适合：对图标有极精细像素级控制需求的设计场景，这类情况可能仍需要在图像软件里手动微调每个尺寸。
常见问题
问：源图用手机拍的可以吗？
可以，只要主体清晰、便于裁成正方形。分辨率越高越好。
问：必须生成 favicon.ico 吗？
建议生成，它的兼容性最好。同时再提供 SVG，覆盖现代浏览器。
问：为什么换了图标浏览器还是显示旧的？
多半是缓存。强制刷新或清除缓存后再看。
问：需要自己懂代码吗？
不需要。生成器负责转换和打包，你只需要把文件放到根目录并在 head 里引用。
问：生成一次要多久？
上传后点生成，通常几秒到一分钟内就能拿到完整图标包。