¡Hola querido lector! Ya estoy una semana más por aquí y, en esta ocasión, te enseño cómo crear una firma HTML para tu correo electrónico, con plantilla incluida.
Puede parecer un detalle menor, pero tu firma aparece en todos los correos que envías: es uno de los elementos de tu imagen corporativa que más veces ve un cliente.
En este post tienes la plantilla lista para copiar, las buenas prácticas para que se vea bien en todos los gestores de correo y las guías de configuración en Outlook, Gmail, Apple Mail, iPhone y Thunderbird. ¡Vamos con ello!
Resumen rápido
- Una firma HTML es el bloque de código con tus datos de contacto que se añade al final de tus correos.
- Se construye con tablas y estilos en línea, porque los gestores de correo no interpretan el CSS moderno.
- Las imágenes deben estar alojadas en una URL estable y llevar ancho, alto y texto alternativo.
- Evita firmas solo con imagen: si el destinatario bloquea las imágenes, se queda sin tus datos.
¿Qué es una firma HTML?
Una firma HTML es el bloque de código que se añade automáticamente al final de tus correos electrónicos con tu nombre, cargo, datos de contacto, logotipo y enlaces.
Se hace en HTML porque es el lenguaje que entienden los gestores de correo. Eso sí, es un HTML muy particular: estos programas interpretan el código con muchas limitaciones, así que se utilizan tablas y estilos en línea, como se hacían las páginas web hace años.
- Plantillas 100% Personalizables
- Textos legales incluidos (Evita multas)
- 4 versiones distintas de las firmas más comunes
Plantilla de firma HTML lista para copiar
Copia este código, sustituye tus datos y pégalo en tu gestor de correo. Está hecho con tablas y estilos en línea para que se vea bien en la mayoría de clientes:
<table cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, Helvetica, sans-serif; color: #333333; font-size: 13px; line-height: 18px;"> <tr> <td style="padding-right: 15px; border-right: 2px solid #eeeeee;"> <img src="https://tudominio.com/logo.png" width="110" height="110" alt="Nombre de tu empresa" style="display: block; border: 0;"> </td> <td style="padding-left: 15px;"> <strong style="font-size: 15px; color: #111111;">Nombre y apellidos</strong><br> <span style="color: #777777;">Cargo · Nombre de la empresa</span><br><br> Tel.: <a href="tel:+34600000000" style="color: #333333; text-decoration: none;">600 00 00 00</a><br> Email: <a href="mailto:hola@tudominio.com" style="color: #333333; text-decoration: none;">hola@tudominio.com</a><br> Web: <a href="https://tudominio.com" style="color: #333333; text-decoration: none;">tudominio.com</a><br><br> <a href="https://www.linkedin.com/in/tuperfil/" style="text-decoration: none;"><img src="https://tudominio.com/linkedin.png" width="22" height="22" alt="LinkedIn" style="border: 0;"></a> <a href="https://www.instagram.com/tuperfil/" style="text-decoration: none;"><img src="https://tudominio.com/instagram.png" width="22" height="22" alt="Instagram" style="border: 0;"></a> </td> </tr> </table>El resultado tiene este aspecto:
Cómo personalizarla
- Pega el código en un editor de texto plano (Bloc de notas, TextEdit en modo texto plano o un editor de código).
- Sustituye los datos: nombre, cargo, teléfono, email y web.
- Cambia las URLs de las imágenes en las etiquetas
img src. - Actualiza los enlaces de tus redes sociales en las etiquetas
a href. - Ajusta los colores a los de tu marca.
PD. Aloja las imágenes en tu propio dominio siempre que puedas. Si utilizas un servicio externo gratuito y algún día cierra o borra el archivo, tu firma aparecerá rota en todos los correos que hayas enviado.
Buenas prácticas para que tu firma se vea bien
- Utiliza tablas y estilos en línea. Flexbox, grid u hojas de estilo externas no funcionan en la mayoría de gestores.
- Limita el ancho a unos 500 o 600 píxeles para que se vea bien en móvil.
- Utiliza fuentes del sistema: Arial, Helvetica, Georgia, Verdana o Times New Roman. Las tipografías personalizadas no cargan.
- Pon siempre ancho, alto y texto alternativo a las imágenes: muchos gestores las bloquean por defecto.
- No hagas la firma solo con una imagen. Si se bloquea, el destinatario no ve nada, y además no podrá copiar tu teléfono ni tu email.
- Evita imágenes de fondo y fondos de color muy marcados: pueden verse mal en modo oscuro.
- Mantén las imágenes ligeras, sobre todo el logotipo.
- Enlaza el teléfono con
tel:y el email conmailto:para que sean pulsables en móvil. - Sé conciso: nombre, cargo, empresa, contacto y poco más.
- Pruébala antes enviándote correos a cuentas de Gmail, Outlook y móvil.
PD. Sobre el típico texto legal de confidencialidad: no es obligatorio y su valor jurídico es discutible. Si eres autónomo o sociedad, lo que sí conviene es incluir tus datos identificativos y un enlace a tu política de privacidad.
- Plantillas 100% Personalizables
- Textos legales incluidos (Evita multas)
- 4 versiones distintas de las firmas más comunes
Alternativas si no quieres tocar código
Generadores de firmas
Existen generadores online que crean el código a partir de un formulario. Son cómodos, aunque muchos añaden su propia marca en la versión gratuita.
El editor del propio gestor
Gmail y Outlook permiten componer la firma directamente en su editor, con imagen, enlaces y formato básico. Es la opción más sencilla si no necesitas un diseño elaborado.
Encargarla
Si quieres una firma alineada con tu imagen corporativa y probada en los principales gestores, es un trabajo rápido de encargar a un diseñador web.
Cómo configurar tu firma HTML en cada gestor
Outlook
En las versiones recientes de Outlook, lo más rápido es pegar la firma ya renderizada:
- Abre tu firma HTML en el navegador.
- Selecciona la firma y cópiala (la firma visual, no el código).
- En Outlook, ve a Archivo > Opciones > Correo > Firmas.
- Pulsa en Nueva, ponle un nombre y pega la firma en el cuadro de edición.
- Elige en qué correos aparecerá (nuevos, respuestas y reenvíos) y guarda.
Si prefieres pegar el código directamente, puedes editar el archivo .htm de tu firma en la carpeta Signatures del perfil de usuario (dentro de AppData > Roaming > Microsoft), pegando tu código entre las etiquetas body.
Gmail
- Abre tu firma en el navegador y cópiala visualmente.
- En Gmail, pulsa en la rueda dentada y entra en Ver todos los ajustes.
- En la pestaña General, baja hasta Firma y pulsa en Crear nueva.
- Pega la firma en el editor.
- Elige en qué casos se utilizará y pulsa en Guardar cambios al final de la página.
PD. Gmail no permite pegar código HTML directamente: hay que copiar la firma ya renderizada desde el navegador. Si al pegarla se descoloca, suele deberse a que el código no utiliza tablas.
Apple Mail
- En Ajustes > Firmas, crea una firma nueva con cualquier texto y cierra Mail.
- Abre el Finder y pulsa Shift + Cmd + G para ir a
~/Library/Mail/. - Entra en la carpeta de versión (V6, V10…), luego en MailData y en Signatures.
- Abre con TextEdit el archivo
.mailsignaturemás reciente y pega tu código entre las etiquetasbody. - Cambia
charset=us-asciiporcharset=utf-8y guarda. - Bloquea el archivo desde su información para que Mail no lo sobrescriba.
iPhone y iPad
- Envíate un correo con tu firma desde el ordenador.
- Ábrelo en el móvil y copia todo el contenido.
- Ve a Ajustes > Aplicaciones > Mail > Firma.
- Pega la firma manteniendo pulsado el cuadro de texto.
Thunderbird
- Entra en Configuración de la cuenta y selecciona tu cuenta.
- Marca la casilla Usar HTML y pega el código en el cuadro de texto de la firma.
- O bien utiliza Adjuntar la firma de un archivo y selecciona tu archivo HTML.
- Plantillas 100% Personalizables
- Textos legales incluidos (Evita multas)
- 4 versiones distintas de las firmas más comunes
Ejemplos de firmas de correo
Estos son algunos ejemplos de firmas que he diseñado, para que te sirvan de inspiración:
Problemas habituales y cómo resolverlos
| Problema | Causa y solución |
|---|---|
| La imagen aparece encima del texto | El código no utiliza tablas. Estructura la firma con una tabla de dos columnas |
| Los iconos se ven enormes | Faltan los atributos width y height en las imágenes |
| Aparece un borde azul en los iconos | Añade border=»0″ y style=»border: 0;» a las imágenes |
| No se ve la imagen | La URL no es pública o el gestor bloquea las imágenes externas |
| Se ve bien en el navegador pero mal en el correo | Normal: cada gestor interpreta el HTML a su manera. Simplifica el código |
| Se ve mal en modo oscuro | Evita fondos claros fijos y logotipos con fondo blanco; utiliza PNG con transparencia |
Conclusiones sobre las firmas HTML
Una firma bien hecha transmite profesionalidad y facilita que te contacten, que al final es de lo que se trata.
Mi recomendación: mantenla sencilla, construida con tablas, con datos en texto y no solo en imagen, y pruébala en varios gestores antes de darla por buena.
Si quieres cuidar toda tu imagen digital, desde la página web hasta los detalles como este, puedo ayudarte con mi servicio de diseño web WordPress.
Ahora te toca a ti, querido lector. ¿Ya tienes tu firma HTML lista? ¡Te leo en los comentarios!
Preguntas frecuentes sobre las firmas HTML
¿Qué es una firma HTML?
Es el bloque de código que se añade al final de tus correos con tu nombre, cargo, datos de contacto, logotipo y enlaces, y que se construye con tablas y estilos en línea para que los gestores de correo lo interpreten bien.
¿Cómo crear una firma HTML para el correo?
Partiendo de una plantilla con tablas y estilos en línea, sustituyendo los datos y las URLs de imágenes y enlaces, y pegándola después en la sección de firmas de tu gestor de correo.
¿Por qué mi firma se ve bien en el navegador pero mal en el correo?
Porque los gestores de correo interpretan el HTML con muchas limitaciones y eliminan parte del CSS. La solución es simplificar el código, utilizar tablas y aplicar los estilos en línea.
¿Puedo hacer la firma solo con una imagen?
No es recomendable. Muchos gestores bloquean las imágenes por defecto y el destinatario se quedaría sin tus datos, además de no poder copiar el teléfono o el email ni pulsar en los enlaces.
¿Dónde alojo las imágenes de mi firma?
Lo ideal es alojarlas en tu propio dominio, en una URL pública y estable. Si utilizas un servicio externo y el archivo desaparece, la firma quedará rota en todos los correos enviados.
¿Se puede pegar código HTML directamente en Gmail?
No. Gmail no admite pegar el código en su editor de firmas: hay que abrir la firma en el navegador, copiarla ya renderizada y pegarla en el cuadro de firma.
¿Es obligatorio incluir un texto legal en la firma?
No lo es, y el valor jurídico de las cláusulas de confidencialidad es discutible. Lo recomendable es incluir los datos identificativos de la empresa o profesional y un enlace a la política de privacidad.
