--- title: "Thrive Image Guide" slug: "thrive-platform-image-dimensions" tags: ["Image Specifications", "Safe Area Guidelines", "Logo Dimensions"] updated: 2026-10-13T07:49:41Z published: 2026-10-13T07:49:41Z canonical: "docs.thrivelearning.com/thrive-platform-image-dimensions" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.thrivelearning.com/llms.txt > Use this file to discover all available pages before exploring further. # Thrive Image Guide **This Guide helps your** **Thrive platform look its best.** All dimensions are given in pixels (width × height). The Thrive platform is responsive across desktop, tablet, and mobile; exceptions for the Thrive Mobile App are detailed below. Images may be resized proportionally, but we recommend always following the specified dimensions, aspect ratios, and safe areas. > [!NOTE] > Note: > > The safe area is the part of an image that stays visible across devices and screen sizes, and free of overlap from buttons, overlaid text, or other UI elements. Keep important text and graphics within this area so they aren't cropped or obscured. If you need licence-free images, [Pexels](https://pexels.com/) and [Unsplash](https://unsplash.com/) are good starting points. --- ## Logo Your logo appears on your login screen and in the header and footer of the desktop platform and mobile app. We recommend a landscape-orientated version of your logo, uploaded in dark and light versions. | Specification | Details | | --- | --- | | Format | .png with a transparent background | | Full logo dimensions | - Min: 115 (w) x 30 (h) px - Max: 345 (w) x 90 (h) px | | Logo mark dimensions (minimised version) | - Min: 30 (w) x 30 (h) px - Max: 90 (w) x 90 (h) px | **Template:** [Canva logo template ↗](https://www.canva.com/design/DAHKNd6g2nQ/XoWsOv1N-RYzPY_mw-2Wcg/edit) ![Search bar interface with a prominent search field and logo on the left side.](https://cdn.document360.io/3a0609fb-d96c-4ce1-aabe-d9338fb1e858/Images/Documentation/logo.png?sv=2026-02-06&spr=https&st=2026-11-03T21%3A44%3A31Z&se=2026-11-03T22%3A44%3A31Z&sr=c&sp=r&sig=J7sHmAlyVfRdjkis6Mo0khCz9A953UVbcE1BhYQbeFg%3D) > [!NOTE] > Note: > > To upload your logo, go to **Configure** > **Theme**. For details of each Theme setting, see [Theme](/v1/docs/dark-mode). --- ## Favicon The favicon appears in the browser tab next to your app title, and in the menu bar when it's collapsed. | Specification | Details | | --- | --- | | Format | .png with a transparent background | | Maximum dimensions | 150 (w) x 150 (h) px | | Minimum dimensions | 16 (w) x 16 (h) px | **Template:** [Canva logo template ↗](https://www.canva.com/design/DAHKNWNKCwY/a6f-oJhmW6j7disWrqKsXA/edit) ![Browser window displaying a Thrive sign-in page with blurred website address and standard navigation controls.](https://cdn.document360.io/3a0609fb-d96c-4ce1-aabe-d9338fb1e858/Images/Documentation/image(958).png?sv=2026-02-06&spr=https&st=2026-11-03T21%3A44%3A31Z&se=2026-11-03T22%3A44%3A31Z&sr=c&sp=r&sig=J7sHmAlyVfRdjkis6Mo0khCz9A953UVbcE1BhYQbeFg%3D) --- ## Login Image The login image displays on your login screen. | Specification | Details | | --- | --- | | Format | .png | | Recommended dimensions | 700 (w) x 850 (h) px | | Maximum dimensions | 1054 (w) x 1280 (h) px | | Minimum dimensions | 527 (w) x 640 (h) px | | File size | No maximum, but large images may be compressed to improve loading times | **Template:** [Canva logo template ↗](https://www.canva.com/design/DAHKNedUqgY/_DBTaDo4xlg3y8yyPeIwxg/edit) ![Thrive login interface showcasing various UI inspirations and upcoming events.](https://cdn.document360.io/3a0609fb-d96c-4ce1-aabe-d9338fb1e858/Images/Documentation/login.png?sv=2026-02-06&spr=https&st=2026-11-03T21%3A44%3A31Z&se=2026-11-03T22%3A44%3A31Z&sr=c&sp=r&sig=J7sHmAlyVfRdjkis6Mo0khCz9A953UVbcE1BhYQbeFg%3D) --- ## Campaign Banners Campaign banners appear at the top of the Home screen and Campaigns screen on desktop and the mobile app. We recommend using image-only banners rather than adding text directly to the image – you can add campaign text separately using the **Banner Headline** and **Banner Subheading** fields. > [!NOTE] > Note: > > For how to create a campaign, see [Campaigns](/v1/docs/campaigns-1). | Specification | Desktop banner | Mobile banner | | --- | --- | --- | | Format | .png, .jpg, or .gif | .png, .jpg, or .gif | | Aspect ratio | 16:6 | 16:9 | | Dimensions | 1200 (w) x 450 (h) px | 1280 (w) x 720 (h) px | | Safe area | 760 (w) x 210 (h) px – horizontally centred, aligned from the top | 1140 (w) x 505 (h) px – horizontally centred, aligned from the bottom | | File size | Below 10 MB | Below 10 MB | The diagrams below show the safe area for each banner. Keep any text or graphics within the outlined region – anything outside it may be hidden or overlapped by other UI elements. ### Desktop Banner Safe Area ![Visual representation of desktop safe area dimensions and unsafe area for design layout.](https://cdn.document360.io/3a0609fb-d96c-4ce1-aabe-d9338fb1e858/Images/Documentation/campaign-banner-desktop.png?sv=2026-02-06&spr=https&st=2026-11-03T21%3A44%3A31Z&se=2026-11-03T22%3A44%3A31Z&sr=c&sp=r&sig=J7sHmAlyVfRdjkis6Mo0khCz9A953UVbcE1BhYQbeFg%3D) **Template:** [Canva logo template ↗](https://www.canva.com/design/DAHKNQOtS5s/KjQXEisfiIJiY0PBtfpTXQ/edit) ### Mobile Banner Safe Area ![](https://cdn.document360.io/3a0609fb-d96c-4ce1-aabe-d9338fb1e858/Images/Documentation/campaign-banner-mobile.png?sv=2026-02-06&spr=https&st=2026-11-03T21%3A44%3A31Z&se=2026-11-03T22%3A44%3A31Z&sr=c&sp=r&sig=J7sHmAlyVfRdjkis6Mo0khCz9A953UVbcE1BhYQbeFg%3D) **Template:** [Canva logo template ↗](https://www.canva.com/design/DAHKNiVPrRM/If5HnOArTTtq0XB1aPqv4Q/edit) --- ## Content and Space Images A single image is used in two places: on content cards and as the hero image across a number of content types, including Articles, Assessments, eLearning, Events, Mixed Content, Pathways, and Spaces. We advise against adding text or graphics directly to these images. If you do include them, keep them within the safe area. | Specification | Details | | --- | --- | | Format | .png, .jpg, .webp, or .gif (space images only) | | Aspect ratio | 16:9 | | Dimensions | 1200 (w) x 675 (h) px | | Safe area | 1070 (w) x 410 (h) px – horizontally centred, 50 px from the bottom | | File size | Below 5 MB | The diagram below shows the safe area. Anything outside it may be hidden or overlapped by card buttons and other UI elements. ![Visual representation of safe and unsafe areas for design layout in a workspace.](https://cdn.document360.io/3a0609fb-d96c-4ce1-aabe-d9338fb1e858/Images/Documentation/content-spaces.png?sv=2026-02-06&spr=https&st=2026-11-03T21%3A44%3A31Z&se=2026-11-03T22%3A44%3A31Z&sr=c&sp=r&sig=J7sHmAlyVfRdjkis6Mo0khCz9A953UVbcE1BhYQbeFg%3D) **Template:** [Canva logo template ↗](https://www.canva.com/design/DAHKNhCzVWM/6C8YaClCrnc3cxQ-mwEi1g/edit) --- ## Explore Tile Images Explore tile images appear as a tile for each tag on the Explore screens, on desktop and the mobile app. The tag title is always displayed alongside the tile – below the image on desktop, and overlaid at the foot of the image on mobile, which is where the unsafe area sits. > [!NOTE] > Note: > > Each Explore tile uses the thumbnail image uploaded to its skill or topic tag. To update a tile image, edit the relevant tag and upload a new thumbnail. For how to create and manage tags, see [Skills](/v1/docs/skills-1) and [Topics](/v1/docs/topics). | Specification | Details | | --- | --- | | Format | .png, .jpg, or .gif | | Aspect ratio | 5:4 | | Dimensions | 610 (w) x 490 (h) px | | Safe area | 450 (w) x 330 (h) px – horizontally centred, aligned from the top | | File size | Below 1 MB | The diagram below shows the safe area. On mobile, the tag title overlays the foot of the image, so keep any text or graphics within the outlined region. ![Visual representation of safe and unsafe areas for design layout with highlighted elements.](https://cdn.document360.io/3a0609fb-d96c-4ce1-aabe-d9338fb1e858/Images/Documentation/explore.png?sv=2026-02-06&spr=https&st=2026-11-03T21%3A44%3A31Z&se=2026-11-03T22%3A44%3A31Z&sr=c&sp=r&sig=J7sHmAlyVfRdjkis6Mo0khCz9A953UVbcE1BhYQbeFg%3D) **Template:** [Canva logo template ↗](https://www.canva.com/design/DAHKNg5p7mA/n_d3NhQEFd-CC3-CIwSglQ/edit) --- ## Reward Images (Badges) Reward images appear on desktop and the mobile app. If you follow the specified dimensions, the entire image is safe – text and graphics can be placed anywhere within it. | Specification | Details | | --- | --- | | Format | .png, .jpg, or .gif | | Aspect ratio | 1:1 | | Dimensions | 80 (w) x 80 (h) px | | Safe area | N/A – the full image is safe at the specified dimensions | | File size | Below 5 MB | **Template:** [Canva logo template ↗](https://www.canva.com/design/DAHKNtwPdU8/I1L9iG9rLS9RFPMcGy9N7Q/edit) Any learning material in Thrive, including courses, quizzes, videos, documents, external links, and user-generated resources. Content serves to educate, engage, and assess learners, supporting a wide range of learning experiences across the platform.