鸿蒙应用图标怎么做：HarmonyOS 分层图标前景层、背景层与上架图标规范

鸿蒙图标和 iOS、安卓有什么不一样

做过 iOS 和安卓图标的开发者，第一次做鸿蒙图标时常会有疑问：直接拿 iOS 的 1024 图标改一改能不能用？要不要自己画圆角？

HarmonyOS（尤其是纯血鸿蒙版本）推荐使用分层图标：把图标拆成前景层和背景层两张图，由系统统一加上外形遮罩，并在不同场景下做视觉效果处理。这和安卓的自适应图标（Adaptive Icon）思路相近，但和 iOS 的「一张图交给系统切圆角」不完全一样。

对比项	iOS	安卓自适应图标	鸿蒙分层图标
源文件结构	单张（或 Icon Composer 分层）	前景 + 背景	前景 + 背景
外形遮罩	系统统一	由厂商系统决定	系统统一
是否自己画圆角	不需要	不需要	不需要
主体留白	需要	需要安全区	需要安全区

本文以实操为主，具体尺寸和比例以华为开发者官网最新的设计规范和 DevEco Studio 的提示为准。

为什么要分层

分层的好处主要有三点：

1. 外形统一：系统负责加遮罩，桌面上所有图标外形一致，不会出现有的方、有的圆。
2. 视觉效果：系统可以对前景和背景分别处理，比如做轻微的立体感或动效。
3. 适配更多场景：桌面、设置、通知、多任务等不同位置都可以使用同一套资源。

如果你只提供一张已经切好圆角、带阴影的完整图标，在加上系统遮罩后，很容易出现「圆角里套圆角」「四周有白边」这类问题。

源文件怎么准备

推荐尺寸

一般建议前景层和背景层都按 1024×1024 px 的正方形画布准备，导出为 PNG。这样既能满足高分辨率设备，也方便后续缩放到各种尺寸。

背景层

• 铺满整个画布，不要留透明区域；
• 可以是纯色、渐变或简单的图案；
• 不要放文字和关键图形，因为边缘会被遮罩裁掉；
• 避免太复杂的纹理，缩小后会显得脏。

前景层

• 放图标主体，比如 Logo 图形；
• 背景透明；
• 主体要控制在画布中心的安全区内，四周留出足够空白，防止被遮罩裁切；
• 不要自己加圆角底板、外阴影和高光，这些交给系统。

一个常用的检查方法：把前景层缩小到实际桌面图标大小（几十像素），再叠加一个圆角矩形遮罩，看看主体是否完整、是否显得太大或太小。

在项目中如何配置

在 DevEco Studio 创建的鸿蒙工程里，分层图标通常这样组织：

1. 把前景图和背景图放到 resources/base/media/ 目录下，比如 foreground.png 和 background.png；
2. 在同一目录下新建一个 JSON 文件，例如 layered_image.json：

{
  "layered-image": {
    "background": "$media:background",
    "foreground": "$media:foreground"
  }
}

3. 在 module.json5 中，把入口能力（EntryAbility）的 icon 指向 $media:layered_image；
4. 根据需要，app.json5 中的应用图标也做相应配置。

不同版本的 SDK 和模板在细节上可能有变化，建议以新建工程时自动生成的默认配置为参考，再替换成自己的图片。

上架图标和应用内图标的区别

这一点经常被混淆：

图标类型	用途	准备方式
应用内图标（分层）	安装后在桌面等位置显示	前景 + 背景，打包进应用
商店展示图标	AppGallery 详情页、搜索结果	在 AppGallery Connect 后台单独上传

商店展示图标通常需要上传一张完整的正方形 PNG，具体像素尺寸和文件大小以 AppGallery Connect 上传页面的提示为准。建议用分层图标的前景和背景合成后导出，保证商店里看到的图标和桌面上的一致，避免用户「下载后找不到图标」。

常见驳回和翻车原因

根据开发者社区的常见反馈，图标问题主要集中在下面几类：

• 商店图标和应用内图标不一致：商店里是蓝色，安装后变成绿色；
• 图标自带圆角或白边：系统加遮罩后出现双层圆角或明显白框；
• 主体过大被裁切：Logo 边缘被遮罩切掉一部分；
• 图标中有大量文字：小尺寸下看不清，也可能被认为不够规范；
• 使用他人品牌元素：图标与知名应用过于相似，有仿冒风险；
• 图标分辨率太低：放大后模糊、有锯齿。

从 iOS / 安卓图标迁移的实操步骤

如果你已经有 iOS 或安卓的图标，可以按这个顺序迁移：

1. 找到原始设计文件，而不是导出的成品图，确保能把主体和背景分开；
2. 拆成两层：背景单独导出铺满画布；主体单独导出、背景透明；
3. 调整主体大小：安卓自适应图标的前景安全区经验同样适用，主体不要贴边；
4. 合成预览：在设计软件里叠加圆角遮罩，检查不同尺寸下的效果；
5. 导出商店图标：合成后导出一张完整图标，上传 AppGallery Connect；
6. 真机检查：安装到鸿蒙设备上，看桌面、设置、通知中的显示效果。

上架前自查清单

• 前景层和背景层都是 1024×1024 PNG（或符合最新规范的尺寸）
• 背景层铺满、无透明区域
• 前景层主体在安全区内，四周留白充足
• 没有自己画圆角、外阴影
• layered_image.json 引用路径正确，module.json5 指向正确
• 商店图标与桌面图标视觉一致
• 小尺寸下主体清晰可辨，没有细小文字

小结

鸿蒙图标的关键在于「分层思维」：背景负责铺色，前景负责表达，外形交给系统。只要源文件拆分正确、主体留足安全区，再保证商店图标和应用内图标一致，大部分图标相关的审核问题都可以提前避免。