ICO 图标尺寸规格有哪些？多尺寸打包与制作要点

为什么 favicon 需要多个尺寸

网站图标（favicon）出现在浏览器标签、地址栏、收藏夹、书签与系统磁贴上，各场景要求的像素尺寸不同；浏览器会按场景自动挑选最合适的尺寸，缺失时放大或缩小小图会糊。

常见尺寸与用途

尺寸（像素）	典型用途
16 × 16	浏览器标签页、地址栏
32 × 32	任务栏、Windows 标题栏、收藏夹
48 × 48	Windows 桌面与文件资源管理器
64 × 64、128 × 128	高清屏浏览器菜单与快捷方式
180 × 180	苹果设备主屏图标（apple-touch-icon）
192 × 192、256 × 256	Android 主屏与 PWA 图标

传统做法是把 16、32、48 等常用尺寸打包进一个 favicon.ico，现代站点通常再补充 PNG 图标与 SVG 图标作为进阶方案。

页面里的引用写法

在 HTML 头部声明 favicon 时，通常引入 ICO 文件并注明其包含的尺寸，例如：<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">。苹果设备可额外声明 180 像素的触摸图标（rel 为 apple-touch-icon），现代浏览器还支持以 SVG 作 favicon；多尺寸与新格式并存时按兼容性回退，主流浏览器与移动端均能正确取用，具体写法以目标平台文档为准。

制作要点与避坑

• 源图必须方形：非方形会被拉伸变形，先裁切再生成
• 善用透明背景：ICO 支持透明，透明 PNG 转出的图标在深色主题下更协调
• 避免细线与小字：16 像素下细节会糊成一团，图标设计以高对比色块为主
• 逐尺寸检查：生成后分别在浏览器标签、收藏夹与手机主屏检查清晰度

没有设计师也能出多尺寸包

准备一张方形透明底 PNG，用图片转 ICO 工具一次勾选 16、32、48 等多档尺寸自动生成打包好的 .ico 文件，省去逐尺寸手工导出的麻烦；导出后再按上面的清单做一轮真机检查即可上线。

常见问题

只放一个 32 像素的 favicon 够用吗？

能用但不理想：高分屏与系统磁贴场景会被放大而发糊。打包 16 至 256 多尺寸是低成本高收益的做法。

ICO 和 PNG 图标冲突吗？

不冲突。favicon.ico 用于传统场景，PNG 与 SVG 图标按声明供现代浏览器与移动端使用；引用顺序与回退写法影响不大，放对声明即可。

注意事项

本文面向常见浏览器与系统的通用实践，具体以官方文档为准；更换图标后浏览器有缓存，可通过强制刷新或改文件名验证。