1# Configuring Layered Icons
2
3If the application icon is a layered icon (including the foreground and background images), you can configure the icon by referring to this topic. For details about the icon specifications, see <!--RP1-->[Icon Deliverables](https://docs.openharmony.cn/pages/v5.0/zh-cn/design/ux-design/visual-app-icons.md#%E5%9B%BE%E6%A0%87%E4%BA%A4%E4%BB%98)<!--RP1End-->.
4
5## Procedure
61. Place the foreground and background resource files in **AppScope\resources\base\media**.
7   In this example, the file names of the foreground and background resource files are **foreground.png** and **background.png** respectively.
82. Create an **layered_image.json** file in the **AppScope\resources\base\media** directory and configure the foreground and background resource information of the layered icon in the file.
9    ```json
10    {
11      "layered-image":
12      {
13        "background" : "$media:background",
14        "foreground" : "$media:foreground"
15      }
16    }
17    ```
183. Reference the layered icon resource file in the **app.json5** configuration file. Example:
19     ```json
20        {
21          "app": {
22            "icon": "$media:layered_image",
23            // ...
24          }
25        }
26    ```
27