# Branding Your Wallet Cards: Logo, Colors, Stamp Icon — Your Brand in Apple & Google Wallet

> How to fully match your digital stamp card to your brand in 10 minutes — logo upload, brand and accent colors, a custom stamp icon, a background image, and your own eyebrow text in the reward state. Includes a spec breakdown for the Apple Wallet banner (480×150) and the Google Wallet circle (660×660).

Canonical: https://reloop.cards/en/blog/wallet-custom-branding-logo-farben
Published: 2026-04-28
Updated: 2026-08-02
Author: reloop Team (candybytes GmbH)

---
export const metadata = {
  title:
    'Branding Your Wallet Cards: Logo, Colors, Stamp Icon — Your Brand in Apple & Google Wallet',
  description:
    'How to fully match your digital stamp card to your brand in 10 minutes — logo upload, brand and accent colors, a custom stamp icon, a background image, and your own eyebrow text in the reward state. Includes a spec breakdown for the Apple Wallet banner (480×150) and the Google Wallet circle (660×660).',
  publishedAt: '2026-04-28',
  updatedAt: '2026-08-02',
  category: 'Guide',
  tags: [
    'Custom Branding',
    'Apple Wallet',
    'Google Wallet',
    'Logo',
    'Brand Colors',
    'Stamp Card',
    'Design',
  ],
  readingMinutes: 8,
};

A **digital stamp card** with the default reloop look works just fine technically — but it's a waste of marketing potential. Every time a guest opens the card in Apple Wallet or Google Wallet, they could be seeing your brand: your logo, your brand colors, your background image. This guide shows you how to fully match a wallet card to your business in **10 minutes** — and which Apple/Google specs you need to know so your logo doesn't get clipped by Wallet's built-in masks.

<Callout tone="info" title="What you'll need">
- A reloop account (custom branding is included on every plan: brand colors, logo, stamp icon, background image, plus the custom eyebrow and hero image in the reward state).
- Your logo as a PNG, JPG, or SVG (max 10 MB)
- Optional: brand colors as hex codes (otherwise just use the color picker)
- Optional: a background image for the card (1280 px on the long edge recommended)
</Callout>

## What Apple Wallet and Google Wallet each do differently

Before you upload anything, it's important to understand this: Apple and Google render your logo **completely differently**.

### Apple Wallet

- Your logo appears in the **top left**, on top of the brand-color background
- Format: **rectangular banner** (max 160 × 50 pt, which is 480 × 150 px @ 3× Retina)
- Aspect ratio: roughly 3.2 : 1 (landscape)
- Apple shows the logo **as-is** with no mask — if you supply a square logo, it'll look small and puny

### Google Wallet

- Your logo appears in the **top left** inside a **circle**
- Format: **square** (at least 660 × 660 px)
- Google automatically masks it into a circle, with a 15% safe area around the edge
- If you supply a landscape banner logo, it'll either get squished or cropped off at the top and bottom

**The dilemma**: a single logo can't be both an Apple banner AND a Google circle at the same time.

**The reloop solution**: You upload your original (ideally square or slightly rectangular, at least 660 × 660 px). The server normalizes it to 1024 × 1024 and **automatically generates three platform variants** when you save:

- `logo-apple.png` — 480 × 150 PNG, fits-inside on a transparent canvas (for PassKit)
- `logo-google.png` — 660 × 660 square PNG with a 15% safe area (for the Google Wallet API)
- `logo-thumb.webp` — 64 × 64 WebP for UI display in the dashboard

So you **don't** have to choose between the two worlds. Upload a good square, and the rest happens automatically.

## Step by step: matching your card to your brand

### 1. Open the program + Branding tab

In the dashboard: **Programs** → pick the program → **Branding** tab (or click the "Branding" tab on the left in the editor).

### 2. Upload your logo

Drag and drop into the logo slot, or click to open the file picker. Three things happen in parallel during the upload:

1. **Client-side resize** down to max 1024 × 1024 (saves storage bytes + upload bandwidth)
2. **EXIF data gets stripped** (no accidental geo-tag leak)
3. **The server generates the 3 platform variants** and saves them as separate storage files

In the live wallet simulator on the right, you'll see **immediately** how the logo looks in Apple Wallet (banner, top left) and in Google Wallet (circle, top left). If your logo is too wide and looks cropped in the Google circle: re-export the logo in a **square** layout and upload it again.

**Logo tips**:

- **A transparent background** is always better. The brand color behind the logo should show through.
- **A minimum margin of 10%** to the edge of the logo. Both Apple and Google have softer or harder mask edges; without a margin, the outer edges get clipped.
- **SVG works too** and gets rasterized to PNG on the server side (at 3× density).
- **Dark logos on light brand colors** and vice versa — make sure the contrast holds up. A black logo on a dark-red brand background isn't legible.

### 3. Choose a brand color + accent color

Two color pickers:

- **Brand color** (`brandColor`): the background of your wallet card. In Apple Wallet, this is the entire top half. In Google Wallet, it's the whole card. Default: `#55182c` (Stempelkarte wine).
- **Accent color** (`accentColor`): the color of the **filled stamp circles**, the goal-marker star, and (on some Wallet versions) the reward ribbon animation. Default: `#f8b627` (Stempelkarte gold).

**Best practice**: brand color = your main brand (logo background), accent color = a **contrasting** complement. If your brand is, say, dark blue, go with gold or a warm orange as the accent — not "the same blue, a little lighter."

### 4. Configure the stamp icon (optional)

The default is a simple star. You have three alternatives:

1. **Upload your own stamp icon** (same upload path as the logo). PNG/JPG/SVG, max 10 MB. Gets normalized to 256×256.
2. **Emoji as a stamp** — enter a single emoji (e.g. ☕ for a café, 🥐 for a bakery, ✂️ for a salon). The renderer uses Pango + Noto Color Emoji.
3. **Keep the default star** if you don't have a concept yet.

**Tip**: high-contrast custom icons work better. A delicate line-drawing stamp disappears on the small card display; a bold solid shape reads well.

### 5. Choose a stamp display mode

Two options:

- **`circle-number`** (default): a stamp circle with the icon inside, an empty circle for not-yet-redeemed. Classic.
- **`image-only`**: the full icon as a filled stamp, a grayscale variant when empty. Modern, on-brand, and only worth it if your icon is visually strong.

The live simulator shows both modes instantly.

### 6. Background image (optional)

You can upload a background image for the **strip area** (where the stamps sit) — for example a subtle pattern or a blurred photo of your café. Format: JPG / PNG / WebP, long edge max 1280 px.

The **overlay mode** + **overlay strength** (0–80%) controls how heavily your brand color sits over the image:

- `none`: image fully visible (good for very subtle patterns)
- `darken`: image darkened by the brand color (good for bright photos)
- `lighten`: image lightened (good for dark photos)
- `brand-tint` (default): image gets a brand-color tint

### 7. Customize the reward state

What happens visually when the card is full and the guest can claim their reward?

- **A custom reward background image** (e.g. a confetti photo or a photo of your reward product, like a "free cappuccino")
- **A reward background color** (a solid color instead of an image, overriding the default brand gradient)
- **Custom eyebrow text** — instead of the default "REWARD AVAILABLE" → your own tagline like "YOUR COFFEE IS WAITING"
- **A custom reward headline** — instead of the program-specific reward → your own marketing copy
- **Sunburst + confetti animation** on/off
- **Eyebrow color, headline size, position** — adjustable separately per axis

This is the difference between "the card is full" and "the card is celebrating with the guest."

### 8. Turn off the watermark (Premium only)

By default, your card shows a small "reloop" watermark in the bottom right. With the **watermark toggle** (`hideWatermark`), you hide it — a white-label card without our brand. Available on the Premium plan only.

## Preview and live test

**In the editor**:
- The live simulator shows the Apple and Google frames side by side (or via a toggle)
- A stamp scrubber from 0 to max → see how the card evolves as it gets stamped
- A reward-state toggle → see how the card looks when full

**On a real phone**:
1. Save the program
2. Create a test card (in the Cards tab → "New card")
3. Scan the QR code with your iPhone (or Android)
4. Tap "Add to Wallet"
5. Open the card in the Wallet app → this is exactly what your guests see

If something looks different from the simulator: report a bug to support@reloop.cards — we'll check right away, because our promise is "pixel-identical between preview and pass."

## Common branding mistakes

- **Uploading the logo too small** (200 × 200 px). The server has to upscale → blurry logo. At least 660 × 660 px.
- **Choosing a square logo but the Apple banner looks tiny**. Not a bug — the Apple banner is 3.2:1, so a square fills it vertically but leaves 75% of the horizontal space empty. If you're prioritizing Apple, make a wider logo.
- **Brand color equals accent color**. The stamps won't be visible. The accent has to contrast.
- **Background image too busy**. The stamps get overlapped and the card feels cluttered. Use a pattern or an image + 50% overlay.

## When you DON'T need custom branding

If you:
- Are just trying out the service (the default looks sharp anyway)
- Are under time pressure for launch and want to do branding later
- Don't have an established brand identity yet (in that case the default branding hurts no one)

Branding can be improved iteratively — in 5 minutes you can add a logo + 2 colors, and it'll instantly look 80% as good as a fully configured program.

<Callout tone="success" title="Next steps">
- [Full overview of all dashboard features →](/funktionen/dashboard)
- [Send push broadcasts in 5 minutes →](/blog/wallet-push-broadcasts-anleitung)
- [Understanding reporting — which metrics matter →](/blog/loyalty-reporting-metriken)
- [Examples from 6 industries →](/beispiele)
- [Start for free →](/signup)
</Callout>