ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

App 图标尺寸规范速查(2026):iOS / Android / Web PWA 全平台一览

App 图标尺寸规范速查(2026):iOS / Android / Web PWA 全平台一览 每年都有人在这件事上翻车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 的 PNGXcode 自动生成全部变体。这是目前官方推荐的做法。但三条规则没有变PNG 格式不能含 alpha 通道 / 透明区域报错 ITMS-90717不要预切圆角——系统会自动应用遮罩预切反而会出白边背景必须完全不透明建议 sRGB 色彩空间。去 alpha 通道的命令行操作# ImageMagick 检查是否含 alphaidentify-verboseicon.png|grep-ialpha# 去除 alpha 通道convert icon.png-alphaoff icon.png传统全尺寸表老工具链 / 特殊需求如果你的构建流程仍需要完整 AppIcon.appiconset标准结构如下尺寸(pt)1x2x3xidiom20pt20px40px60pxiphone20pt20px40px—ipad29pt29px58px87pxiphone29pt29px58px—ipad40pt—80px120pxiphone40pt40px80px—ipad60pt—120px180pxiphone76pt76px152px—ipad83.5pt—167px—ipad1024pt1024px——ios-marketing配套的 Contents.json 里声明每一项的 size / idiom / filename / scale。手写这个文件很容易漏项这也是很多人用自动生成工具的原因——Xcode 校验严格缺一项构建直接报错。二、Android传统启动器图标五档密度密度倍率图标尺寸mdpi1×48×48hdpi1.5×72×72xhdpi2×96×96xxhdpi3×144×144xxxhdpi4×192×192分别放进res/mipmap-{密度}/ic_launcher.png。自适应图标Android 8.0分层的逻辑自适应图标是现在 Android 的正解规则和 iOS 思路完全不同画布108×108 dp由前景层 背景层两张图层叠加系统蒙版只保留中心约 72dp 的可视区域关键内容必须收进中心 66dp 安全区直径否则换一个形状的 launcher 蒙版就裁内容前景层就是你的 logo镂空背景背景层是纯色或图案——两层分开系统才能自由换蒙版形状圆形、圆角方、水滴等各厂商不同像素换算xxxhdpi4×下每层 432×432 px工程里通过mipmap-anydpi-v26/ic_launcher.xml声明两层引用。?xml version1.0 encodingutf-8?adaptive-iconxmlns:androidhttp://schemas.android.com/apk/res/androidbackgroundandroid:drawablecolor/ic_launcher_background/foregroundandroid:drawablemipmap/ic_launcher_foreground//adaptive-icon另外 Android 13API 33起支持主题化图标跟随系统壁纸取色的 monochrome 层属于可选增强项普通应用可以后续再补。Google Play 商店图独立于 APK 之外Play Console 需要一张512×512 PNG32 位、不透明。很多团队上线前一刻才发现手里没有这张尺寸又临时开 PSD 重导。三、Web / PWA尺寸清单文件尺寸用途favicon.ico / png16×16、32×32浏览器标签页favicon-48.png48×48部分场景的站点图标apple-touch-icon.png180×180iOS「添加到主屏幕」icon-192.png192×192PWA 基础要求icon-512.png512×512PWA 基础要求 / 启动画面icon-192-maskable.png192×192安卓启动器蒙版版icon-512-maskable.png512×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 被拒iOS1024 图含 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 商店图全部齐活注册送免费积分、支持支付宝付款。规范年年微调但无透明、不预切圆角、守安全区这三条至少近十年没变过。把这篇存下来下次上架前对一遍能省掉不少来回折腾。
返回列表