# Wallet-Karten brandern: Logo, Farben, Stempel-Icon — deine Marke in Apple & Google Wallet

> Wie du in 10 Minuten deine digitale Stempelkarte komplett an deine Marke anpasst — Logo-Upload, Brand- und Akzent-Farben, eigenes Stempel-Icon, Hintergrund-Bild, eigener Eyebrow-Text im Reward-State. Inkl. Spec-Erklärung für Apple-Wallet-Banner (480×150) und Google-Wallet-Kreis (660×660).

Canonical: https://stempelkarte.app/blog/wallet-custom-branding-logo-farben
Published: 2026-04-28
Updated: 2026-04-28
Author: Stempelkarte.app Team (candybytes GmbH)

---
export const metadata = {
  title:
    'Wallet-Karten brandern: Logo, Farben, Stempel-Icon — deine Marke in Apple & Google Wallet',
  description:
    'Wie du in 10 Minuten deine digitale Stempelkarte komplett an deine Marke anpasst — Logo-Upload, Brand- und Akzent-Farben, eigenes Stempel-Icon, Hintergrund-Bild, eigener Eyebrow-Text im Reward-State. Inkl. Spec-Erklärung für Apple-Wallet-Banner (480×150) und Google-Wallet-Kreis (660×660).',
  publishedAt: '2026-04-28',
  updatedAt: '2026-04-28',
  category: 'Anleitung',
  tags: [
    'Custom Branding',
    'Apple Wallet',
    'Google Wallet',
    'Logo',
    'Brand-Farben',
    'Stempelkarte',
    'Design',
  ],
  readingMinutes: 8,
};

Eine **digitale Stempelkarte** mit dem Default-Stempelkarte.app-Look funktioniert technisch — aber sie ist eine Marketing-Verschwendung. Jedes Mal, wenn ein Gast die Karte in Apple Wallet oder Google Wallet öffnet, könnte er deine Marke sehen: dein Logo, deine Brand-Farben, dein Hintergrund-Bild. Diese Anleitung zeigt dir, wie du in **10 Minuten** eine Wallet-Karte komplett an dein Unternehmen anpasst — und welche Apple/Google-Specs du dabei kennen musst, damit dein Logo nicht von Wallet-internen Masken angeschnitten wird.

<Callout tone="info" title="Was du brauchst">
- Stempelkarte.app-Account (alle Tarife enthalten Custom Branding für Brand-Farben + Logo; Custom-Eyebrow + Hero-Bild im Reward-State sind ab Tarif **Business** verfügbar).
- Dein Logo als PNG, JPG oder SVG (max 10 MB)
- Optional: Brand-Farben als Hex-Codes (sonst nimmt der Color-Picker)
- Optional: Hintergrund-Bild für die Karte (1280 px lange Kante empfohlen)
</Callout>

## Was Apple Wallet und Google Wallet jeweils anders machen

Wichtig zu verstehen, bevor du irgendwas hochlädst: Apple und Google rendern dein Logo **komplett unterschiedlich**.

### Apple Wallet

- Dein Logo erscheint **oben links** über dem Brand-Color-Hintergrund
- Format: **rechteckiges Banner** (max 160 × 50 pt, das ist 480 × 150 px @ 3× Retina)
- Aspect Ratio: ca. 3.2 : 1 (querformat)
- Apple zeigt das Logo **as-is** ohne Maske — wenn du ein quadratisches Logo gibst, sieht es klein und mickrig aus

### Google Wallet

- Dein Logo erscheint **oben links** in einem **Kreis**
- Format: **quadratisch** (mindestens 660 × 660 px)
- Google maskiert es automatisch zum Kreis, mit 15 % Safe Area um den Rand
- Wenn du ein Querformat-Banner-Logo gibst, wird es entweder gequetscht oder oben/unten abgeschnitten

**Das Dilemma**: ein einziges Logo kann nicht gleichzeitig Apple-Banner UND Google-Kreis sein.

**Die Lösung in Stempelkarte.app**: Du lädst dein Original hoch (möglichst quadratisch oder leicht rechteckig, mindestens 660 × 660 px). Der Server normalisiert es auf 1024 × 1024 und generiert beim Save **automatisch drei Plattform-Varianten**:

- `logo-apple.png` — 480 × 150 PNG, fits-inside auf transparentem Canvas (für PassKit)
- `logo-google.png` — 660 × 660 PNG quadratisch mit 15 % Safe Area (für Google Wallet API)
- `logo-thumb.webp` — 64 × 64 WebP für UI-Display im Dashboard

Du musst dich also **nicht** zwischen den Welten entscheiden. Lade ein gutes Quadrat hoch, der Rest passiert automatisch.

## Schritt-für-Schritt: Karte an deine Marke anpassen

### 1. Programm öffnen + Branding-Tab

Im Dashboard: **Programme** → wähle das Programm → Tab **Branding** (oder im Editor links auf den "Branding"-Reiter).

### 2. Logo hochladen

Drag-and-drop in den Logo-Slot, oder Klick + File-Picker. Während des Uploads passieren drei Dinge parallel:

1. **Client-side resize** auf max 1024 × 1024 (spart Storage-Bytes + Upload-Bandbreite)
2. **EXIF-Daten werden gestrippt** (kein versehentliches Geo-Tag-Leak)
3. **Server generiert die 3 Plattform-Varianten** und speichert sie als separate Storage-Files

Im Live-Wallet-Simulator rechts siehst du **sofort** wie das Logo in Apple Wallet aussieht (Banner top-left) und wie in Google Wallet (Kreis top-left). Falls dein Logo zu breit ist und im Google-Kreis abgeschnitten wirkt: Logo nochmal als **quadratisches** Layout exportieren und neu hochladen.

**Logo-Tipps**:

- **Transparenter Hintergrund** ist immer besser. Brand-Color hinter dem Logo soll durchscheinen.
- **Mindest-Margin von 10 %** zum Logo-Rand. Sowohl Apple als auch Google haben weichere oder härtere Maskenränder; ohne Margin werden die Außenkanten angeschnitten.
- **SVG geht auch** und wird bei uns server-seitig zu PNG rasterisiert (mit 3× Density).
- **Dunkle Logos auf hellen Brand-Farben** und umgekehrt — sicher­stellen dass der Kontrast passt. Schwarzes Logo auf dunkel-rotem Brand-Background ist nicht lesbar.

### 3. Brand-Farbe + Akzent-Farbe wählen

Zwei Color-Picker:

- **Brand-Farbe** (`brandColor`): Hintergrund deiner Wallet-Karte. In Apple Wallet ist das die ganze obere Hälfte. In Google Wallet ist das die ganze Karte. Default: `#55182c` (Stempelkarte-Wein).
- **Akzent-Farbe** (`accentColor`): die Farbe der **gefüllten Stempel-Kreise**, des Goal-Marker-Sterns, und (auf manchen Wallet-Versionen) der Belohnungs-Ribbon-Animation. Default: `#f8b627` (Stempelkarte-Gold).

**Best Practice**: Brand-Farbe = deine Hauptmarke (Logo-Background), Akzent-Farbe = ein **kontrastierender** Komplementär. Wenn deine Marke z.B. dunkel-blau ist, nimm Gold oder warmes Orange als Akzent — nicht "gleicher Blau-Ton, etwas heller".

### 4. Stempel-Icon konfigurieren (optional)

Default ist ein einfacher Stern. Du hast drei Alternativen:

1. **Eigenes Stempel-Icon hochladen** (Upload, Pfad analog zum Logo). PNG/JPG/SVG, max 10 MB. Wird auf 256×256 normalisiert.
2. **Emoji als Stempel** — ein einzelnes Emoji eingeben (z.B. ☕ für Café, 🥐 für Bäckerei, ✂️ für Friseur). Renderer nutzt Pango + Noto Color Emoji.
3. **Default-Stern** lassen, wenn du kein Konzept hast.

**Tipp**: Custom-Icons mit hohem Kontrast funktionieren besser. Ein zarter Strich­zeichnung-Stempel verschwindet auf dem kleinen Karten-Display; ein massives Solid-Shape liest sich gut.

### 5. Stempel-Display-Modus wählen

Zwei Optionen:

- **`circle-number`** (Default): Stempel-Kreis mit Icon im Inneren, leerer Kreis als nicht-eingelöst. Klassisch.
- **`image-only`**: Volles Icon als gefüllter Stempel, Graustufen-Variante als leer. Modern, brand-affin, nur sinnvoll wenn dein Icon visuell stark ist.

Live-Simulator zeigt beide Modi sofort.

### 6. Hintergrund-Bild (optional)

Du kannst ein Hintergrund­bild für den **Strip-Bereich** (wo die Stempel sitzen) hochladen — z.B. ein subtiles Pattern oder ein verschwommenes Foto deines Cafés. Format: JPG / PNG / WebP, lange Kante max 1280 px.

**Overlay-Modus** + **Overlay-Stärke** (0-80 %) regelt, wie stark dein Brand-Color über dem Bild liegt:

- `none`: Bild komplett sichtbar (gut für sehr subtile Patterns)
- `darken`: Bild abgedunkelt durch Brand-Color (gut für helle Fotos)
- `lighten`: Bild aufgehellt (gut für dunkle Fotos)
- `brand-tint` (Default): Bild bekommt eine Brand-Color-Tönung

### 7. Reward-State anpassen (Business-Tier+)

Was passiert visuell, wenn die Karte voll ist und der Gast seine Belohnung holen kann?

- **Eigenes Reward-Hintergrund­bild** (z.B. ein Konfetti-Foto oder ein Foto deines Belohnungs-Produkts wie "gratis Cappuccino")
- **Reward-Background-Color** (statt Bild eine Solid-Color, schlägt das Default-Brand-Gradient)
- **Custom Eyebrow-Text** — statt Default "BELOHNUNG VERFÜGBAR" → eigener Slogan wie "DEIN KAFFEE WARTET"
- **Custom Reward-Headline** — statt programm­spezifischer Belohnung → eigener Marketing-Text
- **Sunburst + Konfetti-Animation** an/aus
- **Eyebrow-Color, Headline-Größe, Position** — pro Achse separat einstellbar

Das macht den Unterschied zwischen "die Karte ist voll" und "die Karte feiert mit dem Gast".

### 8. Watermark abschalten (Business-Tier+)

Im Default zeigt deine Karte einen kleinen "stempelkarte.app"-Watermark unten rechts. Mit dem **Watermark-Toggle** (`hideWatermark`) blendest du ihn aus — White-Label-Karte ohne unsere Marke. Verfügbar ab Business-Tarif.

## Vorschau und Live-Test

**Im Editor**:
- Live-Simulator zeigt Apple und Google Frame nebeneinander (oder via Toggle)
- Stempel-Scrubber von 0 bis Max → siehst, wie die Karte sich beim Stempeln entwickelt
- Reward-State-Toggle → siehst, wie die Karte bei voll aussieht

**Auf einem echten Smartphone**:
1. Programm speichern
2. Eine Test-Karte erstellen (im Karten-Tab → "Neue Karte")
3. QR-Code scannen mit deinem iPhone (oder Android)
4. "Zu Wallet hinzufügen" tippen
5. Karte in der Wallet-App öffnen → das ist exakt was deine Gäste sehen

Falls etwas anders aussieht als im Simulator: Bug an support@stempelkarte.app — wir prüfen sofort, weil unser Versprechen ist "Pixel-identisch zwischen Vorschau und Pass".

## Häufige Branding-Fehler

- **Logo zu klein hochgeladen** (200 × 200 px). Server muss hochskalieren → unscharfes Logo. Mindestens 660 × 660 px.
- **Quadrat-Logo gewählt, aber Apple-Banner sieht winzig aus**. Kein Bug — Apple-Banner ist 3.2:1, ein Quadrat füllt es vertikal aus, lässt aber 75 % horizontale Fläche leer. Wenn du Apple priorisierst, mach ein wider Logo.
- **Brand-Color gleich Akzent-Color**. Stempel sind dann nicht sichtbar. Akzent muss kontrastieren.
- **Hintergrund-Bild zu busy**. Stempel werden überlagert, Karte wirkt überladen. Pattern oder Bild + 50 % Overlay.

## Wann du KEIN Custom Branding brauchst

Wenn du:
- Den Service grade ausprobierst (Default ist ohnehin schick)
- Zeit­druck bei Launch hast und Branding nachholen willst
- Keine etablierte Brand-Identity hast (dann tut Default-Branding niemandem weh)

Branding ist iterativ verbesser­bar — in 5 Minuten kannst du Logo + 2 Farben einbinden, und es sieht sofort 80 % so gut aus wie ein voll-konfiguriertes Programm.

<Callout tone="success" title="Nächste Schritte">
- [Komplettübersicht aller Dashboard-Funktionen →](/funktionen/dashboard)
- [Push-Broadcasts in 5 Minuten verschicken →](/blog/wallet-push-broadcasts-anleitung)
- [Reporting verstehen — welche Metriken zählen →](/blog/loyalty-reporting-metriken)
- [Live-Beispiele aus 6 Branchen →](/beispiele)
- [Kostenlos starten →](/signup)
</Callout>