HarmonyOS鸿蒙Next中这个app图标的前后景，我一直搞不清楚，怎么才算对

HarmonyOS鸿蒙Next中这个app图标的前后景，我一直搞不清楚，怎么才算对 cke_136.png

目前我的准备了前后景，放到了AppScope\resources\base\media

cke_3067.png

cke_6110.png


更多关于HarmonyOS鸿蒙Next中这个app图标的前后景，我一直搞不清楚，怎么才算对的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

1、AppScope/resources/base/media 下的layered_image.json中配置前景色与后景色图片资源

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

2、AppScope>app.json5>app>icon 引用步骤1路径下的 layered_image.json

3、products/entry/src/main/module.json5>abilities>icon 引用步骤1路径下 的layered_image.json

4、配置完成后，卸载应用重新安装APP验证是否生效

5、生效后打包再提审试试

**Tip：**前景为10241024的png图片；背景为10241024的纯色png图片；不需要自行设置圆角

相关文档：配置应用图标和名称

更多关于HarmonyOS鸿蒙Next中这个app图标的前后景，我一直搞不清楚，怎么才算对的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


项目的 /AppScope/resources/base/media/ 这个文件夹放前景图后景图；
其中foreground 就是logo（不带背景）；后景图就是纯背景，要求都是 1024x1024；前景图和后景图合成最终的logo；

cke_786.png

cke_3727.png

cke_4187.png

最终合成的logo如图

cke_8410.png

参考一下刚出炉的：HarmonyOS 应用图标前后景（前景图 + 后景图）开发者常见问题与系统化解决路径：从配置到审核通关 | 华为开发者联盟

我晚上整理一篇文章发出来 最近好多人问这个问题。晚点回复你

先参考一下
2.1.4.3 图标
2.1.4.3.1 应用图标
通用应用 UX 体验标准-应用 UX 体验标准 - 华为HarmonyOS开发者

entry\src\main\resources\base\media，这个文件夹下我也放了

cke_165.png

只需要放到项目的 /AppScope/resources/base/media/ 就行了；你的图片做不对，应该纯白色的背景图background，foreground是蓝色的；需要logo和背景图分离开。

entry那个文件夹下面的resource那里也要放一下吧，我是一共放了两个地方，

entry\src\main\resources\base\media 这个文件夹是吧，我也放了，

对，那应该就对了，再重新申请看看？，

在HarmonyOS Next中，App图标采用分层设计，分为前景和背景。前景是图标主体图形元素，背景为底层衬托。正确设置需确保前景清晰突出，背景简洁不干扰主体。通过DevEco Studio的资源管理器配置图标分层资源，前景与背景需使用PNG格式并保持尺寸一致。系统会自动处理图层叠加和自适应显示，无需手动调整图层层级。

在HarmonyOS Next中，图标的前景和背景层需要正确配置以确保系统能正常渲染。从你的截图看，前景层（icon.png）和背景层（icon_background.png）已放置在AppScope\resources\base\media目录，这是正确的路径。

关键点：

  • 前景层应为应用图标的可识别部分（如Logo），支持透明区域。
  • 背景层提供整体形状或底色，系统会根据设备主题动态适配。
  • 确保两个图层的尺寸一致，且符合官方推荐的尺寸规范（例如512x512像素）。

如果图标显示异常，检查图片格式（建议PNG）和命名是否正确。无需额外代码，系统会自动合成。如果问题持续，验证资源文件是否被正确打包到应用中。

回到顶部