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

# Design Guide

> Learn how to design high-quality Apple Wallet and Google Wallet passes with the right image formats, sizes and platform-specific best practices to ensure your passes look sharp and consistent across devices.

# Images

Design plays a big role in how your passes are perceived in Apple Wallet and Google Wallet. Using the right image formats, sizes and layouts ensures your
passes look sharp, load quickly and behave consistently across devices.

This guide walks through image requirements and design best practices for both platforms.

<Info>
  Image requirements and placement can vary depending on the pass template type. For more details, see the [Pass Template Types Explained](/documentation/pass-template-types-explained) guide.
</Info>

## Best Practices

When uploading images, please ensure they're in the `PNG` format, and that they're of a high quality.
We recommend compressing images using [Squoosh](https://squoosh.app/), and OxiPNG.

We accept images as direct URLs, or as base64 encoded data.

When using base64 encoded data, please ensure the data is URL safe.
When using direct URLs, please ensure the URL is publicly accessible.

Use different images for each platform, and overlay text with instructions on how to get to the back of the pass.

We validate the image format and size when you upload an image.

## Shared Images

To facilitate the creation of passes, we accept images that are shared across multiple platforms.

Please note that in some cases, images may be cropped or resized to fit the platform's requirements, so for best results, we recommend uploading variants optimized for each platform.

These are:

| Image  | Size           | Used for                             |
| ------ | -------------- | ------------------------------------ |
| Banner | 1125px x 432px | Apple Banner, Google Banner          |
| Icon   | 660px x 660px  | Apple Notification Icon, Google Logo |
| Logo   | 480 x 150px    | Apple Logo                           |

## Apple Images

### Banner

<img src="https://mintcdn.com/passentry-0/dT3buMXxEcyjrFvh/documentation/passes/design/apple_banner.png?fit=max&auto=format&n=dT3buMXxEcyjrFvh&q=85&s=50e311c3615ca13629ed78fb3e595379" alt="Apple Banner" width="60%" data-path="documentation/passes/design/apple_banner.png" />

When present, it appears prominently on the Apple Wallet. Use it to wisely to promote your brand or product.

If including text, please ensure it's readable and contrasted against the banner image background.

**Sizing varies depending on template type:**

| Template Type      | Banner Size    |
| ------------------ | -------------- |
| Generic            | Not present    |
| Loyalty            | 1125px x 432px |
| Event Ticket       | 1125px x 294px |
| Loyalty Stamp Card | 1125px x 432px |

## Logo

<img src="https://mintcdn.com/passentry-0/dT3buMXxEcyjrFvh/documentation/passes/design/apple_logo.png?fit=max&auto=format&n=dT3buMXxEcyjrFvh&q=85&s=d817a3f0f1b892ee7023775749b9aaf3" alt="Apple Logo" width="60%" className="block dark:hidden" data-path="documentation/passes/design/apple_logo.png" />

<img src="https://mintcdn.com/passentry-0/dT3buMXxEcyjrFvh/documentation/passes/design/apple_logo_light.png?fit=max&auto=format&n=dT3buMXxEcyjrFvh&q=85&s=fee4e7ddd2fa73c6b89193ddfe83a646" alt="Apple Logo" width="60%" className="hidden dark:block" data-path="documentation/passes/design/apple_logo_light.png" />

Appears on the top left of the pass.

Ensure the logo is readable and contrasted against the background colour of the pass.

If you would like a logo narrower than 150px, simply add a transparent space to the right of the logo.

**Size:** 480px x 150px

## Icon

<img src="https://mintcdn.com/passentry-0/dT3buMXxEcyjrFvh/documentation/passes/design/apple_icon.png?fit=max&auto=format&n=dT3buMXxEcyjrFvh&q=85&s=a009b38bb3f35bbe185eb757274db231" alt="Apple Icon" width="5%" data-path="documentation/passes/design/apple_icon.png" />

This appears on the notification tray when receiving notifications, or when the device is within a geofence.

**Size:** 87px x 87px

<Info>
  iOS devices cache the notification icon, so if you update the icon, it may take some time until the new icon is displayed.
</Info>

## Thumbnail

<img src="https://mintcdn.com/passentry-0/dT3buMXxEcyjrFvh/documentation/passes/design/apple_thumbnail.png?fit=max&auto=format&n=dT3buMXxEcyjrFvh&q=85&s=8f8d97fc3296693c38d2833918d86fba" alt="Apple Thumbnail" width="10%" data-path="documentation/passes/design/apple_thumbnail.png" />

Only appears in "Generic" template types.

This appears on the Apple Wallet when the pass is viewed.

**Size:** 270px x 270px

## Google Images

### Banner

<img src="https://mintcdn.com/passentry-0/dT3buMXxEcyjrFvh/documentation/passes/design/google_banner.png?fit=max&auto=format&n=dT3buMXxEcyjrFvh&q=85&s=7ad8ea9dda75f4dfd0b1bcee1f7fb77b" alt="Google Banner" width="60%" data-path="documentation/passes/design/google_banner.png" />

When present, it appears prominently on the Google Wallet. Use it to wisely to promote your brand or product.

If including text, please ensure it's readable and contrasted against the banner image background.

**Size:** 1032px x 336px

### Logo

<img src="https://mintcdn.com/passentry-0/Pme8e7kS-lNx7reF/documentation/passes/design/google_logo.png?fit=max&auto=format&n=Pme8e7kS-lNx7reF&q=85&s=bce5c9f998d1113199812ad81c1040e2" alt="Google Logo" width="10%" data-path="documentation/passes/design/google_logo.png" />

Although set with a 1:1 aspect ratio, it will be masked to fit a square shape.
When building your pass, ensure it has enough margin (15%) to fit into the safe area, otherwise it may be cropped when masked.

<img src="https://mintcdn.com/passentry-0/Pme8e7kS-lNx7reF/documentation/passes/design/google_logo_guide.png?fit=max&auto=format&n=Pme8e7kS-lNx7reF&q=85&s=722edcdce46013c4c5e1a62238dba6ce" alt="Google Logo Safe Area" width="30%" style={{ border: "1px solid #e0e0e0", borderRadius: "10px" }} data-path="documentation/passes/design/google_logo_guide.png" />

**Size:** 660px x 660px

## PassEntry Watermark

<img src="https://mintcdn.com/passentry-0/dT3buMXxEcyjrFvh/documentation/passes/design/banner_with_watermark.png?fit=max&auto=format&n=dT3buMXxEcyjrFvh&q=85&s=ea7153fc85e0c6c462898d4e38becb56" alt="PassEntry Watermark" width="40%" data-path="documentation/passes/design/banner_with_watermark.png" />

<img src="https://mintcdn.com/passentry-0/nVmEPjVSxA1ig75q/documentation/passes/design/passentry_watermark_dark.svg?fit=max&auto=format&n=nVmEPjVSxA1ig75q&q=85&s=cb842993cfe8906c024edd66bdbb1b72" alt="Apple Logo" width="30%" className="block dark:hidden" data-path="documentation/passes/design/passentry_watermark_dark.svg" />

<img src="https://mintcdn.com/passentry-0/nVmEPjVSxA1ig75q/documentation/passes/design/passentry_watermark_light.svg?fit=max&auto=format&n=nVmEPjVSxA1ig75q&q=85&s=d82f8c32f71626db748e3fc4adf57409" alt="Apple Logo" width="30%" className="hidden dark:block" data-path="documentation/passes/design/passentry_watermark_light.svg" />

When uploading a banner image, we automatically add a watermark to the image. You
can choose whether to use the dark or light version, and the position of the watermark.

To remove the watermark, contact your sales at PassEntry.
