Banner: qué es, tipos, medidas y cómo hacer un banner que funcione
La imagen que anuncia, invita y lleva al clic, en tu web o en tu email
Un banner es una pieza gráfica rectangular que anuncia algo en una web, una app, una red social o un email. Su objetivo es llevar al usuario a otra página con un clic. Suele combinar una imagen, un mensaje corto y un botón.
La palabra viene del inglés y significa «pancarta» o «estandarte». En español también se usan «banda publicitaria» o «anuncio gráfico», aunque lo habitual es usar el término en inglés.
Un banner tiene tres usos principales:
- Dar a conocer una marca o un producto nuevo.
- Llevar tráfico a una página concreta, como una oferta o una landing page.
- Promocionar algo dentro de tu propia web o email, como unas rebajas, un evento o una descarga.
El primer banner de internet se publicó en 1994 en la web de la revista HotWired. Era un anuncio de AT&T que preguntaba al usuario si alguna vez había hecho clic ahí. Desde entonces es uno de los formatos básicos de la publicidad digital.
Banner estático. Una sola imagen, sin movimiento. Es el más sencillo y el que mejor se ve en cualquier dispositivo.
Banner animado. Usa un GIF o una animación corta para llamar la atención. Debe durar pocos segundos y no distraer del mensaje.
Banner rich media. Incluye vídeo, sonido o elementos con los que el usuario puede interactuar. Es el formato rich media.
Banner responsive. Se adapta al tamaño de la pantalla. Es habitual en la publicidad programática.
Banner interno. Lo pone una web o una tienda en sus propias páginas para destacar algo suyo: una categoría, una promoción o un formulario.
Banner de email. La imagen de cabecera de una newsletter o el bloque gráfico que anuncia una oferta dentro del correo.
Estas son las medidas estándar de las redes de publicidad, como Google Ads. Las recomienda el IAB, la asociación del sector de la publicidad digital:
| Nombre | Medida (píxeles) | Dónde se usa |
|---|---|---|
| Rectángulo mediano | 300 × 250 | Barra lateral y dentro del contenido |
| Rectángulo grande | 336 × 280 | Dentro del contenido |
| Leaderboard (cabecera) | 728 × 90 | Parte superior de la página |
| Billboard | 970 × 250 | Parte superior, gran formato |
| Rascacielos ancho | 160 × 600 | Barra lateral |
| Media página | 300 × 600 | Barra lateral |
| Banner para móvil | 320 × 50 | Parte superior o inferior en móvil |
En email, la imagen suele ocupar todo el ancho del mensaje, que normalmente es de 600 a 640 píxeles. Las redes sociales tienen sus propios tamaños: en Instagram y Facebook se usan mucho 1.080 × 1.080 (cuadrado) y 1.080 × 1.920 (vertical).
Diseña newsletters con banners que se vean bien
Plantillas con cabecera, editor de arrastrar y soltar e IA para crear imágenes, en la cuenta gratuita.
Un solo mensaje. El usuario lo mira apenas unos segundos. Elige una idea y dila en pocas palabras.
Un titular grande y legible. Que se lea sin esfuerzo, también en el móvil.
Una llamada a la acción clara. Un botón con un verbo: «Descargar la guía», «Ver ofertas», «Reservar plaza». Si quieres saber más, mira cómo escribir una buena call to action.
Tu marca, pero sin ocupar todo. El logotipo ayuda a que te reconozcan, pero el protagonista es el mensaje.
Coherencia con la página de destino. Los mismos colores, la misma oferta y el mismo tono. Si la imagen promete un 20 % de descuento, la página debe mostrarlo nada más entrar.
Peso ligero. Una imagen pesada tarda en cargar y puede no mostrarse. Comprime el archivo antes de subirlo.
En una newsletter, el banner suele aparecer en dos sitios:
- La cabecera, con tu logotipo y una imagen que da contexto al mensaje.
- Los bloques de promoción, donde anuncias un producto, una oferta o un evento con su botón.
Hay tres cosas que debes cuidar en el correo. Primero, muchos gestores no muestran las imágenes hasta que el usuario lo permite, así que el texto importante no debe ir solo dentro de la imagen. Segundo, añade siempre un texto alternativo (alt) que explique qué hay en el banner. Y tercero, equilibra imágenes y texto: un email que es solo una imagen grande tiene más papeletas de acabar en spam.
Si buscas ideas de diseño, en nuestro blog tienes ejemplos de banners creativos para captar suscriptores. Y si te interesa el uso publicitario, puedes leer más sobre la publicidad display.
El más común es meter demasiado texto. No es un folleto: si necesitas tres párrafos para explicarlo, no funcionará.
Otros errores frecuentes son usar letra pequeña o con poco contraste y olvidar el botón. También enlazar a la página de inicio en lugar de a la oferta, o no revisar cómo se ve en el móvil. Y conviene medir los resultados: el CTR te dice qué porcentaje de personas hace clic.
Cómo te ayuda Mailrelay
En el editor de Mailrelay puedes añadir banners a tus newsletters arrastrando un bloque de imagen, ponerles enlace y escribir su texto alternativo. Las plantillas ya traen la cabecera con el ancho adecuado, y la IA del editor te ayuda a crear imágenes y a mejorar los textos.
Después del envío, las estadísticas te muestran cuántos clics recibe cada enlace, también los de las imágenes. Y el mapa de clics te enseña qué zonas del email funcionan mejor (en la cuenta gratuita y en Enterprise).
La cuenta gratuita permite enviar hasta 80.000 emails al mes a 20.000 contactos, con soporte humano en todos los planes.
Mide qué banner consigue más clics
Clics por enlace y mapa de clics en la cuenta gratuita de Mailrelay.
Estas son las dudas más habituales sobre los banners.
Es un anuncio o bloque gráfico, normalmente rectangular, que invita a hacer clic para ir a otra página. Puede anunciar a otra empresa o algo de la propia web.
Las más usadas son 300 × 250, 728 × 90 y 160 × 600 píxeles en web, y 320 × 50 en móvil. En email, el ancho habitual es de 600 a 640 píxeles.
El banner es la pieza gráfica. La publicidad display es el tipo de campaña que muestra esos banners en webs y apps de terceros.
Un mensaje corto, una imagen que lo apoye, tu marca y un botón con una llamada a la acción clara.
Sí. Lo habitual es usar uno en la cabecera y otros para las promociones, siempre con texto alternativo y sin dejar el mensaje principal solo dentro de la imagen.