Generador de firma de correo electrónico

Vista previa

¿Cómo añadirla a Gmail?

Haz clic en «Copiar la firma» y en Gmail ve a Configuración → General → Firma. Haz clic en la zona de firma y pega (Ctrl+V / Cmd+V). Gmail conservará el formato.

¿Cómo añadirla a Outlook?

Haz clic en «Copiar la firma» y en Outlook ve a Configuración → Correo → Redactar y responder. Haz clic en el editor de firma y pega. Para la aplicación de escritorio: Archivo → Opciones → Correo → Firmas → pega en el editor.

Por qué el correo electrónico HTML es un lugar tan extraño para diseñar

Si alguna vez has creado una firma en el mundo CSS-y-flexbox de un sitio web y luego la has visto desintegrarse dentro de un correo, has conocido el problema central: no existe un único "motor de renderizado de correo." Cada cliente de correo principal usa código diferente para mostrar HTML, y las reglas de lo que funciona están décadas atrás del web moderno. Gmail elimina la mayoría del CSS que vive fuera del atributo style del elemento, Apple Mail usa WebKit (así que es bastante moderno), y Outlook para Windows ha renderizado correos HTML usando el motor HTML de Microsoft Word desde Outlook 2007, lo que significa que flexbox, grid, selectores modernos, fuentes web, y la mayoría de las animaciones CSS simplemente no funcionan. La tabla de compatibilidad en caniemail.com rastrea todo esto y es una lectura aleccionadora.

La consecuencia práctica: las firmas de correo HTML se diseñan contra el mínimo común denominador. El código que este generador emite usa estilos en línea y un diseño basado en tablas, la única combinación que sobrevive al viaje a través de Outlook desktop, Outlook 365 web, Gmail, Apple Mail, Yahoo, iCloud y los diversos clientes móviles sin caerse a pedazos.

Lo que debe ir en una firma moderna

No hay una única firma "correcta," pero los elementos que constantemente ganan su lugar:

• Nombre, ligeramente más grande y en negrita que el resto. Lo primero que un destinatario debería ver.
• Cargo y empresa, línea secundaria, color más claro. Combina en una línea si ambos son cortos.
• Teléfono, envuelto en un enlace tel: para que un toque en el móvil marque.
• Correo electrónico, envuelto en un enlace mailto:, principalmente por completitud; los destinatarios ya conocen tu dirección.
• Sitio web, clicable, a menudo en el color de acento de la marca.
• Logo o foto, típicamente 60 a 100 px cuadrados o un banner de 150×40. No vayas más grande; las imágenes grandes hinchan cada correo saliente.
• Iconos sociales, 24 a 32 px, dos o tres como máximo. LinkedIn, X, GitHub, a veces Instagram, ajusta a lo que tu audiencia usa.

Opcional, cada vez más común desde 2020: pronombres (él/lo, ella/la, elle/le) en la misma línea que el cargo.

Qué dejar fuera

• Citas inspiradoras. Los destinatarios las encuentran consistentemente poco profesionales en encuestas; pocas personas quieren una firma corporativa seguida de Gandhi.
• Añadidos automáticos del tipo "Enviado desde mi iPhone". Los destinatarios entienden que el correo móvil existe; la línea no añade nada.
• Múltiples fuentes. Quédate con una sola. Mezclar fuentes en correo HTML es pedirle a Outlook que sustituya la incorrecta.
• Logos pesados de más de 50 KB. Cada correo que envías carga el peso; las firmas grandes hinchan los hilos de conversación rápidamente.
• GIFs animados en posiciones críticas. Outlook 2007 a 2019 renderiza GIFs animados solo como el primer fotograma, diseña en consecuencia.
• Imágenes de fondo. Outlook desktop tiene un soporte notoriamente con errores para imágenes de fondo. Usa rellenos de color sólido en su lugar.
• Listas de habilidades o servicios. Una firma no es una valla publicitaria. Enlaza a una página de perfil si la audiencia necesita saber más.

¿Por qué tablas y estilos en línea?

Dos realidades de compatibilidad hacen de esta la única opción segura:

1. Outlook desktop renderiza HTML usando Microsoft Word. El motor HTML de Word no entiende display: flex, display: grid, posicionamiento moderno, la mayoría de las pseudo-clases, ni fuentes web más allá de un par de fuentes del sistema. Tablas con anchos explícitos y padding en línea son lo que Word puede maquetar de manera confiable.
2. Gmail elimina agresivamente el CSS que vive en un bloque <style> o hoja de estilos externa, incluso citado en una respuesta de correo, esas reglas desaparecen. El CSS en atributos style="..." en elementos individuales sobrevive.

La combinación, maquetación de tabla para la estructura, estilos en línea para las reglas visuales, produce una firma que se ve igual en Outlook, Gmail, Apple Mail y las diversas variantes de Outlook web. La salida de esta herramienta sigue ese patrón.

Cómo pegarla donde va

• Gmail (web): Haz clic en el engranaje, Ver toda la configuración, General, desplázate hasta Firma, Crear nueva, haz clic en el editor y pega. Gmail conserva los estilos en línea. Establece como predeterminada para correo nuevo / respuestas y guarda los cambios.
• Outlook 365 / Outlook en la web: Configuración (icono de engranaje), Correo, Redactar y responder, Firma de correo, haz clic en el editor y pega. Guarda.
• Outlook desktop (Windows): Archivo, Opciones, Correo, Firmas, Nueva, nómbrala, pega en el editor, guarda. Asigna a una cuenta predeterminada si tienes varias.
• Outlook para Mac: Outlook, Preferencias, Firmas, haz clic en +, pega.
• Apple Mail: Mail, Ajustes, Firmas, arrastra la firma renderizada (o pega con Editar, Pegar). Si se pierde el formato, desmarca "Coincidir siempre con la fuente de mensaje predeterminada" y vuelve a pegar.
• iOS Mail / Outlook iOS: Los clientes móviles son más complicados, pega en un borrador en el escritorio, copia desde el borrador renderizado, luego pega en la configuración de firma de iOS. El pegado directo de HTML en móvil rara vez conserva el formato.

Opciones de hospedaje de imagen

Dos formas de incluir una imagen en una firma, cada una con compromisos:

• URL de imagen alojada, el <img src> apunta a una URL HTTPS accesible públicamente. El cliente de correo del destinatario obtiene la imagen cuando abre el mensaje, a menudo después de pedir permiso a través del aviso de "mostrar imágenes." Barato, pero cada destinatario activa una solicitud al servidor, y los píxeles de seguimiento que viajan en imágenes de firma son una de las formas originales en que funciona la analítica de tasa de apertura.
• Imagen Base64 incrustada, la imagen se incrusta directamente en el HTML como un URI data:image/...;base64,.... Sobrevive limpiamente al reenvío, sin solicitud externa, pero hincha cada correo por el tamaño codificado de la imagen y es eliminada o advertida por Outlook 2007 a 2019 desktop.

La opción confiable para una firma corporativa: una imagen HTTPS alojada de tamaño modesto (menos de 30 KB), con el atributo alt rellenado para que se degrade a texto legible cuando las imágenes están bloqueadas.

Cumplimiento y requisitos legales

Varias jurisdicciones requieren legalmente información específica en las firmas de correo electrónico empresarial:

• Reino Unido, la Ley de Sociedades de 2006 exige que las sociedades de responsabilidad limitada incluyan el nombre de la empresa registrada, la dirección registrada de la oficina, el número de registro y el lugar de registro en la correspondencia comercial, incluido el correo electrónico. Los autónomos están exentos.
• Alemania, la Telemediengesetz (TMG) tiene requisitos similares de Impressum: nombre completo y forma de la empresa, dirección registrada, información de contacto, tribunal de registro y número de registro, número de IVA cuando corresponda.
• UE en términos más amplios, el RGPD no exige específicamente información de contacto en las firmas, pero una forma clara de contactar a un responsable del tratamiento es parte de un cumplimiento más amplio y una firma es un lugar natural para ello.
• Industrias reguladas, servicios financieros, prácticas legales, salud, y otras a menudo requieren avisos específicos (avisos de confidencialidad, divulgaciones legales tipo FCA, advertencias relacionadas con HIPAA). Verifica los requisitos de tu sector.

Errores comunes

1. Diseñar en una herramienta web y exportar al correo. El CSS moderno no sobrevive en Outlook desktop. Construye para las restricciones del correo desde el principio.
2. Imaginería decorativa pesada. Cada correo que envías (y cada respuesta que alguien hace) carga el peso. Apunta a menos de 30 KB de peso total de imagen de firma.
3. Saltarse el texto alt en las imágenes. Cuando las imágenes están bloqueadas (predeterminado de Outlook desktop para remitentes externos), un alt vacío colapsa la maquetación. Establece siempre texto alt descriptivo.
4. Poner toda la información de contacto en la imagen. Si un destinatario bloquea las imágenes, no ve nada. La información crítica (nombre, cargo, teléfono) debe estar en texto HTML.
5. URLs largas mostradas en su totalidad. Envuélvelas en un enlace corto o usa texto de anclaje ("LinkedIn") en lugar de https://www.linkedin.com/in/tunombre-12345.
6. Citas, lemas y líneas motivacionales. Los destinatarios reportan ampliamente encontrarlas poco profesionales.
7. Firmas diferentes en distintos dispositivos. Establece la misma firma en cada dispositivo desde el que envías correo, los destinatarios notan la inconsistencia en hilos donde respondes desde escritorio y móvil.

Preguntas frecuentes

¿Por qué mi firma se ve diferente en Outlook que en Gmail?

Diferentes motores de renderizado. Outlook desktop usa el motor HTML de Microsoft Word y renderiza muchas propiedades CSS de manera diferente a Apple Mail basado en WebKit o los motores que Gmail web y Outlook 365 web usan. La firma que esta herramienta produce está construida para verse aceptable en todos ellos, nunca idéntica, pero siempre reconocible como la misma firma.

¿Puedo incluir un GIF animado?

Sí, pero Outlook 2007 a 2019 desktop renderiza GIFs animados solo como el primer fotograma. Diseña el primer fotograma para que se sostenga solo, si tu animación depende de una secuencia para transmitir significado, perderás la mitad de tu audiencia. Gmail, Apple Mail y Outlook 365 web reproducen los GIFs normalmente.

¿Mis datos se suben a algún lugar?

No. La firma se construye completamente en tu navegador. Tu nombre, cargo, información de contacto y URLs sociales van del formulario a la vista previa al portapapeles, nunca a un servidor, nunca a un endpoint de análisis, nunca a una lista de marketing. Muchos sitios constructores de firmas monetizan recolectando exactamente estos datos de contacto; este no.

¿Debería incluir una foto mía?

Opcional. Las fotos hacen que las firmas se sientan más personales y cálidas, pero añaden peso de imagen y disparan el aviso de "mostrar imágenes" en muchos entornos corporativos. Una foto de cabeza pequeña (60 a 80 px) tiende a aterrizar bien; una foto del tamaño de un banner no. Si tu rol es en gran parte B2C, ventas, éxito del cliente, reclutamiento, una foto ayuda; en contextos fuertemente B2B, nombre + cargo es suficiente.

¿Cuál es el descargo de responsabilidad legal que algunas empresas usan?

Común en industrias reguladas (finanzas, derecho, salud): "Este correo y cualquier archivo adjunto son confidenciales y están destinados únicamente al destinatario. Si has recibido este correo por error, notifica al remitente y elimínalo." Si es legalmente exigible es debatido por los abogados, pero es práctica estándar en muchos sectores. Las empresas del Reino Unido deben incluir legalmente su nombre registrado, oficina registrada, número de registro y lugar de registro en la correspondencia comercial según la Ley de Sociedades de 2006.

¿Puedo tener firmas diferentes para diferentes respuestas?

La mayoría de los clientes principales (Gmail, Outlook, Apple Mail) te permiten crear múltiples firmas y elegir cuál se usa como predeterminada para nuevos mensajes y cuál (a menudo una versión más corta) para respuestas y reenvíos. Construye ambas con esta herramienta y asigna cada una a su lugar en la configuración del cliente.

Herramientas relacionadas