Generador gratuito de firma de correo HTML para Gmail y Outlook

La firma de correo es el bloque con tu nombre, cargo, empresa y datos de contacto que el programa de correo añade al final de cada mensaje que envías. El generador la crea como una tabla HTML con los estilos escritos directamente en cada elemento, por eso la firma pegada conserva colores, espacios y enlaces.

Solo hay dos campos obligatorios: Nombre completo y Correo electrónico. El resto lo añades cuando le sirva al destinatario: teléfono, sitio web, dirección, un botón con enlace a tu agenda o tus perfiles en redes sociales.

La norma internacional UIT-T E.123 describe cómo se escriben los datos de contacto en el papel de carta y las tarjetas de visita. Recomienda escribir el teléfono con el signo más y el prefijo del país, sin paréntesis, poner el correo electrónico con su etiqueta debajo del teléfono y escribir la web sin el prefijo http://[1]. El diseño Columna de etiquetas sigue ese orden: teléfono y, debajo, correo y web.

Un campo vacío no aparece en la firma. Los nombres de abajo son las etiquetas de los campos en el editor, y el texto gris de cada campo vacío muestra un ejemplo de lo que puedes escribir.

• Cargo y Nombre de la empresa van en la misma línea, separados por un punto.
• El campo Teléfono admite un número escrito de cualquier forma. La firma lo muestra tal como lo escribes y el enlace de llamada usa solo las cifras y el signo más. Un enlace tel: no admite espacios ni palabras dentro del número[2].
• La dirección del campo Sitio web aparece en la firma tal como la escribes, por ejemplo www.empresa.es. Si falta https://, el generador lo añade solo al enlace.
• El campo Avatar / logo (URL de imagen) recibe la dirección de una imagen publicada en una web. Al pegarla aparece la elección de forma (Circular, Redondeado, Cuadrado) y de tamaño: 40, 56 o 72 px. Una imagen de al menos 144 px de lado se ve nítida en pantallas de alta densidad.
• La Línea sobre el nombre recoge un texto corto en mayúsculas, por ejemplo el nombre de la empresa o un eslogan.
• La Etiqueta del nombre es una nota breve dentro de un marco ovalado junto al nombre, por ejemplo MBA o los pronombres.
• La Línea adicional admite una frase sobre lo que haces.
• Dirección y Datos formales son campos de varias líneas: la tecla Intro también crea una línea nueva en la firma. Los datos formales, como el NIF o el número de inscripción en el registro, aparecen en letra pequeña encima del aviso legal.

El generador tiene ocho diseños. En la sección Apariencia, cada uno aparece en una miniatura que muestra la firma con tus datos y colores. Cambiar de diseño no borra ningún campo:

• Estándar: datos uno debajo de otro, con teléfono, correo y web en una fila con etiquetas.
• Barra superior: nombre, cargo y avatar sobre una barra del color de acento, y el resto de datos debajo.
• Columna de etiquetas: teléfono, correo y web uno debajo de otro, con las etiquetas en una columna aparte.
• Centrado: todo alineado al centro, con el avatar encima del nombre.
• Compacto: nombre, cargo, empresa y contacto en una línea, con redes sociales y aviso legal debajo.
• Dos columnas: avatar, nombre y cargo a un lado, y contacto, redes y botones al otro, separados por una línea vertical.
• Minimalista: nombre, cargo, empresa, correo y teléfono, sin web, avatar ni botones.
• Barra inferior: datos arriba y, debajo, los botones y el nombre de la empresa en una barra del color de acento.

Si rellenas un campo que el diseño elegido no muestra, debajo de la vista previa aparece un aviso con el nombre de ese campo.

En la sección Botones se configuran dos botones. El primero tiene fondo del color de acento, y su texto y su dirección se escriben en los campos Texto del botón y Enlace CTA. El segundo solo tiene borde y usa los campos Texto del segundo botón y Enlace del segundo botón. Cada botón necesita texto y enlace. Si uno de los dos campos queda vacío, el botón no aparece en la firma.

El enlace puede abrir una página, un correo nuevo (mailto:info@empresa.es) o una llamada (tel:+34912345678). No hace falta empezar la dirección web por https://, porque el generador lo añade. Las direcciones que empiezan por javascript:, data:, vbscript: o file: se rechazan, así que un botón con ese enlace no aparece.

El Redondeo de botones tiene tres opciones: Sin redondeo, Ligero y Completo. Outlook para Windows no admite esquinas redondeadas en CSS[3], así que allí los botones siempre tienen esquinas rectas. Los diseños Compacto y Minimalista no muestran botones. El mismo enlace, por ejemplo a tu agenda de citas, puede ir en una tarjeta de visita como código del generador de códigos QR.

En la sección Redes sociales, pulsa el nombre de un servicio bajo Añadir perfil y el editor añadirá un campo para la dirección del perfil. Hay 12 servicios para elegir: LinkedIn, Instagram, Facebook, TikTok, YouTube, X (Twitter), GitHub, Dribbble, Behance, WhatsApp, Telegram y Pinterest. En la firma solo aparecen los servicios con dirección, y el botón con una cruz junto al campo elimina el perfil. Los perfiles aparecen en la firma en el mismo orden que en el editor. Uno nuevo se añade al final de la lista, y el orden se cambia arrastrando el perfil por el asa junto a su campo. Con el teclado, selecciona el asa y mueve el perfil con las flechas arriba y abajo.

No necesitas la dirección completa del perfil. En los campos Instagram, Facebook, TikTok, YouTube, X, GitHub, Dribbble, Behance, Telegram y Pinterest basta con @usuario, y el generador construye la dirección del perfil. LinkedIn necesita la dirección, porque los perfiles de personas y de empresas usan rutas distintas (/in/ y /company/). En el campo WhatsApp escribe tu teléfono con el prefijo del país: el generador lo convierte en un enlace https://wa.me/ solo con cifras, el formato que describe el servicio de ayuda de WhatsApp[4].

Iconos en lugar de nombres

La opción Mostrar iconos en lugar de los nombres cambia los nombres por iconos de 16, 20 o 24 px en tres colores: Colores de plataforma, Oscuros o Blancos, estos últimos para un fondo de firma oscuro. Los iconos son imágenes PNG alojadas en arteontools.com. Un icono SVG escrito directamente en el código no se ve en Gmail, Outlook ni Yahoo Mail[5], y Gmail elimina las imágenes guardadas en base64[6]. Cada icono lleva el nombre del servicio como texto alternativo, así que si un programa de correo bloquea las imágenes, el destinatario ve ese nombre.

Colores

El Color de acento se elige entre cinco muestras listas o en el selector del navegador, que se abre al pulsar el cuadrado de color. También puedes escribir un código HEX en el campo junto al cuadrado, por ejemplo el de tu manual de identidad corporativa. El campo acepta el código con almohadilla o sin ella, de seis o de tres caracteres, por ejemplo #1d4ed8 o 14c. El Color de texto y el Color de fondo funcionan igual, pero sin muestras. El color de acento se aplica al nombre, los enlaces, los botones, el borde y las barras de los diseños Barra superior y Barra inferior. El color de fondo rellena toda la firma. Un texto claro sobre fondo de color se comprueba en el comprobador de contraste de colores, y el código de un color corporativo se convierte en el convertidor HEX a RGB. Si tu manual de identidad da los colores en RGB, el código HEX lo obtienes con el convertidor RGB a HEX, y los colores de imprenta en CMYK los pasas antes a RGB con el convertidor CMYK a RGB. El color de acento de tu logo se obtiene con el extractor de colores de imagen, y los tonos que combinan, con el generador de paletas de colores.

Fuente y tamaño de texto

Puedes elegir Arial, Verdana, Tahoma, Trebuchet MS o Georgia, fuentes que Microsoft incluye con Windows[7]. Si el dispositivo del destinatario no tiene la fuente elegida, el programa de correo usa su propia fuente sin serifa, o una con serifa en el caso de Georgia, porque así la escribe el generador.

El Tamaño de texto tiene tres niveles: Pequeño 12 px, Estándar 13 px y Mayor 14 px. El nombre es 2 px más grande que el resto del texto y el aviso legal, 2 px más pequeño. Outlook indica el tamaño de fuente en puntos, y 13 px equivalen a 9,75 pt, algo que puedes comprobar en el convertidor de px a pt.

Dirección del texto

La opción Dirección del texto en De derecha a izquierda dispone la firma como lo requiere un texto en árabe o hebreo. El generador añade entonces el atributo dir="rtl", que admiten Gmail, Outlook y Apple Mail[8]. Los teléfonos, correos y webs siguen de izquierda a derecha para que las cifras no se inviertan. Arial y Tahoma tienen letras árabes[9], mientras que Verdana, Georgia y Trebuchet MS no[10].

Borde de la firma

En Borde de la firma marca los lados donde debe ir un borde del color de acento: Izquierda, Derecha, Arriba y Abajo. Un solo lado mide 4 px, y marcar los cuatro dibuja un marco completo de 2 px.

La sección Estilo de texto muestra una fila por cada elemento de la firma: Nombre completo, Cargo, Empresa, Datos de contacto, Redes sociales y Aviso legal. El color se elige en el selector del navegador al pulsar el cuadrado de color. Cuando un texto tiene color propio, junto al cuadrado aparece el botón Restablecer el color predeterminado. Los botones menos y más cambian el tamaño 2 px por clic, y entre ellos se ve el tamaño del texto en píxeles. Puedes bajarlo o subirlo como máximo 4 px respecto al tamaño base.

La sección Espaciado ajusta el Relleno interno de la firma (8, 16 o 24 px) y la separación entre elementos de 2 en 2 px, de 0 a 32 px. Solo verás las separaciones de los elementos que estén en la firma y en el diseño elegido:

• Debajo del nombre
• Debajo del cargo
• Debajo de la línea adicional
• Encima de los datos de contacto
• Encima de las redes sociales
• Encima del botón
• Encima del aviso legal

En la sección Aviso legal hay un campo para el texto que aparece al final de la firma en letra más pequeña, por ejemplo un aviso de confidencialidad. El campo empieza vacío, y el botón Insertar un aviso de ejemplo inserta un aviso de confidencialidad listo que puedes cambiar. Un campo vacío no añade nada a la firma.

La opción Mostrar línea divisoria entre datos de contacto y aviso legal aparece cuando la firma tiene aviso legal o datos formales, y añade encima de ellos una línea horizontal. El Estilo de línea puede ser continuo, discontinuo o punteado, el grosor de 1, 2 o 3 px, y el Color de línea cualquiera, con el botón Por defecto para volver al gris claro #e5e7eb. La línea aparece en los diseños Estándar, Barra superior, Columna de etiquetas y Centrado. En el diseño Dos columnas, una línea fina propia separa el aviso legal del resto.

Pulsa Copiar firma (Gmail / Outlook). El botón copia la firma con su formato, así que al pegarla se mantienen colores, enlaces e imágenes. Bajo la vista previa aparecen entonces tres pasos para pegarla, los mismos que abajo, con un selector entre Gmail y Outlook. Si cambias algo en la firma después de copiarla, el editor te recuerda que vuelvas a copiarla.

Gmail en el navegador

1. Arriba a la derecha, haz clic en el icono de configuración y elige Ver todos los ajustes.
2. En el apartado Firma, pega la firma en el cuadro con Ctrl + V, o Cmd + V en un Mac.
3. Al final de la página, haz clic en Guardar cambios.

Una firma de Gmail puede tener hasta 10 000 caracteres, y la imagen de la firma también cuenta para ese límite[11].

Nuevo Outlook para Windows y Outlook en la Web

1. Selecciona Configuración y después Cuentas y Firmas.
2. Añade una firma nueva, ponle un nombre y pega la firma en el cuadro de edición.
3. Selecciona Guardar.

En el Outlook clásico para Windows, abre un mensaje nuevo y en el menú Mensaje selecciona Firma y después Firmas[12].

La vista previa muestra la firma como la dibuja el navegador. Los programas de correo entienden menos HTML, y cada uno a su manera, por eso el generador evita los elementos que no muestran. Algunas diferencias, sin embargo, dependen de lo que escribes:

• Una imagen guardada dentro de la propia dirección (data:image/png;base64,…) no aparece en Gmail[6]. El código base64 es útil en archivos HTML y CSS, como muestra el convertidor de imagen a Base64, pero el campo del avatar necesita la dirección de un archivo, por eso el editor muestra un aviso al pegar código base64. El archivo de imagen se recupera de ese código con el convertidor de Base64 a imagen y después se publica en tu web.
• Gmail no muestra imágenes SVG en las cuentas de Google[13], así que convierte antes a PNG un logo guardado en SVG, por ejemplo con el convertidor de SVG a PNG.
• Outlook para Windows no muestra imágenes WebP[14], así que guarda el logo y la foto como PNG o JPG, por ejemplo con el convertidor de WebP a PNG.
• Outlook para Windows bloquea por defecto la descarga automática de imágenes de Internet[15]. Hasta que el destinatario la permita, verá los nombres de los servicios en lugar de los iconos y ningún avatar.
• La dirección de la imagen debe llevar directamente al archivo. Un enlace para compartir de Google Drive o Dropbox abre una página de vista previa, así que la imagen no se muestra.

El generador guarda tus datos y ajustes en el navegador (localStorage) con cada cambio, por separado para cada versión de idioma de la página. Si vuelves con el mismo navegador, la firma te espera en el último estado guardado. Los datos de la firma no se envían a nuestro servidor.

El botón Exportar configuración guarda datos, colores, diseño, espaciado y estilos de texto en un archivo .json, e Importar configuración carga ese archivo en otro ordenador o en el de un compañero que solo cambia sus propios datos. La importación revisa cada valor: un color que no esté en HEX y una fuente fuera de la lista mantienen la configuración anterior a la importación.

El botón Restablecer valores, tras confirmarlo, vacía todos los campos y devuelve la firma a su aspecto inicial. No se puede deshacer, así que exporta antes la configuración.

Todos estos botones están en la tarjeta de la vista previa, debajo del botón de copiar. Allí también encontrarás Copiar código HTML (código sin formato para un editor HTML) y Descargar como HTML (el archivo firma-correo.html). El selector sobre la vista previa, con un sol (Claro) o una luna (Oscuro), muestra la firma sobre fondo claro u oscuro.