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 sin ser un diseñador web.

¡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 src="https://borjaarandavaquero.com/wp-content/uploads/2019/10/borja-aranda-cuadrado.jpg" role="presentation" width="130" class="sc-cHGsZl bHiaRe" style="max-width: 128px; display: block;"></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="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;"></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="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;"></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="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;"></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="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;"></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="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);"></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="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);"></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="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);"></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="RUTA DE LA IMAGEN EN TU SERVIDOR"/>  		</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 me dedico a incrementar la visibilidad de negocios en internet. Actualmente he ayudado a más de 100 empresas a conseguir una buena visibilidad en internet.

¿Quieres saber más?

28 comentarios

    1. Gran trabajo Caro!

      Para los saltos de línea te aconsejo que uses las etiquetas párrafo o

      De esta manera la información quedará correctamente maquetada

      Un saludo!

  1. Hola!! Muchas gracias Borja! Queda muy bien la plantilla!
    La tengo ya lista incluso la abro con el explorador y se ve fenomenal pero cuando selecciono el archivo en el thunderbird no se ve bien. Las lineas son rojas con puntos raros y no se ve la foto….

    Me abre dejado algo??

    Muchas gracias!!

    1. Hola Maldi!

      Así sin ver el código o un pantallazo es complicado que te pueda ayudar…
      Por lo que me dices, debes de tener mal la ruta donde tengas alojada tu imagen, por eso no se ve bien…respecto a las lineas rojas con puntos no se a que te refieres…

        1. Hola Maldi,

          He revisado el código y está bien la línea de puntos roja debe de venir de thunderbird. Revisa las extensiones que tengas instaladas porque tiene pinta de que viene de ahí…

  2. Buenas, queria insertar una imagen JPGE (la he guardado en Drive y he obtenido el enlace para compartir), a mi firma de Outlook, he seguido los pasos que has recomendado, pero nada, al redactar un correo me sale todo el texto que he escrito, y no la imagen.
    Me puedes ayudar?
    Un saludo

      1. Nada, no se que es lo que tengo que copiar ni donde.

        La copio aqui, y si que sale, pero pego esto mismo en mi firma de Outlook y sale el texto que he escrito, no la imagen.

  3. Consulta….tengo propia firma HTML en mi Mac, pero a las personas que le envío un mail con esta firma, los iconos de redes sociales con link llegan muy grandes al destinatario, como puedo controlar eso??

    1. A las imágenes las tienes que dar la propiedades de ancho (witdth) y la altura (height). De esta manera no se desfigurarán la imagenes de la firma HTML ya que mediante este código se fija lo que mide de alto y de largo.

      Con estás propiedades el código para cada imagen debería de quedar así:

  4. Muchas gracias!!!…funcionó!!!…lo comprobé enviando desde Mail a outlook y abriendo el mail desde la web del outlook….pero también veo que entre mis iconos de se despliega un guión bajo que no tengo como sacarlo!!…lo otro es que no puedo alinear el icono anterior de «Santiago de Chile» con esta palabra. te envío el código de uno de los iconos de mail y redes sociales, cada código de cada icono es igual…te adjunto imagen vista desde outlook web. Muchas gracias por tu ayuda Borja. https://uploads.disquscdn.com/images/86bbe8b4b5d27f688fbc07f7a458c69ce844609f48081ccb20c9bb8a8c773360.png


    1. Prueba a poner el icono que no puedes alinear con la propiedad «display:inline»

      Respecto al guión «azul» prueba a poner a cada imagen el atributo border=»0″

      1. Gracias por responder!!!
        Nada, sigue llegando igual la firma… 🙁

        Favor revisa tu mail…muchas gracias!!

         Santiago – Chile

          1. Copié el ejemplo de arriba y lo hice todo de nuevo partiendo de ahi…quedó espectacular…el código que tenia era terriblemente malo….
            Muchas gracias Borja!!!
            Saludos!!

          2. Si, quedó perfecta y con un código muy reducido. Lo único que la firma llega muy pequeña al destinatario, lo pruebo enviando mail de prueba a mi cuenta hotmail….ya descubriré a que se debe…o a ti se te ocurre algo??. Copio el código en un archivo .Signature del mac que bloqueo para que el sistema operativo cambie el código.

  5. Hola! Muchas gracias por la explicación, queda todo muy claro!! Sin embargo tengo una duda… al pegar en gmail mi firma, en lugar de aparecer la imagen a la izquierda, la raya que la divide del texto, y el texto a la derecha, me aparece la imagen encima del texto y desaparece la línea divisoria. Al abrirla en el explorador sí que se ve correctamente (es de ahí de donde la copio para pegarla en gmail). ¿Qué puedo estar haciendo mal? Gracias!! 🙂

    1. Lo único que te puedo decir es que que se vea bien en el navegador no implica que se vea bien en el gestor de correo. Muchas veces es imposible que se visualice bien en todos los gestores de correo. De todos modos, por aquí es complicado que de con la solución…

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Suscríbete!

Y consigue en tu email las últimas novedades en SEO, WordPress, WPO y CRO.

También podrás escribirme a: