App 图标与 favicon 怎么做：一套尺寸全套生成的正确流程

上架一个 App 要准备苹果十几种尺寸、安卓全套 mipmap；上线一个网站要 favicon 的 16/32/48 多尺寸。手动逐张缩放导出，既费时又容易漏尺寸。正确做法：做好一张 1024×1024 的源图，用工具一次性生成全套。

一、源图：决定成败的一步

1. 尺寸 1024×1024：最大需求尺寸，所有目标尺寸从它缩放而来；
2. 图形居中留边：图标主体别顶到边缘，各平台会自动裁圆角，边缘太满会被切；
3. 简洁可辨识：图标在手机上是 60px 的 「小不点」，复杂图案缩下去就是一团色块——一个形状 + 两三种颜色最耐看；
4. 别用 JPG：源图用 PNG 带透明通道（favicon 需要），有条件的用矢量源文件导出。

二、苹果 App 图标（iOS）

• 核心是一张 1024×1024 的 App Store 图标；
• Xcode 项目里需要的各档尺寸（180/152/120/87/80/76/60/58/40/29…）由工具从源图一次生成全套，按文件名对应放进资源目录；
• 注意苹果要求图标不带透明通道、不带圆角——系统自动加圆角，自己做了圆角边缘会出现黑角。

三、安卓 App 图标

• mipmap 各密度目录（mdpi 48 / hdpi 72 / xhdpi 96 / xxhdpi 144 / xxxhdpi 192）；
• 安卓图标通常做「前景 + 背景」两层以适配自适应图标（Adaptive Icon），前景图形保持在安全区内；
• 商店页还需要 512×512 的商店图标，同一套流程生成。

四、网站 favicon

1. 生成 favicon.ico（含 16/32/48 多尺寸）与 favicon.png 系列放入网站根目录；
2. 页面 <head> 引用：<link rel="icon" href="/favicon.ico">；
3. 现在的最佳实践是同时提供 SVG 图标（矢量、任意清晰），传统 ico 作为兜底；
4. 改了 favicon 后浏览器有强缓存，验证时加版本号参数（favicon.png?v=2）强制刷新。

常见问题

问：为什么生成的 iOS 图标边缘有黑边？
源图带透明通道，导出时透明区变黑。生成前给源图填充不透明背景。

问：图标缩小后细节全糊了？
源图太复杂。为小尺寸单独做简化版（去掉文字、减少细节），是各家 App 的通行做法。

问：网站 favicon 更新后用户看到的还是旧的？
浏览器缓存强。加版本参数、或让用户强刷（Ctrl/Cmd+Shift+R）。