Your logo comes out cropped because Apple and Google crop the same file in two different ways: Apple roughly respects the file proportions, while Google cuts a circle out of the middle. The safe loyalty card logo size is a square with transparent padding of at least eight per cent on every side.
Why the logo looks different on every device
Because you are not uploading a logo to one system but to two that agree on nothing. Apple displays the image in a rectangular area at the top of the pass and roughly preserves its proportions. Google takes the identical file and cuts a circle from the centre, so everything outside that circle disappears without warning.
The result is that a logo looking excellent in an Apple preview loses both its ends on Google, while one tuned for Google looks small and lost in the middle of Apple's space. The answer is not two different files but a single file designed to survive both crops.
The transparent-padding rule
Design your logo inside a square, then leave empty transparent padding on all four sides. That padding is what Google eats when it cuts its circle, leaving your mark intact. It is also what stops the logo pressing against the edges of Apple's area.
| Element | Value | Why |
|---|---|---|
| File shape | Square (1:1) | Survives both circular and rectangular crops |
| Minimum padding | 8% each side | What a circle removes from the corners of a square |
| Comfortable padding | 12% each side | Absorbs future template changes |
| File format | PNG with transparency | A white background shows as a box on a coloured pass |
| Size | 660 pixels or more | Covers high-density screens without softening |
The fourth row is the most forgotten and the easiest to fix. A file with a white background looks fine against a white preview, then appears on your dark pass as a white box around your logo. Always use a transparent PNG, and test it over a dark background before approving it.
The four common mistakes
Do
- Export one square that works on both platforms rather than two files.
- Centre the mark exactly, horizontally and vertically.
- Test the logo inside a circle drawn on the square before uploading.
- Use a simplified version of your logo if the full one is intricate.
Do not
- Do not upload a long horizontal logo; the circle will cut both ends off.
- Do not set your shop name as small type inside the logo — it will not be readable.
- Do not leave the mark touching the file edge with no padding.
- Do not treat a design-tool preview as a substitute for a real device.
The first item on the right is the case we see most. Most business logos are horizontal, because they were designed for signage and letterheads, and that shape is precisely the worst one inside a circular crop. If yours is horizontal you need a condensed version — the initial, or the symbol alone — for use on the card.
The thirty-second circle test
- Open the square logo file in any design tool You need nothing specialised; anything that draws a circle will do.
- Draw a circle touching all four sides of the square That is exactly the area Google will display.
- Look at what falls outside the circle If any part of your mark does, shrink it until it fits entirely with a little room to spare.
- Repeat the test on a dark background It exposes two problems at once: a non-transparent background and weak contrast.
Thirty seconds is enough to avoid the single most common complaint after any card launch. Better still, it catches the problem before your customers add the pass, because correcting a logo after two hundred people have it reaches them as an abrupt change to a card they had grown used to.
And if you have no logo at all?
Then do not leave the space empty and do not set your name as ordinary text. The simplest thing that works: the first letter of your shop name in a clear, heavy typeface, white on a circle in your brand colour. That is not a poor stopgap — plenty of shops choose it deliberately, because it reads at small sizes better than any detailed logo.
The general rule at this size: every detail you add disappears. The logos that work inside a circle a few millimetres across are always the simplest — one shape, one colour, no text.
Common questions
Can I change the logo after launching the card?
Yes, and the change reaches every existing card automatically. But make it one considered change rather than a run of tweaks, because customers recognise your card in the wallet by shape and colour before they read the name. Changing the logo twice in a month makes your card look unfamiliar every time.
Why does my logo look blurry?
Because the file is smaller than high-density screens require. Modern displays render three physical dots per logical point, so a two-hundred-pixel file is shown at three times its size and loses its edges. Upload at least six hundred and sixty pixels, and export from a vector source where you can.
Does this differ between stamp cards and points cards?
No. Logo cropping follows the operating system rather than the card type, so the same rule applies to stamps, points and cashback alike. What differs between types is the field order and how the balance is displayed on the face, and that is a question of face design rather than of the logo.