Favicon 生成器｜一键生成多尺寸 ICO 与 PNG
上传图片并裁剪为正方形，即可生成内含多个尺寸（16、32、48px 等）的 favicon.ico 与全套 PNG。支持 Lanczos 高品质缩小算法，并自动生成可直接粘贴的 HTML 代码。全程在浏览器内处理，图片不会上传至服务器。
Favicon 的指定方法（分模式）
Favicon 的写法取决于「打算支持到什么程度」。以下按用途整理了从最小配置到 PWA、深色模式适配所需的写法。所有代码均以将生成的文件放在网站根目录为前提。
模式1：最小配置（只放 favicon.ico）
不在 HTML 中写任何一行，只把 /favicon.ico 放到文档根目录即可。浏览器会隐式查找该路径，因此这样就能显示。
your-site/
└── favicon.ico ← 放在这里即可（无需在 HTML 中书写）
<!-- 若要显式声明，仅这一行就够了 -->
<link rel="icon" href="/favicon.ico" sizes="any">| 适用场景 | 个人网站、内部工具，以及「只要能显示就行」的场合 |
|---|---|
| 补充说明 | 加上 sizes="any" 后，即使日后追加 SVG 或 PNG，浏览器也能正确判断「ICO 是最后的备选」。建议在 ICO 中内含 16、32、48px。 |
模式2：标准配置（推荐）
在 ICO 之外再准备 PNG 与 Apple Touch Icon，是目前最常见的配置。从桌面浏览器到 iOS 添加到主屏幕都能覆盖。
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">| 适用场景 | 企业官网、博客、媒体等一般 Web 站点 |
|---|---|
| 补充说明 | apple-touch-icon 的透明部分会被填充为黑色，请务必输出带背景色的不透明 PNG。iOS 侧会以圆角裁切，留出一成左右的留白可避免边缘被切掉。 |
模式3：PWA 完整配置
添加到主屏幕后能像应用一样启动的 PWA，需要在 site.webmanifest 中登记图标。若 192px 与 512px 未同时齐备，则不会被判定为可安装。
<!-- HTML（head 内） -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<!-- site.webmanifest -->
{
"name": "My Site",
"short_name": "Site",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}| 适用场景 | PWA、Web 应用，以及以手机使用为主的服务 |
|---|---|
| 补充说明 | iOS 不会参照 manifest 中的图标，因此仍需另行书写 apple-touch-icon。display: "standalone" 表示隐藏浏览器界面、以应用风格启动。 |
模式4：SVG Favicon + 深色模式适配
SVG favicon 与分辨率无关，并可通过 SVG 内的 CSS 切换深色模式下的颜色。为不支持的浏览器一并声明 ICO 与 PNG。
<!-- HTML（head 内）。浏览器会自上而下采用「能读懂的那个」 -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- favicon.svg（深色模式下反转颜色的示例） -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #1a1a1a; }
@media (prefers-color-scheme: dark) { path { fill: #ffffff; } }
</style>
<path d="M4 4h24v24H4z"/>
</svg>| 适用场景 | 能够准备矢量 Logo 的站点，或希望在深色模式下改变观感的场合 |
|---|---|
| 补充说明 | SVG favicon 已获 Chrome、Firefox、Edge 支持。Safari 目前不读取 rel="icon" 的 SVG，因此 PNG、ICO 的回退方案必不可少。 |
模式5：子目录放置与缓存更新
图标放在根目录以外时的写法，以及替换后仍显示旧图标时的处理。Favicon 会被浏览器牢牢缓存，改变 URL 是最可靠的办法。
<!-- 放在任意目录时需要显式写明路径 -->
<link rel="icon" href="/assets/icons/favicon.ico?v=2" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png?v=2">
<!-- 在子目录下公开的站点（例如 /docs/）请注意绝对路径 -->
<link rel="icon" href="/docs/favicon.ico" sizes="any">| 适用场景 | CDN 分发、统一管理静态资源的站点，以及替换图标时 |
|---|---|
| 补充说明 | 唯独把 /favicon.ico 放在根目录的隐式查找无法改变路径，因此即便放在子目录，也建议在根目录留一份副本，以免遗漏。 |
文件与显示位置的对应关系
下表列出各文件分别用在何处。并非全部都要准备，可按需支持的环境自行选择。
| 文件 | 尺寸 | 使用场景 |
|---|---|---|
| favicon.ico | 16 / 32 / 48px | 浏览器标签页、书签、Windows 任务栏。即使 HTML 中无声明也会查找根目录 |
| favicon-16x16.png | 16×16 | 浏览器标签页（标准分辨率显示器） |
| favicon-32x32.png | 32×32 | 浏览器标签页（Retina 等高分辨率显示器）、书签栏 |
| apple-touch-icon.png | 180×180 | 添加到 iOS / iPadOS 主屏幕时的图标。透明部分会被填充为黑色 |
| android-chrome-192x192.png | 192×192 | Android 主屏幕图标（经由 manifest） |
| android-chrome-512x512.png | 512×512 | PWA 启动画面与应用列表（经由 manifest） |
| site.webmanifest | — | PWA 的配置文件，用于声明图标、主题色与启动方式 |
| favicon.svg | 可变 | Chrome、Firefox、Edge。可实现深色模式下的配色切换 |
使用技巧
- 建议准备 512×512px 以上的正方形原图，这样即使缩小到 16px 轮廓也不会崩坏。非正方形的图片可以用本工具的裁剪功能，只截取需要的正方形区域。
- Lanczos3 在对相邻像素加权平均的同时，利用卷积核的负瓣提升边缘对比度。相比浏览器内置的缩放能保留更多轮廓，对含有文字或 Logo 的图标差异尤为明显。
- ICO 最大的特点是可在一个文件中内含多个尺寸。只要放入 16、32、48px，标签页、书签栏、Windows 任务栏就会各自选用最合适的图像。
- Apple Touch Icon 的透明部分会被填充为黑色，因此建议指定背景色并输出为不透明的 PNG。留白设为 10% 左右，还能避免 iOS 的圆角遮罩裁掉边缘。
- 浏览器对 favicon 的缓存非常顽固。替换后若未生效，可在 URL 后附加
?v=2之类的查询参数，或执行强制刷新。
常见问题
/favicon.ico 至今仍是浏览器在没有任何 HTML 声明时也会隐式查找的路径。RSS 阅读器、书签服务以及部分爬虫不会解析 HTML，只会直接抓取根目录下的 ICO，因此一并放置 ICO 才不会有遗漏。<link rel="icon" type="image/svg+xml"> 引用。同时写上本工具生成的 ICO 与 PNG 作为回退方案最为稳妥。
闲话 ― 在 16 像素上作画这道难题
1999 年，Internet Explorer 5 实现了在收藏夹中为书签显示小图标的功能。机制质朴得可爱：只要把 favicon.ico 放到网站根目录就会被抓取。「favicon」这个称呼正是「favorite icon」的缩写。<link rel="icon"> 正式写入 HTML 规范则是后来的事，而隐式查找根目录 ICO 的行为，至今仍作为向后兼容保留了下来。
ICO 借用 Windows 图标格式这一点，结果具有重大意义。这种格式可在单个文件中内含多种分辨率，也就意味着 16px 的标签页与 48px 的任务栏可以显示完全不同的图案。这不只是便利性的问题。在 16×16 这样极小的画布上，把为 48px 设计的图案机械缩小，细线会消失、文字会无法辨认。当年的图标设计师之所以逐个尺寸手工绘制，正因为那是唯一的解决办法。
现代的 favicon 生成则以「如何聪明地缩小」取代了手工绘制。单纯的平均（双线性）会损失边缘对比度，而抽样（最近邻）则会整根丢掉细线。Lanczos 法使用将 sinc 函数截断为有限个瓣的卷积核，主瓣保留原始信息，两侧的负瓣则把边缘顶起来。这种「略微强调轮廓」的特性，在小图标上效果尤为突出。
此后 favicon 的需求还在不断增加。2007 年 iPhone 登场带来了 Apple Touch Icon（最初 57px，如今 180px），PWA 的普及又要求 192px 与 512px，如今连 SVG favicon 与深色模式适配也进入了视野。与只放一个文件的时代相比确实繁琐，但反过来说，浏览器标签页上那几十个像素，正是被无数用户日日看见的地方。