# Personaliza tus tarjetas Wallet: logo, colores, icono de sello — tu marca en Apple y Google Wallet

> Cómo adaptar por completo tu tarjeta de fidelidad digital a tu marca en 10 minutos: subida de logo, colores de marca y de acento, tu propio icono de sello, imagen de fondo y tu propio texto de eyebrow en el estado de recompensa. Incluye una explicación de las specs del banner de Apple Wallet (480×150) y del círculo de Google Wallet (660×660).

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

---
export const metadata = {
  title:
    'Personaliza tus tarjetas Wallet: logo, colores, icono de sello — tu marca en Apple y Google Wallet',
  description:
    'Cómo adaptar por completo tu tarjeta de fidelidad digital a tu marca en 10 minutos: subida de logo, colores de marca y de acento, tu propio icono de sello, imagen de fondo y tu propio texto de eyebrow en el estado de recompensa. Incluye una explicación de las specs del banner de Apple Wallet (480×150) y del círculo de Google Wallet (660×660).',
  publishedAt: '2026-04-28',
  updatedAt: '2026-08-02',
  category: 'Guía',
  tags: [
    'Custom Branding',
    'Apple Wallet',
    'Google Wallet',
    'Logo',
    'Colores de marca',
    'Tarjeta de fidelidad',
    'Diseño',
  ],
  readingMinutes: 8,
};

Una **tarjeta de fidelidad digital** con el look por defecto de reloop funciona técnicamente, pero es un desperdicio de potencial de marketing. Cada vez que un cliente abre la tarjeta en Apple Wallet o Google Wallet podría estar viendo tu marca: tu logo, tus colores de marca, tu imagen de fondo. Esta guía te muestra cómo adaptar por completo una tarjeta Wallet a tu negocio en **10 minutos**, y qué specs de Apple/Google necesitas conocer para que tu logo no lo recorten las máscaras internas de Wallet.

<Callout tone="info" title="Lo que necesitas">
- Una cuenta de reloop (la personalización de marca está incluida en todos los planes: colores de marca, logo, icono de sello, imagen de fondo, además del eyebrow personalizado y la imagen hero en el estado de recompensa).
- Tu logo como PNG, JPG o SVG (máx. 10 MB)
- Opcional: colores de marca como códigos hex (si no, usa el selector de color)
- Opcional: una imagen de fondo para la tarjeta (se recomienda 1280 px en el lado largo)
</Callout>

## Qué hacen de forma distinta Apple Wallet y Google Wallet

Antes de subir nada es importante entender esto: Apple y Google renderizan tu logo de forma **completamente distinta**.

### Apple Wallet

- Tu logo aparece **arriba a la izquierda**, sobre el fondo con el color de marca
- Formato: **banner rectangular** (máx. 160 × 50 pt, es decir 480 × 150 px @ 3× Retina)
- Relación de aspecto: aproximadamente 3.2 : 1 (horizontal)
- Apple muestra el logo **tal cual**, sin máscara: si le das un logo cuadrado, se verá pequeño y pobre

### Google Wallet

- Tu logo aparece **arriba a la izquierda** dentro de un **círculo**
- Formato: **cuadrado** (mínimo 660 × 660 px)
- Google lo enmascara automáticamente en un círculo, con un 15 % de área segura alrededor del borde
- Si le das un logo de banner horizontal, o bien lo aplasta o lo recorta por arriba y por abajo

**El dilema**: un único logo no puede ser a la vez banner de Apple Y círculo de Google.

**La solución de reloop**: subes tu original (idealmente cuadrado o ligeramente rectangular, mínimo 660 × 660 px). El servidor lo normaliza a 1024 × 1024 y **genera automáticamente tres variantes de plataforma** al guardar:

- `logo-apple.png` — PNG de 480 × 150, ajustado dentro de un lienzo transparente (para PassKit)
- `logo-google.png` — PNG cuadrado de 660 × 660 con un 15 % de área segura (para la API de Google Wallet)
- `logo-thumb.webp` — WebP de 64 × 64 para mostrar en la interfaz del panel

Así que **no** tienes que elegir entre los dos mundos. Sube un buen cuadrado y el resto ocurre automáticamente.

## Paso a paso: adapta la tarjeta a tu marca

### 1. Abre el programa + pestaña Branding

En el panel: **Programas** → elige el programa → pestaña **Branding** (o haz clic en la pestaña "Branding" a la izquierda dentro del editor).

### 2. Sube tu logo

Arrastra y suelta en el hueco del logo, o haz clic para abrir el selector de archivos. Durante la subida pasan tres cosas en paralelo:

1. **Redimensionado en el cliente** a máx. 1024 × 1024 (ahorra bytes de almacenamiento + ancho de banda de subida)
2. **Se eliminan los datos EXIF** (sin filtraciones accidentales de geo-etiquetas)
3. **El servidor genera las 3 variantes de plataforma** y las guarda como archivos de almacenamiento separados

En el simulador de wallet en vivo, a la derecha, verás **al instante** cómo queda el logo en Apple Wallet (banner arriba a la izquierda) y en Google Wallet (círculo arriba a la izquierda). Si tu logo es demasiado ancho y se ve recortado en el círculo de Google: vuelve a exportar el logo en un formato **cuadrado** y súbelo de nuevo.

**Consejos de logo**:

- **Un fondo transparente** siempre es mejor. El color de marca detrás del logo debe transparentarse.
- **Un margen mínimo del 10 %** hasta el borde del logo. Tanto Apple como Google tienen bordes de máscara más suaves o más duros; sin margen, se recortan los bordes exteriores.
- **El SVG también funciona** y se rasteriza a PNG en el servidor (con densidad 3×).
- **Logos oscuros sobre colores de marca claros** y viceversa: asegúrate de que el contraste aguante. Un logo negro sobre un fondo de marca rojo oscuro no es legible.

### 3. Elige un color de marca + color de acento

Dos selectores de color:

- **Color de marca** (`brandColor`): el fondo de tu tarjeta Wallet. En Apple Wallet es toda la mitad superior. En Google Wallet es toda la tarjeta. Por defecto: `#55182c` (vino de Stempelkarte).
- **Color de acento** (`accentColor`): el color de los **círculos de sello rellenos**, de la estrella marcadora del objetivo y (en algunas versiones de Wallet) de la animación del ribbon de recompensa. Por defecto: `#f8b627` (oro de Stempelkarte).

**Buena práctica**: color de marca = tu marca principal (fondo del logo), color de acento = un complementario que **contraste**. Si tu marca es, por ejemplo, azul oscuro, usa oro o un naranja cálido como acento, no "el mismo azul, un poco más claro".

### 4. Configura el icono de sello (opcional)

Por defecto es una simple estrella. Tienes tres alternativas:

1. **Sube tu propio icono de sello** (misma ruta de subida que el logo). PNG/JPG/SVG, máx. 10 MB. Se normaliza a 256×256.
2. **Emoji como sello** — introduce un único emoji (p. ej. ☕ para una cafetería, 🥐 para una panadería, ✂️ para una peluquería). El renderizador usa Pango + Noto Color Emoji.
3. **Deja la estrella por defecto** si aún no tienes un concepto.

**Consejo**: los iconos personalizados con alto contraste funcionan mejor. Un sello de trazo fino desaparece en la pequeña pantalla de la tarjeta; una forma sólida y contundente se lee bien.

### 5. Elige el modo de visualización del sello

Dos opciones:

- **`circle-number`** (por defecto): círculo de sello con el icono dentro, círculo vacío para lo aún no canjeado. Clásico.
- **`image-only`**: el icono completo como sello relleno, una variante en escala de grises cuando está vacío. Moderno, acorde a la marca, y solo merece la pena si tu icono es visualmente potente.

El simulador en vivo muestra ambos modos al instante.

### 6. Imagen de fondo (opcional)

Puedes subir una imagen de fondo para el **área del strip** (donde van los sellos), por ejemplo un patrón sutil o una foto desenfocada de tu cafetería. Formato: JPG / PNG / WebP, lado largo máx. 1280 px.

El **modo de superposición** + la **intensidad de superposición** (0-80 %) controla cuánto pesa tu color de marca sobre la imagen:

- `none`: imagen completamente visible (bien para patrones muy sutiles)
- `darken`: imagen oscurecida por el color de marca (bien para fotos claras)
- `lighten`: imagen aclarada (bien para fotos oscuras)
- `brand-tint` (por defecto): la imagen recibe un tinte con el color de marca

### 7. Personaliza el estado de recompensa

¿Qué pasa visualmente cuando la tarjeta está llena y el cliente puede reclamar su recompensa?

- **Una imagen de fondo de recompensa propia** (p. ej. una foto de confeti o una foto de tu producto de recompensa, como un "capuchino gratis")
- **Un color de fondo de recompensa** (un color sólido en lugar de una imagen, que anula el degradado de marca por defecto)
- **Texto de eyebrow personalizado** — en lugar del "RECOMPENSA DISPONIBLE" por defecto → tu propio eslogan, como "TU CAFÉ TE ESPERA"
- **Un titular de recompensa personalizado** — en lugar de la recompensa específica del programa → tu propio texto de marketing
- **Animación de sunburst + confeti** activada/desactivada
- **Color del eyebrow, tamaño del titular, posición** — ajustables por separado en cada eje

Esta es la diferencia entre "la tarjeta está llena" y "la tarjeta lo celebra con el cliente".

### 8. Desactiva la marca de agua (solo Premium)

Por defecto, tu tarjeta muestra una pequeña marca de agua «reloop» abajo a la derecha. Con el **interruptor de marca de agua** (`hideWatermark`) la ocultas: una tarjeta de marca blanca sin nuestra marca. Disponible solo en el plan Premium.

## Vista previa y prueba en vivo

**En el editor**:
- El simulador en vivo muestra los marcos de Apple y Google uno al lado del otro (o mediante un toggle)
- Un scrubber de sellos de 0 al máximo → ves cómo evoluciona la tarjeta a medida que se sella
- Un toggle del estado de recompensa → ves cómo queda la tarjeta cuando está llena

**En un teléfono real**:
1. Guarda el programa
2. Crea una tarjeta de prueba (en la pestaña Tarjetas → "Nueva tarjeta")
3. Escanea el código QR con tu iPhone (o Android)
4. Toca "Añadir a Wallet"
5. Abre la tarjeta en la app de Wallet → esto es exactamente lo que ven tus clientes

Si algo se ve distinto al simulador: reporta un bug a support@reloop.cards — lo revisamos de inmediato, porque nuestra promesa es "idéntico píxel a píxel entre la vista previa y el pase".

## Errores de branding habituales

- **Subir el logo demasiado pequeño** (200 × 200 px). El servidor tiene que escalarlo hacia arriba → logo borroso. Mínimo 660 × 660 px.
- **Elegir un logo cuadrado, pero el banner de Apple se ve diminuto**. No es un bug: el banner de Apple es 3.2:1, así que un cuadrado lo llena en vertical pero deja el 75 % del espacio horizontal vacío. Si priorizas Apple, haz un logo más ancho.
- **Color de marca igual al color de acento**. Entonces los sellos no se ven. El acento tiene que contrastar.
- **Imagen de fondo demasiado recargada**. Los sellos quedan tapados y la tarjeta se ve sobrecargada. Usa un patrón o una imagen + 50 % de superposición.

## Cuándo NO necesitas personalización de marca

Si:
- Solo estás probando el servicio (el diseño por defecto ya se ve bien)
- Tienes prisa por lanzar y quieres hacer el branding más tarde
- Aún no tienes una identidad de marca establecida (en ese caso el branding por defecto no le hace daño a nadie)

El branding se puede mejorar de forma iterativa: en 5 minutos puedes añadir un logo + 2 colores, y al instante se verá un 80 % tan bien como un programa completamente configurado.

<Callout tone="success" title="Próximos pasos">
- [Vista general completa de todas las funciones del panel →](/funktionen/dashboard)
- [Envía difusiones push en 5 minutos →](/blog/wallet-push-broadcasts-anleitung)
- [Entender el reporting — qué métricas importan →](/blog/loyalty-reporting-metriken)
- [Ejemplos de 6 sectores →](/beispiele)
- [Empieza gratis →](/signup)
</Callout>