> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Marketplace App Logo Guidelines

> Design guidelines for DingTalk Marketplace app logos, covering size, format, background color, design principles, and safety specifications for a polished app icon.

**Note**

To improve the user experience, the **design guidelines** have been upgraded and migrated. The app logo guidelines described in this article reflect the content before the upgrade. The **design guidelines** document was **upgraded on May 30, 2022**. View the latest content directly at [DingTalk App Icon Design Guidelines](https://ding.design/#/cate/1/page/802).

The app logo appears in the Developer Console, the DingTalk Client-side, and the marketplace. Provide a clear, appropriately sized logo image to ensure a polished and complete appearance in the interface.

## Use Cases

The app logo appears as a rounded square in the DingTalk Workbench, the marketplace, and the app details page.

Note: In Workbench components, the app logo is displayed at an actual size of 40 × 40 px. Ensure the logo remains recognizable at this size.

## Submission Specifications

| Logo Format     | PNG/JPG static image                      |
| --------------- | ----------------------------------------- |
| Logo Size       | 240 × 240 px (square, no rounded corners) |
| Logo File Size  | 120 KB or less                            |
| Logo Background | Opaque                                    |

## Design Guidelines

### 1. Design Principles

| Principle           | Description                                                                                                                                                                                                                                                                                                                                                                                                      |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Simple and Clear    | On mobile devices, app logos are usually scaled down to varying degrees. When designing, pay close attention to keeping the graphic simple to avoid a lack of clarity that makes it unrecognizable at small sizes. A simple graphic design also improves the overall quality of the logo.                                                                                                                        |
| Accurate Expression | The first prerequisite for an excellent logo design is accurate meaning, allowing users to instantly recognize what it represents. Highly distill the product's characteristics to find the graphic elements that best represent its attributes, and emphasize these elements in the design.                                                                                                                     |
| Distinctive         | There are many products of the same type, and their app logos tend to look similar. To make your app stand out from the many similar products, it must convey distinctiveness while highlighting the product's core functions, avoiding visual homogeneity.                                                                                                                                                      |
| Brand Continuity    | For products with brand recognition, make full use of their brand logo. These logos have already established a strong brand impression and influence, along with high brand recognition. When designing the app icon, fully leverage the existing brand image. Let the brand's deep heritage continue to work and extend the brand image, giving the brand stronger vitality.                                    |
| Avoid Using Text    | Using text as an app logo is a crude and simplistic approach. Because there is too much text, it can only be shrunk within a limited space, making the app logo look crowded and hard to read. Another fatal consequence of using a lot of text is that it greatly reduces the aesthetic quality of the app icon, which not only fails to create a good impression but instead provokes user aversion.           |
| Do Not Use Photos   | Do not use a photo directly as an app logo. Photos are bitmaps, which easily lose quality when scaled, causing a series of potential issues when used to design a logo. The role of a photo is to provide creativity and inspiration for logo design, not to be used directly in creating the logo. Vector graphics can be scaled without loss of quality, so they are the most suitable choice for logo design. |

### 2. Container Grid

The app logo output must preserve the integrity of the main element and must not be cropped by the front-end circular container.

#### 2.1 Image Cropping Requirements

The actual output size of the app logo is 240 × 240 px, with square corners, in PNG/JPG format and a solid, opaque background.

#### 2.2 Grid System

* To keep the visual weight of app logos consistent, ensure the graphic within the background container fits inside the grid areas of a circle, square, or rectangle.
* The unit grid size is 8 × 8 px.

#### 2.3 Examples

### 3. Background Color

* Second-party and third-party apps can use their own brand colors.
* For the background color of first-party apps and feature entry icons, select from the following color palette.
* Do not use gradients, pure white, or pure black. The background should be a single solid color.

### 4. Graphic Requirements

* Design the main element using a "solid/filled" graphic approach to keep the app logo clear and eye-catching in various scenarios.
* Use pure white fill to ensure it stands out sufficiently against colored backgrounds.
* If second-party or third-party developers have their own brand graphics, present them in a flat or silhouette style so they remain easy to recognize when the app logo is scaled down.
* For correct examples, refer to "2.3 Examples."

A text logo, or a main element that is too small in area, is difficult to recognize when actually displayed.

Using a linear graphic that is too thin on a light background does not provide enough clarity when actually displayed.

## Security Risks

1. The app logo must be original and free of legal risks.
2. The app logo must not contain prohibited, restricted, or vulgar illegal characters or patterns, such as pornography, gambling, drugs, firearms, or tobacco. It must not involve political leanings or political overtones.
3. The app logo must not contain tags such as red dots, NEW, or HOT.
4. Do not use a QR Code as a mini program logo.

## File Download

[DingTalk App Logo Design Template](https://files.alicdn.com/tpsservice/d37450e898bfa875b6b1ec7cfaf19d01.sketch)
