Generador de Firma de Correo Electrónico

¿Por qué HTML basado en tablas?

Los clientes de correo interpretan el HTML de forma inconsistente. Outlook usa el motor de renderizado de Word, que ignora gran parte del CSS moderno (sin flexbox, sin grid, sombras de caja limitadas). Los diseños de tabla con estilos en línea son el único patrón que todos los clientes principales renderizan de forma predecible. El generador escribe exactamente ese estilo reducido, por lo que la firma se ve igual en Gmail, Outlook de escritorio, Outlook web, Apple Mail e iOS Mail.

Qué produce el generador

El resultado es una tabla simple: tu nombre en negrita en la primera línea, tu cargo o empresa debajo, y tus datos de contacto en una última línea separados por una barra vertical:

<table cellpadding="0" cellspacing="0" style="font-family: Arial, sans-serif; font-size: 14px; color: #111827;">
  <tr><td style="font-weight: 700; font-size: 16px;">Alex Rivera</td></tr>
  <tr><td>Lead Designer</td></tr>
  <tr><td style="padding-top: 8px;">alex@example.com | +34 600 000 000 | example.com</td></tr>
</table>

Los campos que dejes vacíos simplemente se omiten, así que una firma con solo nombre y correo queda compacta.

Qué debe incluir una firma

Imprescindibles:

• Nombre completo.
• Cargo o rol.
• Nombre de la empresa.
• Contacto directo (correo o teléfono).

Adiciones útiles:

• URL de LinkedIn o enlace a tu sitio web personal.
• Teléfono para roles de atención al cliente.

Evita:

• Citas inspiradoras largas.
• GIF animados (muchos clientes eliminan la animación).
• Imágenes grandes (ralentizan la carga del correo y se marcan como “pesadas”).
• Avisos de “confidencialidad” de más de 2-3 líneas, salvo que la ley lo exija.
• Un muro de iconos de redes sociales por cada red en la que te hayas registrado.

Añadir una foto o logo más tarde

El generador solo produce texto. Para añadir una foto o logo, pega el HTML generado en el editor de firmas de tu cliente de correo y usa sus controles de imagen, o edita el HTML para añadir una etiqueta img que apunte a una imagen alojada. La imagen debe estar en una URL de acceso público:

• CDN de la empresa: lo mejor para firmas comerciales; tu departamento de TI puede alojarla bajo el dominio de la marca.
• Servicios de imágenes gratuitos (imgur, plan gratuito de Cloudinary): rápido y gratis; riesgo de que el servicio deje de funcionar.
• Incrustación Base64: evita el alojamiento, pero engorda cada correo en 20-50 KB y algunas configuraciones de Outlook la eliminan.

Mantén las imágenes pequeñas: menos de 20 KB, cuadradas, de 120x120 o menos.

Peculiaridades de Outlook

• Ancho: mantén la firma por debajo de 600px; las más anchas se cortan en el panel de vista previa.
• Fuentes: quédate con Arial, Helvetica, Georgia, Verdana, o usa una pila como font-family: "Segoe UI", Arial, sans-serif;.
• Colores: evita el #000 puro; el #333 o #444 se ve mejor en Outlook con modo oscuro.
• No uses variables CSS, flex, grid ni SVG como elementos principales.

Avisos legales

Algunas jurisdicciones (la Companies Act 2006 del Reino Unido, requisitos de la UE para ciertas entidades) exigen un nombre de empresa registrado, número y dirección en los correos comerciales. Añade tú mismo los datos requeridos, en los campos de cargo y empresa o editando el HTML después, y consulta con tu equipo legal si tu mercado los exige.