Hypermesh 14.0汽车内外饰件快速建模全流程解析
2026/8/31 6:03:23
每年都有人在这件事上翻车
App 图标大概是整个发布流程里最"看起来简单"的一环，但被它卡住的人不在少数。几个经典翻车现场：
- 上传 App Store Connect 直接被拒：
ITMS-90717: Invalid App Store Icon——图标带了alpha 通道； - 图标在 iPhone 上边缘一圈白边——设计师好心预切了圆角，iOS 又蒙了一层；
- 安卓机上 logo 被圆形蒙版裁掉一角——没遵守自适应图标的安全区；
- PWA 装进启动器后图标内容被切掉一半——没有出maskable变体。
这篇文章把三大平台的图标规范一次讲清，建议收藏当速查表用。
一、iOS
现状：单一 1024 尺寸时代
Xcode 14 起，asset catalog 支持单尺寸（Single Size）模式：只提供一张 1024×1024 的 PNG，Xcode 自动生成全部变体。这是目前官方推荐的做法。
但三条规则没有变：
- PNG 格式，不能含 alpha 通道 / 透明区域（报错 ITMS-90717）；
- 不要预切圆角——系统会自动应用遮罩，预切反而会出白边；
- 背景必须完全不透明，建议 sRGB 色彩空间。
去 alpha 通道的命令行操作：
# ImageMagick 检查是否含 alphaidentify-verboseicon.png|grep-ialpha# 去除 alpha 通道convert icon.png-alphaoff icon.png传统全尺寸表（老工具链 / 特殊需求）
如果你的构建流程仍需要完整 AppIcon.appiconset，标准结构如下：
| 尺寸(pt) | @1x | @2x | @3x | idiom |
|---|---|---|---|---|
| 20pt | 20px | 40px | 60px | iphone |
| 20pt | 20px | 40px | — | ipad |
| 29pt | 29px | 58px | 87px | iphone |
| 29pt | 29px | 58px | — | ipad |
| 40pt | — | 80px | 120px | iphone |
| 40pt | 40px | 80px | — | ipad |
| 60pt | — | 120px | 180px | iphone |
| 76pt | 76px | 152px | — | ipad |
| 83.5pt | — | 167px | — | ipad |
| 1024pt | 1024px | — | — | ios-marketing |
配套的 Contents.json 里声明每一项的 size / idiom / filename / scale。手写这个文件很容易漏项，这也是很多人用自动生成工具的原因——Xcode 校验严格，缺一项构建直接报错。
二、Android
传统启动器图标：五档密度
| 密度 | 倍率 | 图标尺寸 |
|---|---|---|
| mdpi | 1× | 48×48 |
| hdpi | 1.5× | 72×72 |
| xhdpi | 2× | 96×96 |
| xxhdpi | 3× | 144×144 |
| xxxhdpi | 4× | 192×192 |
分别放进res/mipmap-{密度}/ic_launcher.png。
自适应图标（Android 8.0+）：分层的逻辑
自适应图标是现在 Android 的正解，规则和 iOS 思路完全不同：
- 画布108×108 dp，由前景层 + 背景层两张图层叠加；
- 系统蒙版只保留中心约 72dp 的可视区域，关键内容必须收进中心 66dp 安全区（直径），否则换一个形状的 launcher 蒙版就裁内容；
- 前景层就是你的 logo（镂空背景），背景层是纯色或图案——两层分开，系统才能自由换蒙版形状（圆形、圆角方、水滴等各厂商不同）；
- 像素换算：xxxhdpi（4×）下每层 432×432 px；
- 工程里通过
mipmap-anydpi-v26/ic_launcher.xml声明两层引用。
<?xml version="1.0" encoding="utf-8"?><adaptive-iconxmlns:android="http://schemas.android.com/apk/res/android"><backgroundandroid:drawable="@color/ic_launcher_background"/><foregroundandroid:drawable="@mipmap/ic_launcher_foreground"/></adaptive-icon>另外 Android 13（API 33）起支持主题化图标（跟随系统壁纸取色的 monochrome 层），属于可选增强项，普通应用可以后续再补。
Google Play 商店图
独立于 APK 之外，Play Console 需要一张512×512 PNG（32 位、不透明）。很多团队上线前一刻才发现手里没有这张尺寸，又临时开 PSD 重导。
三、Web / PWA
尺寸清单
| 文件 | 尺寸 | 用途 |
|---|---|---|
| favicon.ico / png | 16×16、32×32 | 浏览器标签页 |
| favicon-48.png | 48×48 | 部分场景的站点图标 |
| apple-touch-icon.png | 180×180 | iOS「添加到主屏幕」 |
| icon-192.png | 192×192 | PWA 基础要求 |
| icon-512.png | 512×512 | PWA 基础要求 / 启动画面 |
| icon-192-maskable.png | 192×192 | 安卓启动器蒙版版 |
| icon-512-maskable.png | 512×512 | 安卓启动器蒙版版 |
maskable 安全区
PWA 装进安卓启动器后，图标会被裁成圆形/圆角方形，只有中心直径 80% 的圆形区域保证可见。maskable 版本要求：
- 全出血（内容铺满整个画布）+ 不透明背景；
- logo 收进中心 80% 安全区；
- 建议
any和maskable各出一套，别一张图混用两种 purpose（带留白的图在网页 favicon 场景会显得过小）。
manifest.json 的标准写法：
{"name":"My App","short_name":"My App","icons":[{"src":"/icon-192.png","sizes":"192x192","type":"image/png","purpose":"any"},{"src":"/icon-512.png","sizes":"512x512","type":"image/png","purpose":"any"},{"src":"/icon-192-maskable.png","sizes":"192x192","type":"image/png","purpose":"maskable"},{"src":"/icon-512-maskable.png","sizes":"512x512","type":"image/png","purpose":"maskable"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}Lighthouse 有专门的 maskable-icon 审计项，缺了会扣 PWA 分。
四、翻车原因速查表
| 症状 | 平台 | 原因 | 解决 |
|---|---|---|---|
| ITMS-90717 被拒 | iOS | 1024 图含 alpha 通道 | 导出去透明：convert icon.png -alpha off icon.png |
| 图标边缘白圈 | iOS | 预切了圆角 | 提供方形满幅图，遮罩交给系统 |
| logo 被裁一角 | Android | 内容超出 66dp 安全区 | 缩小前景层主体 |
| 启动器里图标内容缺半 | Web | 缺 maskable 变体 | 补 80% 安全区内构图的全出血版 |
| 图标糊 | 全平台 | 拿小图放大型 | 从 1024 母版一次性降采样出全套 |
五、出图方式怎么选
- 设计软件手动导出：自由度最高，适合有设计师的团队，但改一次图标就要重导二三十个文件；
- 写脚本批处理（sharp / ImageMagick）：适合已有品牌母版图、只要切尺寸的场景，但处理不了 Android 双层拆分这种逻辑活；
- 在线生成工具：从母版直接出全套 ZIP。如果连母版都没有，现在也有 AI 生成 + 工程化导出一体的方案，比如 AppIconKitchen , iconcraft, appicons.ai ，从文字描述生成图标，导出的 ZIP 里
ios/AppIcon.appiconset、android/mipmap各密度、web/manifest.json、Play 商店图全部齐活，注册送免费积分、支持支付宝付款。
规范年年微调，但"无透明、不预切圆角、守安全区"这三条至少近十年没变过。把这篇存下来，下次上架前对一遍，能省掉不少来回折腾。