favicon-cheat-sheet 完全指南：从 favicon.ico 到各平台 Touch Icon 的尺寸与类型速查
favicon-cheat-sheet 完全指南：从 favicon.ico 到各平台 Touch Icon 的尺寸与类型速查
本指南基于开源仓库 favicon-cheat-sheet（位于 README.md）整理而成，它是一份"强迫症级别"的 favicon 尺寸/类型速查表，汇总了来自 Mathias Bynens、W3C HTML5 规范、Apple Safari 开发者文档、MSDN 等权威来源的结论。读完本文，你将掌握：如何用最少的 HTML 标签覆盖从 IE6 到现代浏览器的全部场景、iOS/Android/Windows 各平台 Touch Icon 的精确尺寸与命名规范、.ico 与 .svg 格式的正确用法，以及如何用 ImageMagick 从源图一键生成全套 favicon、如何强制刷新浏览器缓存的 favicon。所有结论都配有可复制的完整 HTML 与命令行示例，可直接落地到你的站点。
一、HTML 部分：标签怎么写才正确
1.1 基础：尽量不写 HTML
对于主 favicon 本身，为了获得最好的跨浏览器兼容性，最佳做法是不写任何 HTML：直接把文件命名为 favicon.ico 并放在域名的根目录（如 https://example.com/favicon.ico）。
这一做法在所有桌面浏览器的所有版本中都有效，可以一直追溯到 IE6——唯一的例外是 SeaMonkey。原因是 HTML5 规范中定义了这样一个回退行为：当页面没有声明 icon 关键字的 <link> 时，用户代理（浏览器）会尝试去获取文档地址对应的 /favicon.ico，就如同页面用 icon 关键字声明了该图标一样。换句话说，根目录的 favicon.ico 是浏览器最后的兜底方案，也是最保险的方案。
1.2 可选但推荐：iOS/Android Touch Icon 与 Windows 磁贴
如果你希望站点在现代移动端和 Windows 上有更好的表现，建议再补充以下三类标签：
（1）iOS 2.0+ 与 Android 2.1+ 的 Touch Icon：
<link rel="apple-touch-icon-precomposed" href="path/to/favicon-180.png">
（2）IE 10 Metro 磁贴图标（即 Metro 版 apple-touch-icon），#FFFFFF 处替换为你想要的磁贴颜色：
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/path/to/favicon-144.png">
（3）Windows 8.1 开始屏幕的 IE 11 磁贴，配合一个 ieconfig.xml 配置文件使用：
<meta name="application-name" content="Name">
<meta name="msapplication-tooltip" content="Tooltip">
<meta name="msapplication-config" content="/path/to/ieconfig.xml">
ieconfig.xml 的内容如下，它声明了 Windows 8 开始屏幕的四种磁贴规格（小/中/宽/大）：
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/path/to/smalltile.png"/>
<square150x150logo src="/path/to/mediumtile.png"/>
<wide310x150logo src="/path/to/widetile.png"/>
<square310x310logo src="/path/to/largetile.png"/>
<TileColor>#FFFFFF</TileColor>
</tile>
</msapplication>
</browserconfig>
1.3 强迫症专属：完整的苹果 Touch Icon 阶梯
如果你足够"执着"，可以把从大到小、适配历代 iOS 设备的 apple-touch-icon 全部声明出来（该列表改编自 Mathias Bynens 关于 touch icons 的研究笔记）。注意声明顺序按尺寸从大到小排列，并使用 sizes 属性精确标注：
<!-- For Iphone 6 plus running iOS 8: -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/path/to/favicon-180.png">
<!-- For iPad Pro: -->
<link rel="apple-touch-icon-precomposed" sizes="167x167" href="/path/to/favicon-167.png">
<!-- For iPad with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/path/to/favicon-152.png">
<!-- For iPad with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/path/to/favicon-144.png">
<!-- For iPhone with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/path/to/favicon-120.png">
<!-- For iPhone with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/path/to/favicon-114.png">
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/path/to/favicon-76.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="/path/to/favicon-57.png">
补充说明：以上阶梯源于 iOS 各代设备屏幕分辨率与 Retina 倍率的演进——iOS 7 将 iPhone 触控图标从 114×114 提升到 120×120、iPad 从 144×144 提升到 152×152，而 iPad Pro 又引入 167×167，iPhone 6 Plus 则达到 180×180。列出完整阶梯的意义在于：让每个设备都能按需取用最接近自身分辨率且不小于显示要求的图标，避免浏览器强行拉伸。
1.4 其余可选的附加图标
除了苹果系图标，以下三类也常被"强迫症"站点加上：
（1）任意额外 PNG 尺寸的通用 favicon（未被上面覆盖的尺寸）：
<link rel="icon" href="/path/to/favicon-32.png" sizes="32x32">
（2）Chrome for Android 的主屏图标：
<link rel="shortcut icon" sizes="192x192" href="/path/to/favicon-192.png">
（3）Safari 9.0+ 固定标签页图标（pinned tab icon）。#900 可替换为任意 hex 颜色，也支持 rgb() 或颜色关键字（如 red）：
<link rel="mask-icon" href="/path/to/mask-icon.svg" color="#900">
二、图片部分：每个尺寸到底做什么用
2.1 最低要求：只做一个 favicon.ico
仓库给出的"至少要有"清单只有一行：
| Sizes | Name | Purpose |
|---|---|---|
| 16x16 & 32x32 | favicon.ico | IE 默认必需。Chrome 和 Safari 可能会（遗憾地）优先选择 ico 而不是 png。 |
注意：这是一个包含多种尺寸的单个文件（.ico 是容器格式，详见下文"ICO 文件"一节）。
2.2 偷懒但想照顾移动端：加一个 180×180
如果你对 iOS 和 Android "还算上心"但比较懒：
| Size | Name | Purpose |
|---|---|---|
| 180x180 | favicon-180.png | iOS/Android 通用图标，由设备自动缩小。 |
但要记住一个实战教训：细节复杂的图标往往缩小后效果不佳。180×180 的精致细节缩到 16×16 时会糊成一团，因此小尺寸下通常需要单独调整设计细节，而不是依赖自动缩放。
2.3 强迫症清单：完整尺寸对照表
以下是仓库给出的完整规格表，覆盖了浏览器、iOS、Android、Windows、Chrome Web Store、Opera 等几乎所有场景：
| Size | Name | Purpose |
|---|---|---|
| 32x32 | favicon-32.png | 某些"老但不算太老"的 Chrome 版本会错误处理 ico |
| 57x57 | favicon-57.png | 标准 iOS 主屏（iPod Touch、iPhone 第一代到 3G） |
| 76x76 | favicon-76.png | iPad 主屏图标 |
| 96x96 | favicon-96.png | GoogleTV 图标 |
| 120x120 | favicon-120.png | iPhone retina 触控图标（iOS 7 起从 114×114 提升） |
| 128x128 | favicon-128.png | Chrome Web Store 图标 |
| 128x128 | smalltile.png | Windows 8 开始屏幕小磁贴图标 |
| 144x144 | favicon-144.png | IE10 Metro 固定站点磁贴 |
| 152x152 | favicon-152.png | iPad retina 触控图标（iOS 7 起从 144×144 提升） |
| 167x167 | favicon-167.png | iPad Pro 触控图标 |
| 180x180 | favicon-180.png | iPhone 6 Plus |
| 195x195 | favicon-195.png | Opera Speed Dial 图标（Opera 15 及以后已失效） |
| 192x192 | favicon-192.png | Chrome for Android 主屏图标 |
| 228x228 | favicon-228.png | Opera Coast 图标 |
| 270x270 | mediumtile.png | Windows 8 开始屏幕中磁贴图标 |
| 558x270 | widetile.png | Windows 8 开始屏幕宽磁贴图标 |
| 558x558 | largetile.png | Windows 8 开始屏幕大磁贴图标 |
| N/A | mask-icon.svg | Safari 固定标签页图标；黑色透明背景的 SVG |
从这张表可以提炼出一个通用工作流：先确定你的目标平台矩阵（桌面浏览器 / iOS / Android / Windows 磁贴 / Chrome 商店等），再反推需要的尺寸集合，避免为用不上的平台白白生成几十个文件。
三、ICO 文件：一个容器装下多个尺寸
.ico 文件本质上是一个容器格式，里面可以封装多张不同尺寸的 .bmp 或 .png 图标。在 favicon.ico 中至少应包含以下尺寸：
| Size | Purpose |
|---|---|
| 16x16 | IE9 地址栏、固定站点的 Jump List/工具栏/悬浮窗（Overlay） |
| 32x32 | IE 新标签页、Win 7+ 任务栏按钮、Safari Read Later 侧边栏 |
| 48x48 | Windows 站点图标 |
如果足够"强迫症"且不介意多占用 1–3KB，还可以在 .ico 中追加以下尺寸：
| Size | Purpose |
|---|---|
| 24x24 | IE9 固定站点浏览器 UI |
| 64x64 | Windows 站点图标、HiDPI/Retina 下 Safari 阅读列表侧边栏 |
关键实践建议：请用经过优化的 .png 文件来制作 .ico（优化工具见下文"实用工具"）。另外，原仓库在这一点上保留了 TODO 标记：IE9+ 是否支持包含 .png 文件的 .ico 尚有争议，仓库以 issue #9 跟踪该问题——如果你在意 IE 的极致兼容，可在生成 .ico 前测试目标环境。
四、SVG 文件：Safari 9+ 固定标签页图标
Safari 9+ 的固定标签页（Pinned Tabs）使用 SVG 矢量蒙版作为 favicon，它优先于页面上可能存在的任何 PNG/ICO 等位图 favicon。使用规范很明确：
- SVG 中的矢量图形只能是纯黑色（不允许有黑色渐变层次或其他颜色）；
- 背景必须是透明的；
- 填充色（
color属性）必须在<link>标签中定义，支持 hex 值或颜色简写（shorthand）。
添加该图标的完整标记如下：
<link rel='mask-icon' href='icon.svg' color='#ff0000'>
这也解释了为何尺寸表中 mask-icon.svg 的 Size 列为 N/A——矢量图是分辨率无关的，不存在"尺寸"一说，真正重要的是黑色透明底 + link 里的着色值。
五、实用工具：从源图到全套 favicon 的命令行方案
5.1 推荐的组合：OptiPNG + ImageMagick
仓库明确推荐以下两个工具：
- OptiPNG：在把 .png 放进 .ico 之前先优化 .png 体积；
- ImageMagick：从 .png 生成 .ico，官方用法文档见 ImageMagick 的 thumbnails/favicon 专题。
用 ImageMagick 把多个 PNG 合并成一个多尺寸 favicon.ico：
convert favicon-16.png favicon-32.png favicon.ico
或者从单张源图一键生成包含多尺寸的 favicon.ico（利用 icon:auto-resize 定义，从 256×256 源图自动缩放到 256、128、96、64、48、32、16 共 7 个尺寸）：
convert favicon-256.png -resize 256x256 -define icon:auto-resize=256,128,96,64,48,32,16 favicon.ico
这两条命令覆盖了两种典型场景：多条已优化 PNG 合并与单源图自动多尺寸生成，可直接复制进 CI 或本地脚本使用。
5.2 其他备选工具
仓库还整理了以下未经作者亲自试用的工具，可按需选用：
- Favic-o-matic：favicon 生成器，可同时产出 .ico、.png 和配套 HTML 代码，覆盖各平台/浏览器/设备；
- icoutil / icoutils：Ubuntu/Debian 与 Fedora 的软件包，提供
icotool程序，可从 .png 创建 .ico； - X-Icon Editor：MSDN 推荐的网页版 .ico 制作器；
- RealFaviconGenerator：从任意图片生成全平台 favicon，支持预览各平台效果、选择压缩与缩放选项；
- Node favicon generator（favicons 包）：从一张 .png 生成全部 favicon，多数尺寸可离线生成，其余通过 RealFaviconGenerator API 在线生成；
- Favicons Webpack Plugin：在构建期调用 Node favicon 生成器产出全部图标，还可配合 html-webpack-plugin 自动插入 HTML；
- faviconer：favicon 尺寸调整工具；
- icon（abrkn）：更多尺寸调整方案；
- favicon-setter（HenrikJoreteg）：动态设置 favicon；
- piecon（component）：花式 favicon 技巧（如用 favicon 显示进度）；
- Web Icon（emarref）：一个简单的 shell 脚本，可生成 favicon 与 touch icons；
- Icon Slate（OS X 应用）：macOS 图标制作工具；
- png2ico（bebraw）：ImageMagick 的 png2ico 包装器；
- GIMP：可直接导出 .ico，每个图层保存为一张图片。
六、强制刷新 Favicon：开发期的救命技巧
正常情况下 favicon 会自动刷新，不需要额外处理。以下手段只用于开发期"favicon 死活不刷新"的抓狂时刻：
- 清缓存：Windows 下按
Ctrl+F5或Ctrl+Shift+R，Mac 下按Command + Shift + R； - 直接访问 favicon 的 URL（如
http://example.com/favicon.ico）并在那里刷新； - 如果是 IE，关闭并重新打开浏览器；
- 仍不行，尝试打开一个新标签页，或参考 Stack Overflow 上关于强制 favicon 刷新的经典问答；
- 临时加显式 HTML 标记并附加查询字符串（用完记得删掉）：
<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?v=2" />
<link rel="icon" sizes="16x16 32x32" href="/favicon.ico?v=2">
对于大型版本化部署的极端场景——需要让所有访客强制刷新 favicon 时：
- 添加显式 HTML 标记（自定义
sizes部分），并把版本号写进文件名，例如：
<link rel="shortcut icon" href="/favicon-v2.ico" />
<link rel="icon" sizes="16x16 32x32" href="/favicon-v2.ico">
仓库在此保留了 TODO：寻找这套标记不生效的边缘场景（issue #3 跟踪）。值得注意的细节是：日常开发中建议用查询字符串（?v=2），而大规模部署建议用文件名版本号（favicon-v2.ico），因为某些代理和负载均衡器在边缘情况下可能无法正确读取查询字符串。
七、FAQ：围绕 favicon 的经典疑问与明确结论
Q1：根目录同时放默认 favicon.ico 和 favicon.png 可以吗？
作者认为只提供 favicon.ico 而不提供 favicon.png 更好，理由有二：
.ico是多张.bmp/.png的容器。如果只提供一个默认的favicon.png，且该 png 覆盖了favicon.ico，你就放弃了对不同分辨率下 favicon 外观的控制权，把缩放全部交给浏览器。例如你可能希望 64×64 版本带文字、而 16×16 版本完全不带文字——因为 16×16 下文字本来就不可读；- HTML5 规范中没有 favicon.png 这一说，规范只定义了
/favicon.ico的回退获取机制（见 W3C HTML5 规范的rel-icon一节：在缺失 icon 链接时，对于通过 HTTP/HTTPS 获取的文档，用户代理可尝试解析/favicon.ico作为图标）。
Q2：favicon 必须放在站点根目录吗？
不是必须的——只有在你不显式写浏览器/设备专属的 <link> 标签时，根目录才是默认查找位置。不过仍建议根目录放一个 favicon.ico（或对根目录请求返回 HTTP 204），因为很多工具和服务（书签站、Feed 阅读器、网络爬虫等）会直接向站点根目录请求 favicon.ico，缺失就会收到 404。最坏情况下，某些框架会返回自定义错误页，其体积可能是缺失 favicon 的好几倍，白白浪费带宽。
Q3：PNG 必须命名为 favicon.png 吗？
不是。作者表示在其"强迫症级"研究中从未发现这种说法成立。
Q4：ico 必须命名为 favicon.ico 吗？
如果不显式写 <link> 标签，那么是的（浏览器默认找根目录的 favicon.ico）。显式声明始终是最好的做法，所以推荐两手都做：既把文件命名为 favicon.ico，又显式写 <link> 标签。
Q5：为什么不以 "apple-touch-icon" 作前缀命名？
如果不写 <link> 标签，iOS 会默认寻找以 apple-touch-icon 或 apple-touch-icon-precomposed 前缀命名的文件，很多项目（如 HTML5 Boilerplate）依赖这一约定。但作者主张显式写 <link> 标签，原因有二：
- 显式声明更清晰，且受 Apple 官方支持；
- 不把文件名写死为
apple-touch-icon，可以避免"这些图标能否直接复用于其他场景"的混淆——例如 favicon-144.png 可以直接复用于 Windows 固定站点。
Q6：为什么使用 iOS precomposed 图标？
- iOS 的非 precomposed 图标会自动加上圆角、投影和反光（shine）效果。理论上听起来不错，实际上对设计师来说结果常常很令人沮丧；
- 非 precomposed 图标在 Android 2.1 上不生效。
Q7：为什么路径用绝对路径？
某些 Firefox 版本要求绝对路径。既然所有浏览器都支持绝对路径，它自然是最简单的选择。
Q8：为什么不给所有访客都用查询字符串强制刷新？
部分代理和负载均衡器在边缘情况下可能读不到查询字符串，所以大规模强制刷新时应改用"文件名带版本号"的方案。
八、参考资料与参与改进
本速查表的结论汇总自以下权威来源：Mathias Bynens 关于 rel-shortcut-icon 与 touch icons 的研究笔记、Jonathan Neal 的 "Understand the Favicon" 博客、Wikipedia 的 Favicon.ico 词条、Snook 的制图心得、Creative Bloq 的图标制作教程、Android/Apple Touch Icon 相关文章、MSDN 的 IE 文档，以及 Apple Safari 9.0 开发者更新说明（这些来源在 README.md 中有完整原始链接，仓库作者特别感谢了 Mathias Bynens）。
若你有新的发现或修正，欢迎向仓库提交 Pull Request，附带引用来源与理由即可。这份速查表同时遵循 MIT 协议（见 LICENSE），可自由使用与分发。
最后提醒一句：上面的所有结论都以"兼容性最广"为出发点——当你只想做一件事时，把 favicon.ico 放到根目录；当你想要完美时，对照本文的尺寸表把每个平台的图标和标签都配齐。