Cómo hacer una firma HTML para el correo o email

Hoy aprenderás cómo hacer una firma HTML para el email o el correo, independientemente del gestor que utilices, ya sea Outlook, Thunderbird u otro gestor. En el artículo, además, te dejaré un generador automático de plantillas por si prefieres crear la firma más rápidamente. ¡Comenzamos!

Firmas de correo HTML. ¿Qué son?

Te habrás fijado que muchos de tus contactos usan firmas de correo o email personalizadas, que incluyen datos como por ejemplo su nombre, teléfono, email, nombre de su empresa y el cargo que ostenta, entre otros. Esta información se puede presentar de una forma que sea clara y elegante, respetando la imagen corporativa del negocio y aportando al lector de forma rápida una visión general de ti y tus datos de contacto y de redes sociales, por poner un ejemplo.

Hace unos años, las firmas de correo eran realizadas con imágenes al uso. Esto hoy en día es un problema, ya que por seguridad los gestores de correo, por defecto, no descargan imágenes externas de los remitentes de correo (a menos que por configuración del propio gestor de correo lo hayas permitido).

Hoy en día, estas firmas son realizadas con código HTML y CSS, y tú mismo puedes crear tu firma HTML personalizada. Tan solo necesitarás algunos conocimientos (sencillos) de HTML y CSS, o bien usar uno de los generadores automáticos.

Si ya cuentas con algo de conocimiento HTML y de CSS, te dejo a continuación un ejemplo de firma HTML para que puedas retocar a tu gusto. Podrás valerte de estos dos artículos que te dejo a continuación: Listado de etiquetas HTML y propiedades CSS.

See the Pen Firma HTML by Caronte Web Studio (@carontestudio) on CodePen.

Con el Codepen que ves, podrás modificar los aspectos que consideres necesarios para adaptar este ejemplo a tu caso particular. Si tienes algún problema con cambios que quieras realizar, déjame un comentario al final del artículo y te ayudaré sin ningún problema.

Si aun así, no logras hacer la firma que desearías mostrar en tus emails, te dejo a continuación una herramienta maravillosa

Generador de firmas HTML

Como te indicaba, si deseas generar una firma HTML de una forma rápida y sencilla, te presento dos generadores de firmas de correo HTML. Los generadores son:

• Generador firmas HTML de HubSpot
• Generador firmas HTML de mail-signatures.com

En cualquiera de los dos generadores, tan sólo con rellenar los campos que quieras agregar a tu firma electrónica, se generará automáticamente el código HTML que necesitas agregar en tu gestor de correo.

Ahora si, te muestro cómo agregar tu firma HTML al gestor de correo.

Agregar firma HTML en Thunderbird

Agregar firma HTML en Outlook

A continuación te muestro como puedes agregar tu firma HTML en Outlook.

1. Accede al menú de Archivo > opciones
2. Dentro del menú opciones entra en la pestaña de Correo > Firmas
3. Dentro de «Firmas y plantillas» tendrás que dar al botón de «Nueva» y crear una nueva firma. Después podrás cerrar estos menús que acabas de abrir.
4. Pulsa la tecla de Windows + R. Se abrirá un menú de windows en la parte inferior-izquierda de tu ordenador. Ahí escribe lo siguiente: «appdata» . A continuación pulsa intro y se abrirá un explorador de Windows dentro de la carpeta AppData
5. Ahora tienes que navegar un poco hasta llegar a la carpeta donde se alojan las firmas de correo: Roaming > Microsoft > Signatures.
6. Una vez que llegues a Signatures, verás un fichero con extensión .htm ¿verdad? Lo siguiente que tienes que hacer es editar este fichero, con el programa Notepad o Visual Studio Code, por ejemplo, y pegar aquí tu código HTML.
7. Y terminado, ya puedes usar tu firma HTML en Outlook.

Conclusión

Espero que con esta entrada hayas podido generar tu firma HTML para el correo sin mayor problema. Mi opción preferida es hacer tu propia firma manualmente, pero claro, necesitas conocimientos HTML para ello. Aprovecho para invitarte a visitar nuestros cursos de diseño web por si decides formarte en el maravilloso mundo de la programación web.

Si te ha gustado este artículo, o no, o si quieres hacerme alguna consulta, déjame un comentario a continuación y te responderé lo antes posible. ¡Hasta la próxima!