FIRMA HTML

Cómo crear firma HTML para mi correo electrónico: Guía definitiva + Plantilla

crear firma html email

Publicado: 6 junio 2017

Modificado: 25 noviembre 2020

Tiempo de lectura: 6 min

¿Ya tienes tu firma HTML implementa en el email de tu empresa querido lector? ¿Aún no? ¡No me lo puedo creer!

Yo hablándote de cómo conseguir visitas para tu página web gracias al SEO y no has cuidado un detalle tan importante para la imagen de tu página web como la firma que aparece en tu correo electrónico. ¡Esto no puede ser!

Hoy te voy a mostrar como cuidar la imagen corporativa de tu negocio creando una firma para tu email que ayude a tu cliente identificar tu marca y tu email por encima del resto.

Ten en cuenta que cada detalle a la hora de perfilar la imagen de tu negocio cuenta. Por ello, hoy te voy a enseñar a crear una firma HTML para tus emails corporativos.

Si has oído bien, HTML, es decir, código. Pero no te alarmes todavía, gracias a esta sencilla guía simplemente tendrás que hacer un copia y pega y tendrás lista tu firma.

Con este post también busco que no te asustes al ver código ya que no es tan complicado ni tan complejo como inicialmente podría parecer. Además, hoy vamos a utilizar un código HTML muy básico.

Ten en cuenta que algunos gestores de correo electrónico no permiten crear una firma sin necesidad de utilizar HTML como Outlook. Por este motivo vamos a tener que utilizar HTML para crear tu firma si o si aunque no tengas ni idea.

Por todo ello, en este post te voy a mostrar dos formas de crear tu firma de correo electrónico:

  • Firma mediante código HTML
  • Firma sin tener que tocar código HTML (Mediante herramientas online).

¡Vamos con ello!

Configurar firma de correo electrónico en Outlook

hacer una firma de correo con Outlook es muy sencillo gracias al editor tipo Word que incorpora la herramienta que te permite configurar tu firma sin necesidad de utilizar HTML. Para ello, deberás seguir este proceso:

Primero, configuramos nuestra cuenta de email en:

Herramientas > Configuración de cuenta > Nueva

Posteriormente, y con la cuenta ya creada, tendrás que hacer click en:

Herramientas > Opciones > Formato de correos > Firmas

Una vez dentro tendrás que seleccionar la cuenta de email asociada a la firma que vas a configurar y simplemente tendrás que ir maquetándola como un simple Word. En esta firma podrás añadir enlaces, imágenes, etc.

Esta es la solución rápida y sencilla para crear un firma de email con Outlook.

Firma HTML : Guía paso a paso

Vamos con el código HTML que es lo que más funcionalidades y estilos te va a permitir introducir en tu firma de correo. Para crear tu firma de email simplemente tendrás que seguir los siguientes pasos:

  1. Copia y pega el código HTML tal cual te lo facilito en un bloc de notas.
  2. Modifica los datos que aparecen entre corchetes “[]” con los datos de tu empresa o proyecto.
  3. En la etiqueta <img src=””> pon el enlace o URL donde esté alojada la imagen de tu empresa o proyecto. Podrás alojar esta imágenes de forma gratuita en imgBB si no dispones de un servidor o hosting propio.
  4. Corrige los enlaces a las redes sociales y de tu página web. Estos enlaces los podrás localizar por la etiqueta HTML <a href=””>
  5. Copia el código de la firma HTML en tu programa de email.

Si directamente no sabes por donde empezar con el código HTML puedes descargarte directamente el código para crear tu propia firma HTML en el siguiente enlace oculto ¡Desbloquéalo!

[sociallocker id=”3618″]Descargar Código Firma HTML [/sociallocker]

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Firma HTML</title>
</head>
<table width="600" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #ffa300;">
<tr>
<td width="170" height="170" style="border:1px solid #ffa300; border-right: none; border-left: none;" align="right" valign="top">
<a href="[ENLACE DE TU SITIO WEB]" target="_blank"><img src="[URLIMAGEN DE TU LOGO]" width="150" height="180" style="padding-top:15px;"></a>
</td>
<td width="430" height="170" style="padding-left:25px; font-family: Helvetica, Arial, sans-serif; font-size:13px; border:1px solid #ffa300; border-left: none; border-right: none; line-height:16px;" valign="bottom">
<p style="font-size:18px;"><b>[TU NOMBRE]</b></p>
<p style="line-height:19px;">[TU TELÉFONO] &middot; [TU EMAIL] &middot; [TU WEB]<br></p>
<p><b>Síguenos en:</b></p>
<p><a href="[ENLACE A TU PÁGINA DE FACEBOOK]" target="_blank"><img src="[URL IMAGEN LOGO FACEBOOK]" width="30" height="30"></a>
<a href="[ENLACE A TWITTER]" target="_blank"><img src="[URL IMAGEN LOGO TWITTER]" width="30" height="30"></a>
<a href="[ENLACE A GOOGLE PLUS]" target="_blank"><img src="[URL IMAGEN LOGO GOOGLE PLUS]" width="30" height="30"></a></p>
</td>
</tr>
</table>
</html>

Si has seguido todos los pasos que te he indicado conseguirás una firma HTML similar a esta:

Herramientas gratuitas para crear tu firma HTML

Si lo tuyo no es la programación y cada vez que ves código HTML te asustas, tranquilidad, tengo una solución alternativa, los maquetadores de firmas online.

Te voy a presentar 3 herramientas GRATUITAS que harán el trabajo de escribir código HTML por ti. Tu simplemente tendrás que diseñar tu firma con el maquetador de la herramienta para posteriormente copiar el código que te proporcionará en tu gestor de emails. ¡Así de simple!

HTMLSIG.com

Esta herramienta en su versión gratuita te permitirá crear tu firma HTML de forma sencilla. Esta firma de email podrá ser editada durante los 30 primeros días, si luego deseas editarla tendrás que pagar.

Para crear tu firma simplemente tendrás que introducir los datos en la herramienta, elegir una plantilla y listo ¡Firma HTML lista!.

NEWOLDSTAMP.com

Con esta herramienta el proceso será el mismo que el anterior.

En la herramienta tendrás una columna en la que introducir los datos personales de tu firma y en la otra columna tendrás que elegir la plantilla a utilizar para crear tu firma HTML.

WISESTAMP.com

Otra herramienta más que te facilitará la tarea de crear firmas HTML.

Lo más llamativo de esta herramienta es la vista previa en tiempo real que te ofrece. De esta manera, podrás ir viendo como va progresando tu firma HTML. Como plus a las anteriores herramientas, esta te permite incluir APPS a tu firma.

El mayor inconveniente respecto a las anteriores herramientas es que está aplicación tiene un menor número de plantillas de firmas a elegir.

Alternativa: Usar imágenes como firma HTML

Si finalmente ves que con HTML todo es demasiado complicado, siempre podrás optar por usar directamente una imagen como firma para tu email.

Rara es la persona que hoy en día no tiene unos conocimientos básicos de diseño en Word, PowerPoint, Photoshop, Ilustrator o Paint. Con estas herramientas podrás hacer auténticas maravillas en tu firma.

Si finalmente te decides a utilizar por firma una imagen tendrás que subir tu firma (Imagen) a tu servidor y a continuación pegar el siguiente código HTML en la firma:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Firma HTML</title>
</head>
<table width="600" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #ffa300;">
<tr>
<td ><img src="RUTA DE LA IMAGEN EN TU SERVIDOR"/></td>
</tr>
</table>
</html>

¿Es necesario tener una firma HTML?

Lógicamente no es necesario tener una firma HTML maquetada.

Sin embargo, si descuidas estos puntos corporativos en tu empresa o proyecto web este no parecerá serio. La falta de profesionalidad que proyectas con una firma plana o descuidada en tu email es enorme. Por ello, has de cuidarla.

Además, con este sencillo código ya no tendrás excusas para tener tu propia firma corporativa en tus emails y si tienes cualquier tipo de duda siempre puede planteármela en los comentarios 🙂

Consejos para crear una firma bonita HTML

El diseño no es lo más importante de una firma. Sin embargo, como siempre digo, todo lo que hay en internet entra por los ojos. Por ello, tener una firma bonita en HTML que te destaque de la competencia te ayudará en tu negocio.

A continuación te voy a dar unas pautas básicas  para crear una buena y bonita firma HTML:

  1. Se conciso, de nada sirve poner un montón de información irrelevante. El lector de internet escanea la información por regla general y no la lee.
  2. Cuida el diseño pero recuerda la frase “menos es más”.
  3. Destaca tus datos de contacto. Escríbelos con un tamaño de letra mayor.
  4. Siempre usa tu logotipo en tu firma, esa es realmente tu firma personal POR LA CUAL TE VAN A IDENTIFICAR.

Ejemplos de firmas originales y elegantes

A continuación te muestro un par de ejemplos de lo que podría ser una firma original y elegante en HTML:

Conclusiones sobre tu firma HTML

Personalmente siempre soy partidario de código ya que es a lo que me dedico y es con lo que puedo hacer infinidad de cosas que con las herramientas gratuitas no conseguiría.

Sin embargo, si no tienes conocimientos de HTML te recomiendo utilizar las herramientas gratuitas que te he mencionado o en su defecto el maquetador de Outlook.

Si finalmente necesitas una firma más profesional y menos convencional no dudes en contactarme.

De todas formas, si tienes alguna duda ¡Ponla en los comentarios sin miedo! ¡Te ayudaré encantado!

¡Hasta la próxima!

borja aranda cuadrado

Artículo escrito por:

Borja Aranda Vaquero

Propietario de este bonito blog sobre SEO, WordPress y diseño web. Mi intención es ayudar a empresas y emprendedores a conseguir las primeras posiciones en Google con el fin de que generen nuevos ingresos y clientes a través de internet.

Responsable: Borja Aranda Vaquero

Finalidad: Moderar y responder comentarios de usuarios

Legitimación : Consentimiento.

Destinatarios: Todos tus datos los guardará Disqus. Mi sistema de comentarios (Acogido al acuerdo de seguridad EU-US Privacy). 

Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en legal [@] borjaarandavaquero.com así como el derecho a presentar una reclamación ante una autoridad de control.

Información adicional: En la Política de Privacidad de borjaarandavaquero.com,  encontrarás información adicional sobre la recopilación y el uso de su información personal ,incluida información sobre acceso, conservación, rectificación, eliminación, seguridad, y otros temas.

suscribirse al blog

¿TE GUSTA EL CONTENIDO?

¡Súscríbete y no te pierdas ni uno más!

+ 2 Ebooks SEO DE REGALO