# Diseño de firma de correo: banners de 600×200 que pesan poco [Canonical HTML page](https://gradiently.design/es/guide/email-signature-design) Tu firma sale en cada correo que envías, lo que la convierte en el diseño más visto que tienes. Así se hace una que se vea cuidada, cargue rápido y nunca acabe como un clip adjunto. ## The short version - Un buen diseño de firma de correo deja tu nombre, cargo y datos de contacto como texto real y añade, como mucho, un pequeño banner de imagen. - Un banner de firma funciona bien a 600×200 píxeles, una franja 3:1 que cabe en los diseños de correo más estrechos. - Exportar el banner al doble de tamaño, 1200×400, y mostrarlo a 600 píxeles de ancho lo mantiene nítido en pantallas de alta densidad. - Muchos clientes de correo bloquean las imágenes hasta que el lector las permite, así que nada esencial debe existir solo dentro del banner. - Una imagen alojada con una dirección https completa mantiene ligero cada correo, mientras que una imagen pegada suele enviarse como adjunto en cada mensaje. Un buen **diseño de firma de correo** es sobre todo contención: tu nombre, cargo y una o dos formas de contactarte como texto real, y luego un pequeño banner de 600×200 píxeles que lleve tu marca. Mantén el banner ligero, enlázalo a una sola página y nunca pongas tu teléfono o correo solo dentro de la imagen, porque muchas bandejas ocultan las imágenes hasta que el lector dice lo contrario. ## Qué debe llevar una firma de correo Una firma tiene dos trabajos: decir a la gente quién eres y cómo contactarte, y recordarle a qué te dedicas. El primero es texto. El segundo puede ser un banner. Todo lo demás es ruido que la gente aprende a saltarse. | Elemento | Formato | Notas | | --- | --- | --- | | Nombre | Texto, en negrita | Lo único que debe ir más grande | | Cargo y empresa | Texto | Una línea, separados por una coma | | Teléfono o enlace de reservas | Enlace de texto | Una forma principal de actuar, no cuatro | | Sitio web | Enlace de texto | Corto y legible, sin `https://` | | Banner | Imagen, 600×200 | Opcional; enlaza a una sola página | | Iconos sociales | Imágenes pequeñas | Dos o tres como mucho, o ninguno | Primero el texto, después la imagen. Si fallaran todas las imágenes, la firma debería seguir funcionando. ## Tamaño y peso del banner de la firma de correo Diseña el banner a 600×200 píxeles, una franja 3:1. Seiscientos píxeles es el ancho en torno al que se construyen las plantillas de correo clásicas, así que un banner de ese tamaño cabe en la app de correo del móvil y en el panel de lectura de escritorio sin escalarse. Para pantallas de alta densidad, exporta el mismo diseño al doble de tamaño, 1200×400, e indica al correo que lo muestre a 600 píxeles de ancho. - Banner de firma 600×200: 600 × 200 - Cabecera de correo 1200×600: 1200 × 600 - Tarjeta de visita 1050×600: 1050 × 600 Un banner de firma junto a la cabecera de una newsletter y una tarjeta de visita, a escala. El banner es una franja fina, no un póster. El peso importa más de lo que parece, porque la imagen viaja con cada respuesta de un hilo largo. Procura que el archivo quede muy por debajo de 100 KB. Un banner con degradado se exporta de maravilla como JPEG de alta calidad; usa PNG solo cuando necesites transparencia o rotulación muy fina. Si también haces una newsletter, la guía de [diseño de cabeceras de correo](https://gradiently.design/es/guide/email-header-design) trata el formato mayor. ## Diseñar el banner Un banner que se ve cien veces por semana debe decir una sola cosa y decirla con calma. Funciona mejor como una promoción discreta: tu próximo evento, un servicio nuevo, un enlace de reservas o simplemente el aspecto de tu marca con una línea corta. Cambia las palabras con la temporada; conserva el fondo. Un banner fino de firma de correo para un estudio de fotografía que dice Ya reservamos bodas de primavera sobre un degradado suave El banner de un fotógrafo: una línea oportuna y el nombre del estudio. Un banner de firma de correo que anuncia un webinar gratuito el 12 de noviembre Una consultora que promociona un evento. Cuando termine, cambia la línea. ### Evita - Contacto solo dentro de la imagen - Un banner de varios cientos de kilobytes - GIF animados que se repiten sin fin - Citas, avisos y cinco iconos sociales - Letra gris que desaparece en modo oscuro ### Haz - Nombre y enlaces como texto real - Banner de 600×200, de menos de 100 KB - Imagen fija, o un bucle suave - Una sola llamada a la acción - Un banner con su propio fondo El modo oscuro es una trampa real. Algunas apps de correo invierten o tiñen los colores claros, así que un logotipo sobre fondo transparente puede desaparecer en una bandeja oscura. Un banner con su propio fondo completo, como un degradado rico, se ve igual en ambos modos. El [diseño para modo oscuro](https://gradiently.design/es/guide/dark-mode-design) y los [degradados en el correo](https://gradiently.design/es/guide/gradients-in-email) profundizan en cómo tratan el color los clientes. ## HTML para una firma de correo que aguante Los clientes de correo son anticuados con la maquetación, así que las firmas se construyen con tablas sencillas y estilos en línea. Esta funciona en los clientes habituales: pégala en un archivo HTML, ábrelo en un navegador, selecciónalo todo y cópialo en los ajustes de firma de tu app de correo. ```html
Maya Okafor
Founder, Studio Alder
Book a call · example.com
Studio Alder: now booking spring weddings
``` Datos como texto real, un banner alojado que se muestra a 600×200 a partir de un archivo de 1200×400, con texto alternativo que sigue teniendo sentido si se bloquean las imágenes. > **Aloja la imagen, no la pegues** Cuando pegas o subes una imagen directamente en una firma, algunas apps de correo la envían como adjunto en cada mensaje, lo que se ve como un clip y llena las bandejas. Enlazar a una imagen de tu propio sitio web con una dirección https completa lo evita. ## Configurar tu firma, paso a paso 1. **Escribe el bloque de texto** Nombre, cargo y empresa, un enlace para actuar, tu sitio web. Léelo en voz alta; quita lo que no dirías. 2. **Diseña el banner a 600×200** Usa el fondo de tu marca y una línea corta. Mantén las palabras en el medio, con espacio en ambos extremos. 3. **Exporta a 1200×400** Un JPEG de alta calidad para degradados y fotos, PNG para transparencia. Comprueba que el archivo pese menos de 100 KB. 4. **Súbelo a tu sitio web** Colócalo en una carpeta estable como `/email/`, para que la dirección no cambie nunca y los correos antiguos conserven su banner. 5. **Crea y pega el HTML** Adapta el código de arriba, fija el ancho en 600, escribe un texto alternativo de verdad y pégalo en tu app de correo. 6. **Pruébalo bien** Envíalo a una dirección de Gmail y a una de Outlook, ábrelo en un móvil, activa y desactiva el modo oscuro y responde dos veces al hilo. ## Mantener coherentes las firmas de un equipo Las firmas se desvían: una persona añade una cita, otra usa el logotipo del año pasado. Da al equipo una plantilla HTML y un banner, y cambia el banner de forma centralizada cuando cambie el mensaje. La misma disciplina descrita en la [coherencia de marca](https://gradiently.design/es/guide/brand-consistency) se aplica aquí, a menor escala. Gradiently tiene un tamaño Firma de correo de 600×200 listo en el Studio, y un tamaño personalizado de 1200×400 cubre la exportación de alta densidad. Las exportaciones gratuitas llevan una pequeña marca de agua, así que un banner limpio requiere Pro, que además incluye el kit de marca: logotipo, colores y tipografías en un solo lugar. El Mark que hay tras el banner es el mismo de tus publicaciones sociales y de tus [tarjetas de visita](https://gradiently.design/es/guide/business-card-design), así que una respuesta en la bandeja de alguien se ve inconfundiblemente como el resto de tu marca. ## FAQ ### ¿Qué tamaño debe tener el banner de una firma de correo? Diséñalo a 600×200 píxeles. Exporta a 1200×400 y fija el ancho de la imagen en 600 para que se vea nítido en pantallas de alta densidad. ### ¿Cuánto debe pesar el archivo de imagen de una firma de correo? Mantenlo muy por debajo de 100 KB. La imagen se envía o se carga con cada correo y cada respuesta, así que un archivo pesado se acumula rápido. ### ¿Por qué la imagen de mi firma de correo aparece como adjunto? Algunas apps de correo adjuntan a cada mensaje las imágenes pegadas o subidas. Aloja la imagen en tu sitio web y enlázala con una dirección https completa. ### ¿Debo poner mi número de teléfono en la imagen de la firma? No. Muchos clientes de correo bloquean las imágenes por defecto, y el texto dentro de una imagen no se puede pulsar ni copiar. Deja los datos de contacto como texto real. ### ¿Puedo usar un GIF animado en la firma de mi correo? Puedes, pero mantenlo pequeño y sutil. Una animación en bucle en cada correo de un hilo largo acaba distrayendo, y algunos clientes solo muestran el primer fotograma.