Favicon 怎么生成才不踩坑：网站、PWA、iOS、Android 的尺寸和透明边距

Favicon 不是把一张 Logo 随手缩成 32px 就结束了。网站标签页、PWA、iPhone 主屏幕和 Android 启动器使用的文件、尺寸和裁切方式并不相同。真正省事的做法，是先准备一张清晰的正方形源图，再按平台分别生成资源包，最后用 16px、32px 这些真实小尺寸验收。

如果源图已经准备好，可以直接打开图叮 Favicon 与 App 图标生成器，分别选择 Web / PWA、iOS 或 Android。工具在当前浏览器里完成解码、缩放、ICO 写入和 ZIP 打包；下面先把每个包里有什么、下载后还要做什么讲清楚。

先决定给哪个平台，不要把三套文件混着用

当前生成器会按平台输出不同目录，不会把所有文件塞进一个 ZIP：

使用场景	资源包里的主要文件	还要手动完成的事
Web / PWA	favicon.ico、16/32px PNG、180px Apple Touch Icon、192/512px PWA 图标、manifest 和 HTML 引用	核对部署路径，填写站点名称和颜色
iOS	1024×1024 PNG、Contents.json	放入 Xcode 工程，继续完成签名和商店校验
Android	48/72/96/144/192px 传统 mipmap、512px Play Store 图；可选 5 张圆形版本	放入 Android 工程；需要 Adaptive Icon 时另做前景层、背景层和 XML

只给普通网站做图标，先生成 Web / PWA 包即可。只有 Windows ICO 或桌面快捷方式需要多尺寸 ICO 时，图片转 ICO 工具更直接；它不会顺带制造你用不到的 iOS、Android 目录。

源图怎么留安全区，才不会缩小就糊

四个平台共用的第一条原则，是先保护中心主体，再处理外围透明边距。

图注：三端尺寸不同，但都应先保护中心主体和透明边距。

建议从至少 1024×1024 的正方形 PNG 起步。主体轮廓要简单、对比要明显，四周保留能看得见的空隙。这里没有一个对所有 Logo 都正确的固定留白百分比：圆形标志、横向文字标志和不规则图形需要的空间不同，最终判断仍要回到 16px、32px 预览。

有三个常见问题值得在生成前处理：

1. 小字太多。 在 1024px 画布上可读的副标题，缩到浏览器标签页通常只剩噪点。Favicon 优先保留图形标记，文字放回网页标题。
2. 主体贴边。 方形源图看起来刚好，进入圆形预览或不同启动器后可能被边界挤压。先留白，再判断是否需要铺满。
3. 源图本身太小。 把 128px 位图放大到 1024px 只能增加像素数量，不能补回真实细节。需要先整理源素材，可参考修改图片尺寸与分辨率的区别，再用图片改尺寸工具输出正方形底图。

Web / PWA 包：不只有 favicon.ico

Web / PWA ZIP 一共生成 8 个文件：

• favicon.ico 内含 16、32、48px 三档图像；
• favicon-16x16.png 和 favicon-32x32.png 供浏览器显式引用；
• apple-touch-icon.png 是 180px；
• icons/icon-192.png 和 icons/icon-512.png 写入 PWA manifest；
• site.webmanifest 保存 PWA 图标路径和显示设置；
• favicon.html 给出可复制的 <link> 引用。

下载后不要直接把整个 ZIP 扔进项目就算完成。先打开 site.webmanifest，填写自己的 name 和 short_name，再按品牌调整 theme_color、background_color。生成的 HTML 默认从站点根路径读取 /favicon.ico、/icons/icon-192.png 等文件；如果网站部署在子目录或静态资源走独立域名，也要同步改引用路径。

这个包明确不生成 SVG Favicon，也不生成 maskable 图标。需要这些能力时，应在项目里单独准备相应资源和 manifest 声明，不能把普通 512px PNG 当成所有场景都适用的替代品。

iOS 包：1024px 是单源，不等于提交已经完成

iOS ZIP 里只有 AppIcon.appiconset/icon-1024.png 和对应的 Contents.json。这种结构适合放进 Xcode 的 App Icon 资源目录，让工程继续处理后续配置。它不会伪造深色、着色等并未生成的外观，也不会替你完成签名、Bundle 配置或 App Store 审核。

这里最容易踩的坑，是看到 1024px 就误以为小尺寸不用检查。系统后续仍会把图标显示在更小的界面里，所以源图里的细线、小字、内阴影和过窄留白依然可能消失。把 1024px 当作交付源，不要把它当作小尺寸可读性的证明。

Android 包：传统 mipmap 和 Adaptive Icon 是两回事

Android 传统位图包按密度输出：

• mdpi：48px；
• hdpi：72px；
• xhdpi：96px；
• xxhdpi：144px；
• xxxhdpi：192px；
• Play Store：512px。

打开“同时生成圆形图标”后，还会按这 5 档尺寸增加 ic_launcher_round.png。这适合仍使用传统位图资源的项目，但不等于 Android Adaptive Icon。后者需要独立前景层、背景层和 XML；当前工具不会生成这些文件，也不会把普通圆形 PNG 冒充成 Adaptive Icon。

完整显示还是裁剪铺满

“完整显示”和“裁剪铺满”解决的是两种不同问题：

• 完整显示保留整张源图，适合 Logo、徽标和不能裁掉边缘的图形；代价是四周可能出现透明或指定颜色的空白。
• 裁剪铺满让画面占满正方形，适合允许裁掉边缘的照片或满版图形；如果主体贴边，关键部分也可能被裁掉。

空白区域可以设为透明，也可以指定颜色。是否用透明背景，不要只看编辑器里的棋盘格，要在浅色和深色背景上都预览一次。图标轮廓如果依赖白色细边，放到浅色标签栏里可能看不见；依赖黑色细边，切到深色界面又可能消失。想进一步判断 PNG、JPG、WebP 的透明和压缩差异，可以读常见图片格式怎么选。

生成后，用真实小尺寸做一次验收

资源包生成成功，只能证明文件被写出来，不能证明图标好认。上线前按这个顺序检查：

1. 解压 ZIP，先看 16px、32px 原尺寸，不要只放大查看；
2. 把图标分别放在浅色和深色背景上，检查轮廓有没有消失；
3. 确认 Logo 中没有缩小后变成噪点的小字和细线；
4. Android 开了圆形版本时，确认主体没有贴到圆形边界；
5. 打开 manifest、HTML 或 Contents.json，核对路径与自己的项目目录一致；
6. 在真实浏览器或工程里清除旧缓存后再看，避免把旧 Favicon 当成新文件。

如果问题只出现在 16px，不要反复提高导出质量。更有效的办法通常是简化图形、加粗关键线条、扩大主体间距，再重新生成。小尺寸图标追求的是识别，不是把大图的所有细节硬塞进去。

按需求选工具

只需要一个多尺寸 ICO，用图片转 ICO；需要网站标签页、PWA、iOS 或 Android 目录，用Favicon 与 App 图标生成器按平台分别下载。源图尺寸不合适时，先用图片改尺寸整理成正方形，再回到图标工具生成。

最关键的不是记住所有数字，而是守住两件事：资源包按平台分开，小尺寸必须真实验收。这样既不会漏掉 manifest、Contents.json 等工程文件，也不会在 1024px 看着漂亮、到了浏览器标签页却认不出来。