# Branding Specifications

### Overview

Setting up the mobile branding for your company's MangoApps mobile application is essential for ensuring a seamless, branded experience for employees. This guide walks you through the necessary steps and specifications for configuring your MangoApps mobile app, covering required resources, branding elements, and distribution processes.

***

### Icon and Login Collateral

To start setting up your mobile branding, your Account Management team will need to the following from you:

* **Company Logo**: Provide your company logo in vector formats (.AI or .SVG) for scalability across different devices.
* **Application Name**: Decide on the name of your application, as it will appear on the phone’s home screen and in alerts. <mark style="color:red;">Unlisted App option only.</mark>
* **Application Icon**: Design an icon (1024 x 1024 px) for the app, to be displayed on the phone’s home screen.&#x20;
* **Splash Images**: Prepare splash images that will appear when the app is launched. Multiple sizes are required. <mark style="color:red;">Unlisted App option only.</mark>
  * iPhone X and newer: 1242 x 2688 px
  * iPad (Portrait): 1536 x 2048 px
  * iPad (Landscape): 2436 x 1125 px

***

### Mobile Specific Branding Elements

Most branding elements within your mobile app will automatically inherit the branding used on your MangoApps web portal. However, a few options can be customized to apply just to your mobile platform.&#x20;

These include:

* **Mobile Login Screen Background**: Minimum resolution of 1257 x 1536px
* **Mobile Home Page background Image:** Recommended size for mobile: 750 x 450 px
* **Widget Headers:** Mobile widgets will all share the 1 column widget header recommended size. Minimum: 400 x 96 px Recommended: 600 x 144 px.

***

**Company Banner**

Unlike the desktop version, the banner on mobile and tablets does not include widget-like effects. Instead, it maintains a clean and simplified appearance, adhering to the design mockups.

The company banner has a fixed height of **60px/pts**. The width dynamically adjusts based on the device's screen size, ensuring optimal display across different devices.

***

**Company Hero Banner**

The hero banner also features a fixed height of **60px/pts**, with a responsive, full-width design that stretches end-to-end on all devices. This ensures a seamless and consistent user experience, aligning with the desktop layout while maintaining mobile-first responsiveness.

<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guides.mangoapps.com/mobile-apps-guide/branding-specifications.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.