# Branding en Twitter y X: cabecera, avatar e imágenes de posts

[Canonical HTML page](https://gradiently.design/es/guide/x-branding)

En X tu marca aparece casi siempre como un círculo diminuto junto a unas pocas líneas de texto. Eso hace que los pocos elementos visuales que controlas importen más, no menos.

## The short version

- El branding en Twitter y X se apoya en cuatro elementos visuales: el avatar, la cabecera de 1500×500, las imágenes de los posts y las tarjetas de enlace que genera tu web.
- El avatar aparece junto a cada post y respuesta, así que debe ser un símbolo sencillo o un retrato cerrado que se lea a un tamaño muy pequeño.
- Las imágenes de posts en X funcionan mejor a 1600×900 en horizontal o a 1080×1350 en vertical.
- Las tarjetas de enlace salen de las metaetiquetas de tu web, así que una imagen Open Graph de 1200×630 con tu estilo de marca hace reconocible cada enlace compartido.
- Usar la misma familia de fondos en la cabecera, las imágenes de posts y las tarjetas de enlace une los posts dispersos en una marca visible.

El **branding en Twitter** y X se reduce a cuatro elementos visuales que controlas: el avatar junto a cada post, la cabecera de 1500×500 de tu perfil, las imágenes que adjuntas a los posts y las tarjetas de enlace que genera tu propia web cuando alguien la comparte. La mayoría de las veces la gente te encuentra como un pequeño círculo y unas líneas de texto en un feed rápido. Así que cada elemento tiene que ser sencillo, y los cuatro tienen que parecer salidos del mismo sitio.

## Tu kit de marca en X de un vistazo

| Elemento | Tamaño | Dónde lo ve la gente |
| --- | --- | --- |
| Avatar | Cuadrado, mostrado como círculo | Junto a cada post, respuesta y mención |
| Cabecera | 1500×500 | Arriba de tu perfil |
| Imagen de post horizontal | 1600×900 | En el timeline, a todo el ancho |
| Imagen de post vertical | 1080×1350 | En el timeline, más alta en móviles |
| Tarjeta de enlace | 1200×630 | Cada vez que alguien comparte tu web |

Cinco piezas. Diséñalas como un conjunto sobre un mismo fondo y la cuenta parecerá intencionada aunque los posts sean informales.

## Un avatar que aguante el timeline

Tu avatar es la imagen que más se repite. Está junto a cada respuesta, en las notificaciones y en las citas de otras personas, a menudo más pequeño que una uña. Un logotipo completo con su nombre desaparece a ese tamaño. Usa un solo símbolo, un monograma o un retrato cerrado de cabeza y hombros, sobre un fondo liso o con una luz suave en tu color de marca. Mantenlo igual en todas las plataformas para que quien te sigue en otros sitios te reconozca al instante.

> **Evita cambiarlo a menudo** La gente hace scroll guiándose por formas y colores, no leyendo nombres. Un avatar nuevo cada pocas semanas reinicia el reconocimiento que has construido.

## Diseñar la cabecera de X

La cabecera mide 1500×500, una franja de 3:1. El avatar se superpone en su parte inferior izquierda, y las distintas pantallas recortan un poco arriba y abajo, así que deja el texto en la franja central y lejos de esa esquina. Una sola línea funciona mejor: lo que haces, lo que estás construyendo o lo único que quieres que recuerde quien te visita. Fija un post que lo amplíe. [Tamaño de la cabecera de X](https://gradiently.design/es/guide/x-header-size) detalla las zonas seguras.

Una cabecera de X de 1500 por 500 con la línea Herramientas para hojas de cálculo sobre un fondo degradado

Una línea, a la derecha del centro, sobre el mismo fondo que la cuenta usa en todas las imágenes de posts.

Trata el post fijado como la segunda mitad de la cabecera. Quien te visita lee la línea de la cabecera, echa un vistazo a la bio y después ve el post fijado justo debajo. Haz de ese post la mejor presentación breve de lo que haces, con una imagen del mismo estilo, y renuévalo cuando tengas algo mejor que enseñar. Algunos que funcionan bien:

- **Una presentación en una imagen:** quién eres, qué haces y qué esperar si te siguen.
- **Tu mejor hilo,** con una imagen de portada numerada para que se lea como una serie.
- **Un lanzamiento u oferta actual,** sustituido en cuanto termine para que nunca quede desfasado.

## Imágenes de posts que parezcan tuyas

La mayoría de posts en X son texto, y así deben seguir. Añade una imagen cuando cumpla una función: enmarcar una frase clave, mostrar un resultado, anunciar algo o llevar un gráfico. Cuando lo hagas, usa un pequeño conjunto de maquetaciones sobre una misma familia de fondos para que la gente aprenda a reconocerlas en pleno scroll.

Una imagen horizontal para X que anuncia importaciones tres veces más rápidas en la versión 2.4 sobre un fondo degradado

Una tarjeta de novedades horizontal a 1600×900. Un número, una línea de contexto.

Una imagen vertical para X con la cita Lanza primero la versión aburrida sobre el mismo fondo degradado

Una tarjeta de cita vertical a 1080×1350, que ocupa más pantalla del móvil.

Usa letra grande: la gente lee X en el móvil y el timeline muestra las imágenes más pequeñas de como las diseñaste. Dos o tres palabras por línea, una idea por imagen. [Diseño de imágenes para posts de X](https://gradiently.design/es/guide/x-post-image-design) y [gráficos para hilos de X](https://gradiently.design/es/guide/x-thread-graphics) tienen más maquetaciones, incluidas imágenes numeradas para hilos largos.

## Las tarjetas de enlace son parte de tu marca

Cada vez que alguien comparte tu web en X, la tarjeta que aparece sale de las metaetiquetas de tu página. Sin ellas, X muestra un enlace simple o un recorte al azar. Con una imagen de 1200×630 con tu estilo de marca, cada vez que se comparte, incluidas las que nunca verás, lleva tu estilo al timeline. X lee primero sus propias etiquetas `twitter:` y, si no están, recurre a Open Graph.

```html
<meta name="twitter:card" content="summary_large_image">
<meta property="og:title" content="Small tools for big spreadsheets">
<meta property="og:description" content="Import, clean and merge files in seconds.">
<meta property="og:image" content="https://example.com/og/home.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
```

Lo mínimo para una tarjeta con imagen grande. Usa una dirección https absoluta para la imagen, y una imagen distinta para cada página importante.

Diseña la imagen de enlace como un cartel diminuto: título de la página, una línea corta, tu fondo de marca y márgenes generosos, porque X redondea las esquinas. [Tamaño de la imagen Open Graph](https://gradiently.design/es/guide/open-graph-image-size) explica las pruebas y la caché.

## Errores de branding en Twitter que debes evitar

### Evita

- Un logotipo detallado como avatar
- Una cabecera llena de eslogan, usuario y web
- Texto en la esquina inferior izquierda de la cabecera
- Capturas de pantalla con letra diminuta como imágenes de posts
- Dejar las tarjetas de enlace al azar

### Haz

- Un símbolo o retrato sencillo, mantenido durante años
- Una línea clara sobre un fondo de marca
- Texto centrado o a la derecha del centro
- Letra grande, dos o tres palabras por línea
- Una tarjeta de 1200×630 diseñada para cada página clave

La forma más sencilla de mantener las cinco piezas en sintonía es hacerlas a partir de un solo diseño. En Gradiently puedes diseñar una vez sobre un Mark y, con Pro, redimensionar a todos los formatos en un paso, así la cabecera, las tarjetas de posts y la imagen de enlace comparten la misma luz y el mismo color. El Mark hace sitio a tus palabras a cualquier tamaño, algo importante en una franja de 3:1 donde hay muy poco espacio. Para la visión multiplataforma, lee [una marca coherente en todas las redes sociales](https://gradiently.design/es/guide/brand-consistency-across-platforms).

## FAQ

### ¿Qué tamaño tiene la cabecera de X (Twitter)?

1500×500 píxeles, una proporción de 3:1. Deja el texto en la franja central y lejos de la parte inferior izquierda, donde va el avatar.

### ¿Qué tamaño deben tener las imágenes de los posts en X?

1600×900 en horizontal o 1080×1350 en vertical. Las imágenes verticales ocupan más espacio en el móvil.

### ¿Mi avatar de X debe ser un logotipo o una foto?

Usa lo que se lea con claridad como un círculo diminuto: un símbolo sencillo, un monograma o un retrato cerrado. Evita logotipos detallados y texto pequeño.

### ¿Cómo controlo la imagen cuando se comparte mi web en X?

Añade al head de cada página una etiqueta `twitter:card` con el valor `summary_large_image` y una imagen Open Graph de 1200×630 píxeles.

### ¿Cómo hago que mi perfil de X parezca más profesional?

Usa el mismo avatar sencillo en todas partes, una cabecera con una línea clara e imágenes de posts que compartan una familia de fondos y una tipografía.
