网站图标要准备哪些尺寸：Favicon、ICO、PWA 和 App 图标打包清单

网站图标不是“导出一个 512×512 PNG”就结束了。浏览器标签页、添加到主屏幕、PWA、iOS 工程和 Android 工程读取的文件不同；尺寸相同，目录和配置也可能不同。

如果手里已经有一张清晰源图，可以直接打开图叮 Favicon 与 App 图标生成器：选 Web / PWA、iOS 或 Android，分别下载对应资源包。源图和成品只在当前浏览器处理；可以先预览和调整，最终生成与下载需要登录。

先分清三类资源包

图叮当前把输出分成三包，不把网页文件、iOS 资产和 Android 位图混在一起：

使用位置	当前资源包的核心文件	还要在工程里完成什么
Web / PWA	favicon.ico、16/32px PNG、180px Apple Touch Icon、192/512px PWA 图标、site.webmanifest、HTML 引用	把文件放到与引用路径一致的位置，填写站点名称和主题色
iOS	1024×1024 PNG、Contents.json	导入 Xcode 的 App Icon 资产目录，继续完成工程配置、签名与商店校验
Android	48–192px 传统 mipmap 位图、512px 商店图，可选圆形图标	放入对应密度目录；Adaptive Icon 的前景、背景和 XML 需另行制作

图注：先按平台分包，再把文件放进对应工程。

这张表描述的是图叮当前生成器实际输出，不是所有平台规则的永久全集。平台工具或工程模板更新后，最终仍要以浏览器、Xcode、Android Studio 和应用商店当时给出的校验结果为准。

Web 和 PWA：先保证小图能认，再补完整资源

网页里最容易被忽略的是 16px 和 32px。复杂照片、细线、小字在 1024px 源图里很清楚，缩进浏览器标签页后仍可能变成一团。因此，第一优先级不是把文件做得多，而是让图形在小尺寸下仍能被认出来。

图叮 Web / PWA 包目前包含：

• favicon.ico：内含 16、32、48px 三档；
• favicon-16x16.png 和 favicon-32x32.png；
• apple-touch-icon.png：180×180px；
• icons/icon-192.png 和 icons/icon-512.png；
• site.webmanifest；
• 可复制的 favicon.html 引用片段。

生成器给出的 HTML 使用从站点根目录开始的路径，例如 /favicon.ico 和 /icons/icon-192.png。如果你的框架把静态资源放在其他目录，就要同时改文件位置与引用路径，不能只复制代码。

site.webmanifest 里的 name、short_name、主题色和背景色是待填写字段。下载 ZIP 后先补齐这些内容，再确认 192px、512px 图标的真实 URL 能直接访问。

iOS 和 Android：资源包不等于应用已经配置好

iOS 包提供 AppIcon.appiconset/icon-1024.png 和对应 Contents.json。正确动作是把资产目录交给 Xcode 管理，而不是从网页资源包里挑几张 PNG 手工散落到工程。生成器不会替代项目签名、构建配置或商店审核。

Android 包提供传统位图：

密度目录	图标尺寸
mipmap-mdpi	48×48px
mipmap-hdpi	72×72px
mipmap-xhdpi	96×96px
mipmap-xxhdpi	144×144px
mipmap-xxxhdpi	192×192px

此外还有 512×512px 商店图；开启圆形选项后，会为五个密度目录再生成 ic_launcher_round.png。这些仍是传统位图，不包含 Android Adaptive Icon 需要的独立前景层、背景层和 XML。

如果需求只是把一批 PNG、JPG 或 WebP 写成 Windows 或网站可用的多尺寸 .ico，用图片转 ICO 工具更直接。它可以为每个文件选择 16、24、32、48、64、128、256px 等尺寸，不必生成整套 App 资源。

源图怎么准备，决定 16px 时还能剩下什么

建议从至少 1024×1024 的正方形源图开始。更大的文件不自动等于更清楚，关键是主体轮廓、留白和对比度。

上线前先检查四点：

1. 主体在中间安全区。 不要让关键轮廓贴边，圆形裁切时尤其容易缺角。
2. 去掉小字和细线。 它们在 16px 下通常不可读，还会让轮廓发脏。
3. 透明和背景色要有明确选择。 浅色图标在白色背景上可能消失，深色背景也要单独预览。
4. 同时看完整显示与裁剪铺满。 完整显示能保住轮廓，但可能留白较多；裁剪铺满更醒目，也更容易切掉边缘。

生成器支持 PNG、JPG、WebP、HEIC；GIF 只读取第一帧。单文件上限为 50MB。源图像素不足时，放大到 1024px 只会放大已有像素，不能恢复丢失的边缘细节。

文件放好后，按实际入口验收

不要把“ZIP 下载成功”当成上线完成。至少做下面几项检查。

浏览器标签页

打开新标签页或无痕窗口，检查 16px、32px 下是否仍能认出主体。Favicon 缓存很顽固；文件已经更新但页面仍显示旧图时，先核对网络请求和真实响应，再处理缓存。

PWA 清单

确认 site.webmanifest 能访问，图标路径返回的是正确图片，名称与主题色已经填写。安装预览里出现空白图标，通常先查路径和文件，而不是重新生成一遍同样的 ZIP。

iOS 与 Android 工程

在对应开发工具中检查资产是否被识别，再跑一次真实构建。圆角、安全区、Adaptive Icon、签名和商店素材属于工程或商店环节，不能由一张通用 PNG 代替。

小尺寸视觉

分别看浅色和深色背景。如果 16px 只剩噪点，回到源图简化轮廓，而不是继续增加锐化或塞入更多细节。

一份可直接交付的检查清单

交给开发或运营前，可以按这份清单收口：

• 源图为正方形，主体居中，小尺寸仍可识别；
• Web 文件位置与 HTML、manifest 中的路径一致；
• name、short_name、主题色和背景色已经填写；
• iOS 资产已由 Xcode 识别，而不是只复制了 PNG；
• Android 传统位图进入正确密度目录，Adaptive Icon 另行处理；
• 16px、32px、主屏幕图标和商店大图都做过真实预览；
• 保留源图和生成参数，后续换标时可以重新生成。

需要一次整理完整资源时，打开免费 Favicon 与 App 图标生成器，先用同一张源图分别生成 Web / PWA、iOS、Android 包，再按各自工程完成配置。真正的交付标准不是文件数量够多，而是每个入口都能读取正确文件，小尺寸也认得出品牌。