Cómo crear una firma HTML para tu correo electrónico o email

Cómo crear firma HTML para tu correo electrónico o email [Guía + Plantilla]

¡Hola querido lector! Ya estoy una semana más por aquí y, en esta ocasión te enseñaré cómo crear una firma HTML para tu correo electrónico o email.

¡Cómo lo oyes!

Si aún eres de los que les da pereza esto de la imagen corporativa de la empresa siento comunicarte que toda empresa seria y profesional deberá tener una firma HTML original, práctica y profesional.

Ten en cuenta que cada detalle a la hora de perfilar la imagen corporativa de un negocio cuenta.

Por este motivo, hoy te enseñaré a cómo crear una firma HTML para tus emails corporativos sin necesidad de que seas un experto en el lenguaje de programación HTML.

Es más, gracias a esta guía simplemente tendrás que hacer un copia y pega del código HTML que verás en este post y conseguirás una firma HTML 100% profesional para tu negocio.

PD. La mayoría de gestores de correo electrónico solo permitirán crear firmas mediante HTML. Por este motivo, será necesario que utilice este lenguaje de programación si o sí.

¡Vamos con ello!

Cómo crear una firma HTML paso a paso [GUÍA + Plantilla]

Para crear una firma HTML de email simplemente deberás que seguir estos pasos:

  1. Copia y pega el código HTML que te facilitaré a continuación en un documento plano (Preferiblemente un bloc de notas).
  2. Modifica los datos que aparecerán el código con los datos de tu empresa o proyecto online.
  3. En la etiqueta <img src=»»> escribe el enlace o URL donde estará alojada la imagen o logotipo de tu empresa o proyecto.
  4. Modifica los enlaces a las redes sociales y a 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 gestor de correo electrónico favorito.

PD. Si no dispusieses de un servidor o alojamiento web propio dónde alojar las imágenes de tu firma HTML podrás hacerlo de forma gratuita en imgBB.

 				 					<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: large; font-family: Verdana;"><tbody><tr><td><table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: large; font-family: Verdana;"><tbody><tr><td style="vertical-align: top;"><table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: large; font-family: Verdana;"><tbody><tr><td class="sc-TOsTZ kjYrri" style="text-align: center;"><img width="130" height="130" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20130%20130'%3E%3C/svg%3E" role="presentation" class="sc-cHGsZl bHiaRe" style="max-width: 128px; display: block;" data-lazy-src="https://borjaarandavaquero.com/wp-content/uploads/2019/10/borja-aranda-cuadrado.jpg"><noscript><img width="130" height="130" src="https://borjaarandavaquero.com/wp-content/uploads/2019/10/borja-aranda-cuadrado.jpg" role="presentation" class="sc-cHGsZl bHiaRe" style="max-width: 128px; display: block;"></noscript></td></tr><tr><td height="30"></td></tr><tr><td style="text-align: center;"><table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: large; font-family: Verdana; display: inline-block;"><tbody><tr style="text-align: center;"><td><a href="https://www.facebook.com/BorjaArandaVaquero/" color="#FFA631" class="sc-hzDkRC kpsoyz" style="display: inline-block; padding: 0px; background-color: rgb(255, 166, 49);"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%2024'%3E%3C/svg%3E" alt="facebook" color="#FFA631" height="24" class="sc-bRBYWo ccSRck" style="background-color: rgb(255, 166, 49); max-width: 135px; display: block;" data-lazy-src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/facebook-icon-2x.png"><noscript><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/facebook-icon-2x.png" alt="facebook" color="#FFA631" height="24" class="sc-bRBYWo ccSRck" style="background-color: rgb(255, 166, 49); max-width: 135px; display: block;"></noscript></a></td><td width="5"><div></div></td><td><a href="https://twitter.com/BorjaAV" color="#FFA631" class="sc-hzDkRC kpsoyz" style="display: inline-block; padding: 0px; background-color: rgb(255, 166, 49);"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%2024'%3E%3C/svg%3E" alt="twitter" color="#FFA631" height="24" class="sc-bRBYWo ccSRck" style="background-color: rgb(255, 166, 49); max-width: 135px; display: block;" data-lazy-src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/twitter-icon-2x.png"><noscript><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/twitter-icon-2x.png" alt="twitter" color="#FFA631" height="24" class="sc-bRBYWo ccSRck" style="background-color: rgb(255, 166, 49); max-width: 135px; display: block;"></noscript></a></td><td width="5"><div></div></td><td><a href="https://www.linkedin.com/in/borjaarandavaquero/" color="#FFA631" class="sc-hzDkRC kpsoyz" style="display: inline-block; padding: 0px; background-color: rgb(255, 166, 49);"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%2024'%3E%3C/svg%3E" alt="linkedin" color="#FFA631" height="24" class="sc-bRBYWo ccSRck" style="background-color: rgb(255, 166, 49); max-width: 135px; display: block;" data-lazy-src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/linkedin-icon-2x.png"><noscript><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/linkedin-icon-2x.png" alt="linkedin" color="#FFA631" height="24" class="sc-bRBYWo ccSRck" style="background-color: rgb(255, 166, 49); max-width: 135px; display: block;"></noscript></a></td><td width="5"><div></div></td><td><a href="https://www.instagram.com/borjaarandavaquero/" color="#FFA631" class="sc-hzDkRC kpsoyz" style="display: inline-block; padding: 0px; background-color: rgb(255, 166, 49);"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%2024'%3E%3C/svg%3E" alt="instagram" color="#FFA631" height="24" class="sc-bRBYWo ccSRck" style="background-color: rgb(255, 166, 49); max-width: 135px; display: block;" data-lazy-src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/instagram-icon-2x.png"><noscript><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/instagram-icon-2x.png" alt="instagram" color="#FFA631" height="24" class="sc-bRBYWo ccSRck" style="background-color: rgb(255, 166, 49); max-width: 135px; display: block;"></noscript></a></td><td width="5"><div></div></td></tr></tbody></table></td></tr></tbody></table></td><td width="46"><div></div></td><td style="padding: 0px; vertical-align: middle;"><h5 color="#000000" class="sc-fBuWsC eeihxG" style="margin: 0px; font-size: 20px; color: rgb(0, 0, 0);"><span>Borja Aranda Vaquero</span></h5><p color="#000000" font-size="large" class="sc-fMiknA bxZCMx" style="margin: 0px; color: rgb(0, 0, 0); font-size: 16px; line-height: 24px;"><span>Diseñador web y consultor SEO</span></p><table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: large; font-family: Verdana; width: 100%;"><tbody><tr><td height="30"></td></tr><tr><td color="#FFA631" direction="horizontal" height="1" class="sc-jhAzac hmXDXQ" style="width: 100%; border-bottom: 1px solid rgb(255, 166, 49); border-left: none; display: block;"></td></tr><tr><td height="30"></td></tr></tbody></table><table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: large; font-family: Verdana;"><tbody><tr height="25" style="vertical-align: middle;"><td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: large; font-family: Verdana;"><tbody><tr><td style="vertical-align: bottom;"><span color="#FFA631" width="11" class="sc-jlyJG bbyJzT" style="display: block; background-color: rgb(255, 166, 49);"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2013%200'%3E%3C/svg%3E" color="#FFA631" width="13" class="sc-iRbamj blSEcj" style="display: block; background-color: rgb(255, 166, 49);" data-lazy-src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png"><noscript><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png" color="#FFA631" width="13" class="sc-iRbamj blSEcj" style="display: block; background-color: rgb(255, 166, 49);"></noscript></span></td></tr></tbody></table></td><td style="padding: 0px; color: rgb(0, 0, 0);"><a href="tel:34 555 333 444" color="#000000" class="sc-gipzik iyhjGb" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>34 555 333 444</span></a></td></tr><tr height="25" style="vertical-align: middle;"><td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: large; font-family: Verdana;"><tbody><tr><td style="vertical-align: bottom;"><span color="#FFA631" width="11" class="sc-jlyJG bbyJzT" style="display: block; background-color: rgb(255, 166, 49);"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2013%200'%3E%3C/svg%3E" color="#FFA631" width="13" class="sc-iRbamj blSEcj" style="display: block; background-color: rgb(255, 166, 49);" data-lazy-src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png"><noscript><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png" color="#FFA631" width="13" class="sc-iRbamj blSEcj" style="display: block; background-color: rgb(255, 166, 49);"></noscript></span></td></tr></tbody></table></td><td style="padding: 0px;"><a href="mailto:hola@borjaarandavaquero.com" color="#000000" class="sc-gipzik iyhjGb" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>hola@borjaarandavaquero.com</span></a></td></tr><tr height="25" style="vertical-align: middle;"><td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: large; font-family: Verdana;"><tbody><tr><td style="vertical-align: bottom;"><span color="#FFA631" width="11" class="sc-jlyJG bbyJzT" style="display: block; background-color: rgb(255, 166, 49);"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2013%200'%3E%3C/svg%3E" color="#FFA631" width="13" class="sc-iRbamj blSEcj" style="display: block; background-color: rgb(255, 166, 49);" data-lazy-src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png"><noscript><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png" color="#FFA631" width="13" class="sc-iRbamj blSEcj" style="display: block; background-color: rgb(255, 166, 49);"></noscript></span></td></tr></tbody></table></td><td style="padding: 0px;"><a href="//borjaarandavaquero.com" color="#000000" class="sc-gipzik iyhjGb" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>borjaarandavaquero.com</span></a></td></tr></tbody></table><table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: large; font-family: Verdana;"><tbody><tr><td height="30"></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table> 				 			

Siguiendo los pasos anteriores conseguirás una firma HTML similar a esta:

Ejemplo de firma HTML para correo electrónico

Alternativa 1. Utilizar imágenes como firma HTML

Si finalmente por el motivo que sea ves que el HTML no es lo tuyo y es demasiado complicado para ti siempre podrás optar por utilizar una imagen como firma HTML para tu email.

Es más, puede que el código HTML no sea lo tuyo pero estoy seguro de que cuentas con conocimientos básicos de diseño en Word, PowerPoint, Photoshop, Illustrator o Paint.

Por lo tanto, con estas herramientas podrás diseñar perfectamente una firma corporativa para tu empresa.

Por todo ello, si finalmente te decides a utilizar una imagen cómo firma de correo electrónico para tu empresa deberás seguir estos pasos:

  1. Diseña tu firma HTML con el programa de diseño que prefieras.
  2. Guárdalo en formato imagen (Preferiblemente en formato .jpg) con un nombre sin espacios ni caracteres raros.
  3. Sube tu imagen de firma HTML a tu servidor o proveedor de alojamiento web. Recuerda que si no cuentas con este servicio siempre podrás utilizar imgBB.
  4. Cuando tengas la URL de tu imagen subida a internet copia el código HTML que verás a continuación y en la etiqueta <img src=»»> reemplaza el enlace donde por la URL donde estará alojada la imagen de tu firma.
 				 					<table width="600" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #ffa300;">   	<tr>   		<td>  			<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="RUTA DE LA IMAGEN EN TU SERVIDOR"/><noscript><img src="RUTA DE LA IMAGEN EN TU SERVIDOR"/></noscript>  		</td>   	</tr>   </table> 				 			

Alternativa 2. Contratar a un empresa especializada

Si por cualquier motivo todo este proceso se te complica siempre podrás optar por contratar los servicios de una empresa especializada en el diseño de firmas HTML cómo UfirmHTML.com.

Este tipo de empresas se encargarán de diseñar una firma HTML acorde a tu imagen corporativa por poco dinero.

5€ de descuento en UfirmHTML.com
CÓDIGO: BORJAAV

¿Será necesaria una firma HTML para tu empresa?

Si.

Será recomendable contar con una firma HTML para no descuidar la imagen corporativa de tu empresa.

Es más, descuidando la imagen corporativa de tu empresa indirectamente estarás dando imagen de poca fiabilidad y profesionalidad.

Ten en cuenta que una firma HTML plana sin diseño dará sensación de dejadez.

Por lo tanto, te recomiendo encarecidamente que no descuides este aspecto tan importante de tu empresa cómo es su imagen corporativa.

Además, con los códigos HTML que te acabo de facilitar ya no tendrás excusas para tener una firma de correo corporativa profesional en tus emails.

Consejos a la hora de crear una buena firma de correo en HTML

El diseño no siempre será lo más importante a la hora de crear una firma de correo en HTML.

Sin embargo, contar con una firma única, práctica y sencilla será fundamental para que tu posible cliente cuente en todo momento con los datos de contacto de tu empresa.

Por este motivo, a continuación te daré unos consejos básicos a la hora de crear una buena firma HTML:

  1. Se conciso. De nada te servirá incluir en tu firma de email un montón de información irrelevante.
  2. Cuida el diseño de tu firma pero recuerda que menos es más.
  3. Destaca tus datos de contacto. Para ello utiliza un tamaño de letra mayor.
  4. Haz uso de las imágenes siempre que puedas. Dará igual que sea tu imagen propia o la corporativa.
  5. Incluye las redes sociales de la empresa. Con su correspondiente enlace, claro.
  6. No te olvides de incluir una forma de contacto. Tu firma al menos deberás contar con un teléfono o email de contacto.
  7. No pretendas hacer un calco de un diseño en Photoshop. Las firmas para email en HTML estarán muy limitadas en cuanto a diseño. De hecho, solo se permitirán algunas fuentes tan básicas cómo Arial, Verdana, Georgia, Tahoma, Verdana, Trebuchet MS o Times New Roman.
  8. Incluye un texto legal. Por motivos de legalidad será recomendable incluir un texto legal en tu firma HTML.

Ejemplos de firmas de correo originales y elegantes

A continuación te mostraré una serie de firmas de correo originales y elegantes en HTML que han diseñado los amigos de UfirmHTML.com:

Ejemplo de firma HTML elegante

Ejemplo de firma HTML bonita

Ejemplo de firma para correo electrónico corporativa

Guías para configurar tu firma HTML en los diferentes gestores de correo

Bien, una vez tengas lista tu firma HTML será el momento de configurarla en tu gestor de correo.

Para esta tarea te servirán las siguientes guías:

Outlook

Configurar firma HTML en Outlook

Configurar tu firma de correo en Outlook será muy sencillo ya que este gestor de correos es el más popular del mundo y existirán un montón de tutoriales en internet que te explicarán cómo hacerlo.

Sin embargo, para incluir tu firma de correo electrónico en Outlook te recomiendo leer la siguiente guía de UfirmHTML.

¡Solo te llevará 2 minutos!

Gmail

Insertar firma de correo HTML en Gmail

El proceso para insertar una firma de correo HTML en Gmail será algo más complejo que el anterior puesto que este gestor de correos no estará tan predispuesto a este tipo de firmas.

No obstante, con el siguiente tutorial de UfirmHTML podrás incluir tu firma HTML en Gmail en 6 sencillos pasos.

Mail de Mac

Incluir firma HTML en el mail de Mac

Si utilizas Mac ya sabrás que el proceso para incluir tu firma HTML en el mail de Mac será algo complejo.

Por este motivo, los amigos de UfirmHTML han preparado una guía en la que te explicarán paso a paso y de forma visual cómo configurar tu firma de correo electrónico HTML en el mail de tu Mac de forma rápida y sencilla.

Mail en iPhone o iPad

Cómo añadir una firma HTML en tu iPhone o iPad

Si necesitas añadir tu firma de correo HTML en tu iPhone o iPad te recomiendo utilizar la guía de UfirmHTML ya que, de esta forma, aprenderás hacerlo en solo 5 minutos.

¡Vamos! ¡No seas perezos@!

Thunderbird

Cómo configurar firma HTML en Thunderbird

Si eres un aficionado al gestor de correos electrónicos de Firefox en esta guía de los amigos de UfirmHTML podrás aprender a configurar tu firma HTML en Thunderbird rápidamente.

Conclusiones sobre la utilización de firmas HTML en HTML

Cómo has visto a lo largo del post querido lector, crear una firma HTML para el correo electrónico será fundamental para tu empresa.

De hecho, no tenerla dará una imagen de dejadez y baja profesionalidad.

Por este motivo y, gracias a esta guía, ya no tendrás excusas para contar con una firma de correo electrónico profesional y seria para tu negocio.

De todos modos, cómo siempre digo, si por lo que fuese esta tarea te resultase muy complicada siempre podrás optar por contratar los servicios profesionales de UfirmHTML y ellos te ayudarán con todo el proceso.

Ahora te toca a ti querido lector ¿Te ha servido la plantilla de firma HTML? ¿Cuentas ya con una firma HTML profesional para tu empresa?

Te leo en los comentarios y nos vemos en dos semanas.

¡Hasta la próxima!

¡Espera! Seguro que estos artículos también te interesan:
Borja Aranda Vaquero 01

Artículo escrito por:

Borja Aranda Vaquero

¡Hola! Me presento. Me llamo Borja y soy un consultor SEO y diseñador web especializado en WordPress que ha ayudado a más de 100 empresas a conseguir una buena visibilidad en internet.

¡Suscríbete a este blog!

Y consigue en tu email las últimas novedades en SEO, WordPress y CRO además de un ebook con tres trucos infalibles sobre SEO, WPO y CRO.

También podrás escribirme a: