> For the complete documentation index, see [llms.txt](https://guides.mangoapps.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guides.mangoapps.com/admin-guide/branding/image-recommendations.md).

# Image Recommendations

### Overview

This guide provides recommendations for optimal image sizes tailored to different intranet use cases.

***

### Banner Configuration

> Recommended sizes 
>
> Web: 1920 x 400 px
>
> Mobile: 750 x 450 px

<figure><img src="/files/zM6lA7Y17nVrneJnqUce" alt="" width="563"><figcaption></figcaption></figure>

For information on changing the Home module banner configuration, click [here](https://guides.mangoapps.com/admin-guide/branding/full-portal/home-page-modern-vs.-classic-view#background-image).

***

### Company Banner Image

> Company Banner: 1200 x 96px
>
> Company Hero: 1920 x 150 px

<figure><img src="/files/OSYFqRzEpxMfcNCnEGZh" alt=""><figcaption></figcaption></figure>

Learn about Company Banner Images [here](https://guides.mangoapps.com/user-guide/company/company-toolbars-admin#company-header-settings).

***

### Course Catalog Image

> Recommended size: 300 x 300 px

<figure><img src="/files/mnTfQA7ktuebAJoJnLCy" alt="" width="563"><figcaption></figcaption></figure>

***

### Course Image

> Recommended size: 1280 x 790 px

<figure><img src="/files/zxTreXTwUjt1nVjGx5l2" alt="" width="563"><figcaption></figcaption></figure>

***

### Event Photo/Icon

> Recommended size: 250 x 250 px

<figure><img src="/files/aIFTO9vPNTdst1NSqZei" alt="" width="375"><figcaption></figcaption></figure>

***

### Greeting/ Recognition Image

> Recommended size: 600 x 314 px

<figure><img src="/files/bwMaJDSEbpxQ9rH7tiRd" alt="" width="563"><figcaption></figcaption></figure>

***

### Group, Department, Project Picture

> Recommended size: 250 x 250 px

<figure><img src="/files/FkqTmaYA037QeqnJLBNj" alt="" width="563"><figcaption></figcaption></figure>

***

### Group, Department, Project Banner

> Recommended size: 1200 x 96 px

<figure><img src="/files/iW9bBmCD4cwq08Lc6Ft0" alt="" width="563"><figcaption></figcaption></figure>

***

### Logo & Favicon

> Recommended size:  Logo :- 200 x 45 px | Favicon :-  16 x 16 px

<figure><img src="/files/FT4gk6K0e2ndteZKRCKF" alt="" width="563"><figcaption></figcaption></figure>

***

### Media Center - Set Featured Image

> Recommended size: 402 x 248 px

<figure><img src="/files/10NzqZrIU1R67SRlneJk" alt="" width="563"><figcaption></figcaption></figure>

For information on items within the media center, click [here](https://guides.mangoapps.com/user-guide/media-center).

***

### Multimedia Widget

> Recommended size: 1250 x 773 px

<figure><img src="/files/rP6lnU8DDsHBuR3jCQ0j" alt="" width="563"><figcaption></figcaption></figure>

***

### Post - Featured Image

> Recommended size: 1250 x 773 px&#x20;

<figure><img src="/files/WIRbXvXHS4XGiVDh526t" alt="" width="563"><figcaption></figcaption></figure>

For information on Post Featured Images, click [here](https://guides.mangoapps.com/user-guide/posts/compose-a-post#id-5.-feature-image).

***

### Post - 'Image' Block

> Recommended sizes:&#x20;

<figure><img src="/files/6z0UYqLMupyC6XSOGwpb" alt="" width="563"><figcaption></figcaption></figure>

***

### Post 'Image + Text' Block

> Recommended sizes:&#x20;

<figure><img src="/files/kKTxQiYp7z2DaAjR0Kxz" alt=""><figcaption></figcaption></figure>

***

### Post - Promotion Banner

> Recommended size: 1680 x 106 px

<figure><img src="/files/P0qpZtF5bBsWBBZRe9Id" alt="" width="563"><figcaption></figcaption></figure>

Learn about Promoted Posts [here](https://guides.mangoapps.com/user-guide/posts/compose-a-post#id-7.5-post-promotion-admin-only-company-post-only).

***

### Post 'Video' Block - Thumbnail

> Recommended size: 1250 x 773 px

<figure><img src="/files/47lo3pZhmEFkzuA9Deaj" alt="" width="375"><figcaption></figcaption></figure>

***

### Profile Photo

> Recommended size: 250 x 250 px

<figure><img src="/files/c5z4YQdXkXMeMmBN1Zug" alt=""><figcaption></figcaption></figure>

Learn where to upload this image, [here](https://guides.mangoapps.com/user-guide/people-directory-and-profiles/user-profile/edit-your-user-profile#uploading-a-profile-picture).

***

### Survey Banner

> Recommended sizes are:&#x20;
>
> 1920 × 150 px for web
>
> 393 × 100 px for mobile.

<figure><img src="/files/e61kFzm4WFZKzP3eFseP" alt="" width="563"><figcaption></figcaption></figure>

***

### Survey Completion Message Image

> Minimum size is 200 × 200 px
>
> Recommended size is 1024 × 1024 px

<figure><img src="/files/hxt1wNh5s7k83fkmNV87" alt="" width="386"><figcaption></figcaption></figure>

***

### Tracker Forms - Headers Image/ Logo

> Recommended size: 600 x 200 px

<figure><img src="/files/ceU9Hu2E1mYpKb2tzBcf" alt="" width="375"><figcaption></figcaption></figure>

For information on Tracker Forms, click [here](https://guides.mangoapps.com/user-guide/trackers/forms/edit-a-form).

***

### Widget Header Images

<figure><img src="/files/ltBPMP1pKJVlwcYuJHZN" alt="" width="563"><figcaption></figcaption></figure>

| Width of Widget | Minimum px   | Recommended px |
| --------------- | ------------ | -------------- |
| 1 Column Widget | 400 x 96 px  | 600 x 144 px   |
| 2 Column Widget | 800 x 96 px  | 1200 x 144 px  |
| 3 Column Widget | 1200 x 96 px | 1800 x 144 px  |

***

### Wiki Banner

<figure><img src="/files/97gjMExMMyHn3b1mkTD8" alt="" width="563"><figcaption></figcaption></figure>

**Recommended Size:** Upload a banner image at **1920x180px** for best results.

**Visible Area:** Depending on the layout, about **950px of the width** will be visible in the central content area. Any important elements, such as titles or text within the image, should be placed within this visible region.

<figure><img src="/files/0els56r4gA4muNSs6VCZ" alt="" width="375"><figcaption></figcaption></figure>

**Page Layout Impact:**

* On **full-width pages**, the banner stretches to fit across the screen.
* On **fixed-width pages (1200px)**, the banner is cropped to fit, which means content near the edges of the image may not display.

**Best Practice:** Keep key design elements (like titles or logos) centered within the image so they remain visible across all layouts.