# Cómo personalizar el panel de Payload CMS con tu marca
> Logo, colores, título de la pestaña, pantalla de bienvenida y textos: cómo dejar el panel de Payload CMS con la marca de tu empresa o de tu cliente, con el ejemplo y las capturas de este sitio.
URL: https://codegea.com/como-personalizar-el-panel-de-payload-cms-con-tu-marca
CMS · 2026-10-19 · Derian Pinto
Cuando le entregas un sitio a un cliente, lo que el cliente ve todos los días no es la web: es el panel donde edita. Si ese panel dice Payload, con los colores y el logo de Payload, la sensación es la de una herramienta ajena que alguien le instaló. Si lleva su marca, o la tuya, es **su** panel. Payload te deja cambiarlo casi todo, y la licencia (MIT) lo permite.
Esto es lo que hicimos con el panel de este sitio. Lo que ves en las capturas es el panel real de codegea.com, en local.
## Qué cambiamos
Cinco cosas, de la más visible a la menos:
1. El **logo** y el **icono** (arriba a la izquierda, en el login y en el panel).
2. Los **colores** y la **tipografía**.
3. El **título de la pestaña**, el favicon y la imagen que sale al compartir el enlace.
4. Una **pantalla de bienvenida** con accesos directos.
5. Los **textos** del menú y de la interfaz.
Así queda la pantalla de inicio de sesión:
Y el panel, con la bienvenida y el menú:
## Paso 1: el título de la pestaña y el favicon
En `payload.config.ts`, dentro de `admin.meta`:
```ts
admin: {
meta: {
titleSuffix: '· Codegea CMS',
description: 'Panel de contenido de codegea.com',
icons: [
{ rel: 'icon', url: '/favicon.ico' },
{ rel: 'icon', type: 'image/png', sizes: '32x32', url: '/favicon-32x32.png' },
{ rel: 'apple-touch-icon', url: '/apple-touch-icon.png' },
],
openGraph: {
title: 'Codegea CMS',
siteName: 'Codegea CMS',
images: [{ url: '/og-codegea-2026.jpg', width: 1200, height: 630 }],
},
twitter: { title: 'Codegea CMS' },
},
},
```
`titleSuffix` es lo que aparece al final de cada pestaña: «Artículos · Codegea CMS». Lo del `openGraph` importa más de lo que parece: si alguien pega la dirección del panel en WhatsApp, sale tu imagen y no la de otro.
## Paso 2: el logo y el icono
Payload te deja reemplazar dos componentes gráficos. Les das la ruta de tu componente, con el formato `ruta#NombreExportado`:
```ts
admin: {
components: {
graphics: {
Logo: '/components/admin/logo#Logo',
Icon: '/components/admin/icon#Icon',
},
},
},
```
El logo es un componente de React normal. El nuestro dibuja el isotipo en SVG y el nombre al lado:
```ts
export const Logo = () => (
Codegea
);
```
El **icono** es la versión pequeña, la que aparece en la barra superior, junto a las migas de pan. Después de añadir cualquier componente nuevo, hay que regenerar el mapa de importaciones del panel:
```bash
pnpm generate:importmap
```
Si te olvidas, tu componente no aparece. Es el fallo más común.
## Paso 3: colores y tipografía
Payload expone su aspecto como variables de CSS. En el layout del panel se importa un archivo `custom.css`, y ahí va el tuyo. Nosotros sobrescribimos tres grupos de variables.
Primero, la tipografía y la paleta de marca:
```css
:root {
--font-body: 'Inter Tight', system-ui, sans-serif;
--cg-cobalt: #1e3faa;
--cg-cobalt-dark: #16317f;
--cg-ink: #0b0f1a;
--cg-paper: #eef1f7;
}
```
Después, los fondos y textos del tema claro y del oscuro, que Payload pinta con las variables `--theme-*`:
```css
html[data-theme='light'] {
--theme-bg: var(--cg-paper);
--theme-elevation-0: #fff;
--theme-elevation-50: #f6f8fc;
--theme-text: var(--cg-ink);
}
html[data-theme='dark'] {
--theme-bg: var(--cg-ink);
--theme-elevation-0: #0b0f1a;
--theme-elevation-800: #eef1f7;
}
```
Por último, el color de los botones principales y de los enlaces:
```css
.btn--style-primary {
--bg-color: var(--cg-cobalt);
--color: #fff;
--hover-bg: var(--cg-cobalt-dark);
}
a:not([class]) {
color: var(--cg-cobalt);
}
```
Es la parte más rápida y la que más cambia el aspecto: con esas pocas variables, el panel entero pasa del gris de fábrica al papel y cobalto de la marca. Define siempre las dos variantes, la clara y la oscura; si solo haces una, quien use el modo oscuro verá medio panel de un color y medio de otro.
## Paso 4: una bienvenida con accesos directos
Payload permite montar componentes propios antes del dashboard. El nuestro es una cabecera con una frase y tres enlaces: ver el sitio, crear un artículo y crear un proyecto.
```ts
admin: {
components: {
beforeDashboard: ['/components/admin/welcome#Welcome'],
},
},
```
```ts
'use client';
export const Welcome = () => {
const { i18n } = useTranslation();
const copy = i18n.language === 'en' ? COPY.en : COPY.es;
return (
{copy.title}
{copy.text}
);
};
```
Lo único especial es `useTranslation`, de `@payloadcms/ui`: te dice en qué idioma está el panel, para mostrar el texto en español o en inglés. Para quien entra de vez en cuando, esos tres enlaces ahorran buscar dónde se crea un artículo.
## Paso 5: los textos
Hay tres niveles de texto:
- **Tus propias colecciones.** Les pones `labels` por idioma y un `group` para agruparlas en el menú. «Publicaciones sociales», «Redes», «Ajustes» salen de ahí.
- **Los textos de Payload.** Se pueden sobrescribir por idioma con `i18n.translations`. Nosotros cambiamos uno: el texto «Ajustes de Payload», que pasó a decir «Ajustes de Codegea CMS». Es el único texto del panel que nombraba al CMS base.
- **Los idiomas del panel.** `i18n.supportedLanguages` define cuáles ofrece. El panel funciona en español y en inglés, y cada editor elige el suyo.
## Lo que todavía se nota
Quedarnos sin una sola mención a Payload era la regla, y casi se cumple. Pero mira el menú lateral:
Fíjate en **Forms**, **Form Submissions**, **Search Results** y **API Keys**. Esos nombres vienen de los plugins (formularios, búsqueda, MCP) y no están traducidos ni renombrados. Se pueden cambiar con las opciones de sobrescritura de cada plugin, y en este sitio es una tarea pendiente. Lo dejamos en el artículo porque pasa en cualquier proyecto: la marca blanca se parece más a una lista de pendientes que a un interruptor.
## Lo que aprendimos
- **Empieza por el CSS.** Con unas pocas variables ya se ve otro producto. El logo y la bienvenida pulen; el color convence.
- **Prueba el modo oscuro y el idioma que no usas.** Los fallos están ahí.
- **Revisa la pestaña del navegador, el correo de restablecer contraseña y la imagen al compartir.** Son los sitios donde el nombre original se cuela.
- **Documenta la regla.** Nosotros la escribimos en el `CLAUDE.md` del repositorio: «no reintroducir referencias a Payload en textos visibles». Sin eso, el siguiente cambio las vuelve a poner.
## Cuándo no vale la pena
Si el panel solo lo usas tú, o el cliente casi no entra, alcanza con el título de la pestaña y los colores. La marca blanca se paga cuando alguien convive con el panel todos los días. Y no hace falta rehacer nada de lo que Payload ya trae bien: la edición de contenido, los permisos o la búsqueda.
Si quieres seguir con el CMS, mira cómo lo extendimos con una función entera en [un estudio para publicar en redes sociales](/personalizar-payload-cms-un-estudio-para-publicar-en-redes-sociales), y por qué lo elegimos en [Payload vs Strapi vs Directus](/payload-cms-vs-strapi-vs-directus-en-2026).