Sube una imagen o pega su dirección, escribe a dónde debe llevar el clic y te devolvemos el código HTML del banner listo para pegar en cualquier web. Sin registro y sin que nada pase por nuestros servidores.
Vista previa
El banner se monta entero en tu navegador. La imagen viaja incrustada dentro del propio código o se enlaza desde donde ya la tengas alojada: a nosotros no nos llega nunca.
Los formatos de siempre a un clic: robapáginas de 300×250, leaderboard de 728×90, rascacielos de 160×600 y más, o la medida exacta que tú quieras.
Un enlace y una imagen con sus atributos bien puestos: alt, medidas, target y rel. Pégalo en WordPress, en tu tienda o en el HTML de cualquier página.
Un banner HTML es una imagen con un enlace: un fragmento de código formado por una etiqueta a que envuelve a una etiqueta img, de manera que al hacer clic sobre la imagen el visitante viaja a la dirección que tú decidas. Es el formato publicitario más veterano de la web y sigue siendo el más universal, porque funciona en cualquier página sin depender de plataformas de anuncios, scripts externos ni cookies: donde se pueda pegar HTML, se puede poner un banner.
Se usa para muchas más cosas que la publicidad clásica. Un banner sirve para promocionar tu propio producto dentro de tu web, para intercambiar enlaces visuales con webs amigas, para vender espacios publicitarios directos sin intermediarios que se queden comisión, para enlazar tu tienda desde tu blog, para las campañas de afiliación en las que el anunciante te pide colocar su creatividad, o para llevar tráfico a una oferta temporal desde todas las páginas de tu sitio. En todos esos casos el mecanismo es idéntico: una imagen atractiva, un destino bien elegido y un código correcto.
La parte de la imagen y el destino son cosa tuya. La parte del código correcto es justo lo que resuelve el generador de esta página: en lugar de escribir las etiquetas a mano —y olvidar el texto alternativo, las medidas o los atributos del enlace, que es lo habitual—, subes la imagen, escribes la dirección y te llevas un código completo, válido y listo para pegar.
Paso a pasorel="sponsored", añadir rel="nofollow" y hacer el banner adaptable al móvil. Cada casilla añade o quita su atributo en el código, y más abajo te contamos qué hace cada uno exactamente.Todo el proceso ocurre dentro de tu navegador. La imagen no se sube a ningún servidor de Letaca, no hay registro, no hay cuenta y no queda copia de nada: cierra la pestaña y no existe más rastro que el código que te hayas copiado.
FormatosPuedes crear un banner de cualquier medida, pero si va a convivir con espacios publicitarios ya definidos conviene ceñirse a los formatos estándar del sector, los mismos que la herramienta ofrece en su desplegable:
| Tamaño | Nombre | Dónde funciona mejor |
|---|---|---|
| 300×250 | Robapáginas (rectángulo medio) | El más universal: dentro del contenido, en barras laterales y en móvil. Si solo vas a preparar un tamaño, que sea este. |
| 336×280 | Robapáginas grande | La variante amplia del anterior, para columnas de contenido anchas. |
| 728×90 | Leaderboard | Cabeceras y pies de página en escritorio. |
| 970×250 | Billboard | Grandes cabeceras de portada en escritorio; el formato de mayor impacto visual. |
| 160×600 | Rascacielos ancho | Barras laterales que acompañan al lector durante el scroll. |
| 300×600 | Media página | Lateral de gran formato, muy visible sin resultar invasivo. |
| 320×100 | Banner móvil grande | Cabeceras y cortes de contenido en pantallas de móvil. |
| 320×50 | Banner móvil | El formato compacto clásico de móvil, fijo o entre párrafos. |
Formatos estándar de la publicidad display. Medidas en píxeles CSS.
Dos consejos prácticos. Primero: prepara la imagen ya en la proporción del formato elegido. La herramienta puede forzar cualquier medida, pero estirar una foto apaisada dentro de un rascacielos vertical nunca acaba bien, y por eso el generador te avisa cuando la proporción no cuadra. Segundo: si el banner va dentro del contenido de una web adaptable, marca la casilla max-width:100% y despreocúpate: el banner se encogerá en pantallas pequeñas sin romper la maqueta ni generar scroll lateral.
Es la única decisión técnica de verdad al crear un banner HTML, y depende de dónde viva la imagen. La herramienta admite los dos caminos precisamente porque cada uno gana en un escenario distinto:
| Incrustada (base64) | Enlazada (URL) | |
|---|---|---|
| Qué es | La imagen viaja codificada dentro del propio código del banner. | El código apunta a una imagen alojada en un servidor. |
| Peso del código | El de la imagen más un tercio, aproximadamente. | Unos cientos de bytes. |
| Depende de un alojamiento | No: funciona aunque no tengas dónde subir la imagen. | Sí: si la imagen se borra o el servidor cae, el banner queda roto. |
| Actualizar la creatividad | Hay que regenerar el código y volver a pegarlo. | Basta con sustituir la imagen en el servidor; el código no cambia. |
| Caché del navegador | El banner se descarga con cada página que lo contiene. | La imagen se cachea y se reutiliza entre páginas. |
| Ideal para | Banners pequeños o medianos, correos internos, cuando no controlas ningún alojamiento o quieres un código 100 % autónomo. | Banners que se repiten en muchas páginas, campañas que cambian de creatividad o imágenes pesadas. |
La regla corta: para un banner puntual y ligero, incrústala; para una campaña repartida por muchas páginas, enlázala. Y si incrustas, aprovecha la casilla de compresión a WebP que ofrece la herramienta con archivos PNG y JPG: convierte la imagen dentro de tu navegador y en la mayoría de fotografías reduce el peso de forma notable sin pérdida visible. Con GIF animados y SVG la casilla se desactiva sola, para no destruir la animación ni el vector.
El código, explicadoEl código que te llevas es corto y se puede leer entero de un vistazo. Merece la pena entender qué aporta cada pieza, porque son las mismas decisiones que tomarías escribiéndolo a mano:
href es la dirección de destino, ya validada y con su protocolo. Solo se admiten enlaces http y https: nada de esquemas raros que puedan dar sustos.target="_blank" abre el destino en una pestaña nueva. Es lo habitual en banners: el visitante explora la oferta sin abandonar la página donde estaba. La herramienta añade automáticamente noopener al usarlo, la práctica de seguridad que impide que la página abierta pueda manipular a la que la abrió.rel="sponsored" declara ante los buscadores que el enlace es publicitario o fruto de un acuerdo comercial. Es el valor que la documentación de Google pide para enlaces pagados, y llevarlo puesto protege tanto a quien coloca el banner como a quien lo encarga.rel="nofollow" pide a los buscadores que no transfieran autoridad a través del enlace. Es anterior a sponsored y más genérico; muchos sitios combinan ambos, y por eso son dos casillas independientes.alt es el texto alternativo de la imagen: lo que leen los lectores de pantalla, lo que se muestra si la imagen no carga y una señal más de contexto para los buscadores. Un banner sin alt es invisible para una parte de tu audiencia.width y height declaran las medidas del banner. Gracias a ellas el navegador reserva el hueco antes de que la imagen llegue, y la página no pega saltos mientras carga —los saltos de maqueta son una de las métricas de experiencia que los buscadores miden—.loading="lazy" retrasa la descarga de la imagen hasta que el banner está a punto de entrar en pantalla. En páginas largas ahorra datos y acelera la carga inicial sin que el visitante note nada.style recoge los remates visuales: el max-width:100% que lo hace adaptable, el borde a cero y, si la eliges, la esquina redondeada que casa con el diseño de tu web.El código generado es HTML plano, así que funciona en cualquier sitio donde se pueda insertar HTML. Los destinos más habituales:
Un truco de organización: si vas a colocar el mismo banner en varios sitios y quieres saber cuántos clics trae cada uno, genera una variante por ubicación con nuestro acortador de enlaces como destino. Cada enlace corto cuenta sus visitas por separado, y tendrás la medición resuelta sin instalar nada.
RendimientoUn banner pesado penaliza dos veces: hace más lenta la página que lo aloja y consume los datos del visitante que quizá ni llegue a verlo. Mantenerlo a raya es sencillo si se atiende a tres frentes. El primero es el formato de la imagen: para fotografías, WebP o JPG; para gráficos planos con pocos colores, WebP o PNG; los GIF animados, solo cuando la animación aporte de verdad, porque son el formato más pesado por segundo de los que existen. El segundo es la resolución: exportar la imagen al doble del tamaño final de visualización cubre las pantallas de alta densidad; más allá de eso es peso tirado. Y el tercero es la compresión: la casilla de WebP de la herramienta hace ese trabajo en tu navegador, y el indicador de peso que aparece bajo el código te dice exactamente cuánto ocupa lo que vas a pegar.
Como referencia de trabajo, un robapáginas de 300×250 bien optimizado puede quedarse en unas pocas decenas de kilobytes. Si el indicador de la herramienta te marca varios cientos, la imagen pide una pasada de compresión o una resolución más ajustada; y si aun así el archivo es grande, la vía de la imagen enlazada evita engordar el código de la página.
SEOLos enlaces publicitarios tienen sus reglas, y saltárselas puede costar visibilidad tanto al que aloja el banner como al anunciado. La documentación para webmasters de los principales buscadores es clara: los enlaces pagados o fruto de un acuerdo comercial deben marcarse con rel="sponsored" —o, como mínimo, con rel="nofollow"— para que no computen como recomendaciones editoriales. Por eso el generador trae la casilla de publicidad marcada por defecto: es la configuración correcta para el uso más común, y desmarcarla es una decisión consciente que queda en tu mano para los banners internos de tu propio sitio, donde no hay transacción que declarar.
El resto de señales que el código incluye también suman al posicionamiento de la página que lo aloja: el texto alternativo da contexto sobre el contenido enlazado, las medidas declaradas evitan saltos de maqueta que degradan las métricas de experiencia de página, y la carga diferida mejora los tiempos. Dicho de otro modo: un banner técnicamente correcto no es solo estética, es también higiene SEO de la página donde vive.
AccesibilidadLa accesibilidad de un banner se decide en tres detalles que cuestan un minuto. El texto alternativo es el principal: escribe qué se ve y qué se ofrece («Curso de edición de vídeo con descuento», no «banner1-final-v2»); quien navega con lector de pantalla debe recibir la misma invitación que quien ve la imagen. El contraste es el segundo: el texto que pongas dentro de la creatividad debe leerse con nitidez sobre su fondo, también en pantallas mediocres y a pleno sol. Y el movimiento es el tercero: si usas un GIF animado, evita los parpadeos rápidos —los destellos que se repiten más de tres veces por segundo pueden provocar crisis en personas fotosensibles— y procura que el mensaje se entienda aunque la animación no llegue a verse, porque hay navegadores y ajustes de sistema que la reducen o la detienen.
Preguntas frecuentesNo. La imagen se procesa dentro de tu navegador y, si eliges incrustarla, viaja únicamente dentro del código que tú te copias. A los servidores de Letaca no llega nunca: no hay subida, no hay registro y no queda copia de nada al cerrar la pestaña.
Es gratis, sin registro y sin límite de usos. Genera todos los banners que necesites; el código que produce es tuyo y puedes usarlo en proyectos personales y comerciales sin atribución de ningún tipo.
Es la imagen convertida en texto. El formato base64 codifica los bytes del archivo en caracteres normales, de modo que la imagen puede viajar dentro del propio HTML sin existir como archivo aparte. A cambio ocupa aproximadamente un tercio más que el archivo original, por eso conviene reservarlo para imágenes ligeras.
Sí. En el editor de bloques de WordPress se pega dentro de un bloque «HTML personalizado» y en Elementor dentro del widget «HTML». En ambos casos el banner se ve y funciona exactamente igual que en la vista previa de la herramienta.
Si el banner es publicidad o parte de un acuerdo comercial, marca al menos sponsored: es el valor que los buscadores piden para enlaces pagados. nofollow es más genérico y puede acompañarlo sin problema. Para banners internos que enlazan tus propias páginas no hace falta ninguno de los dos.
Porque la proporción de la imagen no coincide con la del tamaño elegido: al forzar unas medidas distintas, el navegador la estira. La herramienta te avisa cuando detecta ese desajuste. La solución es recortar o exportar la imagen ya en la proporción del formato, o elegir «Tamaño original de la imagen».
Sí: se incrusta o se enlaza igual que cualquier otra imagen, y la herramienta desactiva la compresión WebP con los GIF para no perder la animación. Ten presente su peso —es el formato más pesado— y las pautas de accesibilidad sobre parpadeos rápidos.
Con imagen enlazada por URL, en la gran mayoría de clientes de correo sí. Con imagen incrustada en base64, no en todos: algunos clientes bloquean ese tipo de imagen. Para boletines, usa siempre la variante enlazada.
Este generador produce el código del banner, sin panel ni seguimiento: máxima simplicidad y cero dependencias. Si necesitas contar clics, la vía sencilla es usar como destino un enlace corto de nuestro acortador, que registra las visitas de cada enlace por separado.
Tenemos la herramienta empaquetada para instalar en tu propio sitio: tus visitantes crean sus banners sin salir de tu página, todo se ejecuta en su navegador y no dependes de ningún servicio externo. Y si lo que buscas es que te lo dejemos montado, o una web entera que convierta, ese es exactamente nuestro trabajo.