Purpose

In Model-Driven Power Apps, logos are displayed at a maximum height of 32 pixels. At this size, even minor design issues—such as whitespace, padding, or background colours—can significantly reduce clarity and visual quality.

To ensure logos display clearly and consistently, images must be prepared correctly before upload.

These guidelines also include tested logo dimensions for different areas of the platform to ensure logos render correctly across client records, themes, emails, and portals.

Core Principles

1. Use PNG Format with a Transparent Background

Requirement:
All logos must be provided as a .PNG file with a transparent background.

Why:
A transparent background ensures the logo integrates cleanly with the app interface, regardless of background colour. Files such as .JPG or .BMP do not support transparency and may display unwanted white or coloured boxes around the logo.

How to check:

Open the file in an image viewer. If the background shows a grey-and-white checkerboard pattern, it is transparent. If it appears solid white or coloured, it is not.

2. Remove All Margins and Padding

Requirement:
The image must be tightly cropped. The logo artwork should extend to the edges of the image file, with no empty space.

Why:
Any whitespace inside the image is scaled down along with the logo. Since the display height is limited to 32px, excess space reduces the visible size of the logo itself.

3. Use Appropriate Source Dimensions

Recommended Size Range

Height: 64px – 128px
Width: 200px – 400px

Why:
This range provides sufficient clarity when scaling down to 32px without unnecessary file size. Extremely large images (e.g., 2400×1200) provide no visual benefit and may impact performance.

Tested Platform Dimensions

Testing across the platform has shown the following specific dimensions work best depending on the logo shape.

Rectangular logos

• 300 × 128

• 400 × 128

Square or compact logos

• 128 × 128

• 200 × 128

These sizes consistently render well across client records, themes, emails, and portals.

4. Use Horizontal (Landscape) Orientation

Requirement:
Use the horizontal version of the logo wherever available.

Why:
At 32px height, vertical or stacked logos become difficult to read. Most brands provide a landscape version suitable for headers and digital use.

5. Keep the Design Simple

Requirement:
Use only the core logo mark or wordmark.

Avoid

• Taglines

• Sub-text

• Slogans

• Fine detail

Why:
At 32px height, small details are not legible and reduce clarity.

Platform Logo Usage Recommendations

Based on testing across the application, the following logo sizes work best for each location.

Client Record

Public URL Logo

• Both rectangular and square logos display correctly.

• Recommendation: Use a rectangular logo where possible to better fill the available space.

Recommended sizes:

• 300 × 128

• 400 × 128

Themes

Public Logo

• Both rectangular and square logos work well.

• Recommendation: Use a rectangular version to maximise visual balance.

Recommended sizes:

• 300 × 128

• 400 × 128

Public Logo (Email)

Best sizes:

• 128 × 128 (best fit)

• 200 × 128 (also works)

The 128 × 128 version typically produces the most consistent rendering in email templates.

Public Logo (Client Portal)

Recommended sizes:

• 400 × 128

• 300 × 128

The best result depends on the logo design. Logos with minimal padding display best in the client portal, as additional whitespace reduces the visible logo size.

Quick Reference Guide

Do and Don’t

Do

• Use a .PNG file with a transparent background

• Crop the image tightly (no whitespace)

• Use the horizontal version of the logo

• Keep source size within recommended dimensions

• Use the simplest version of the logo

• Test by resizing to 32px height to confirm readability

Don’t

• Use .JPG or .BMP formats

• Use images with white or coloured backgrounds

• Leave padding or empty space around the logo

• Upload oversized images

• Use portrait or stacked logos

• Include taglines or fine print

How to Obtain a Suitable Logo

Option A: Request from the Client

Ask the client for:

• A PNG file

• With a transparent background

• Optimised for web or digital use

Most marketing or brand teams will already have this available.

Option B: Prepare the Image Yourself

If the provided logo includes whitespace or a background:

1. Open the file in an image editor (e.g., Paint, Preview, Canva).

2. Crop all empty space around the logo.

3. If the background is white, remove it using tools such as remove.bg or Canva’s background removal feature.

4. Save the file as a .PNG.

Confirm the final file has:

• No padding

• Transparent background

• Appropriate dimensions

Example of a Good Logo File

The Google logo (googlelogo_color_272x92dp.png) is a strong example:

• PNG format

• Transparent background

• Tightly cropped

• Landscape orientation

• Suitable source dimensions

Summary

All logos in Model-Driven Power Apps are displayed at 32 pixels high. At this size, every pixel is important.

Whitespace, padding, background colour, or unnecessary detail will reduce clarity.

Provide a tightly cropped, transparent PNG in the correct orientation and dimensions to ensure the logo displays sharply and professionally across the platform.