Descarga mi plantilla HTML para firmas de email

Hace poco he cambiado mi firma para emails aprovechando que he renovado la imagen de mi web y quiero regalaros la plantilla de firma de email en HTML para que hagáis la vuestra propia.

Es importante tener una firma de email en HTML en lugar de una imagen fija por varias razones:

  • El destinatario puede hacer click en diferentes enlaces de tu firma (redes sociales, web…)
  • El destinatario puede copiar tus datos si lo necesita en vez de tener que teclearlos
  • Si el servidor de correo del destinatario no carga las imágenes, por lo menos podrá ver el texto

Instrucciones para editar la firma de email

Debes tener unos conocimientos básicos de HTML para editar el archivo

  • Abre el archivo HTML en un editor de texto
  • Sustituye los datos de contacto con cuidado de no eliminar ninguna etiqueta de html
  • Modifica los enlaces a redes sociales (puedes eliminar los iconos que no te interesen)
  • Crea tus propios iconos y línea decorativa o edita los míos con un programa de diseño vectorial tipo Illustrator o Inkscape
  • Sube tu foto, logo, iconos y línea decorativa al hosting de tu web. Si no lo haces, las imágenes no se verán en los email de otros usuarios
  • Sustituye los “src” de las imágenes por los enlaces donde hayas alojado tus imágenes
  • Cambia el color del texto por el que tú prefieras
  • Sustituye el aviso de LOPD por el tuyo en el caso de que lo tengas al día. Si no eres empresa/autónomo elimina el párrafo

Cómo incluir la firma en HTML en Gmail o similar

Para incluir la firma en tus aplicaciones de correo haz lo siguiente:

  • Edita y guarda tu firma en html (con las imágenes que incluyas alojadas en un hosting)
  • Abre el archivo html en un navegador de internet (Firefox, Chrome o similar)
  • Selecciona la firma con el ratón y con el botón derecho pincha en “copiar”
  • Vete a la aplicación que utilices para enviar emails y encuentra la opción para crear una firma de email personalizada
  • En el recuadro para incluir la firma pega el contenido de tu portapapeles y ya la tendrás lista

Esta es mi firma de email en HTML:

plantilla firma email html lauralofer

Ejemplo de firma de lectores

La ilustradora Nuria Ayma ha creado su propia firma de email a partir de mi plantilla. Me ha dado su permiso para que la comparta con vosotros. ¿A que es super bonita?

firma email nuria ayma

Qué encontrarás en la descarga de mi plantilla de firma de email en HTML

He preparado una carpeta comprimida donde encontrarás:

  • El archivo HTML con la firma
  • Iconos de redes sociales vectoriales en formato .ai

Puedes descargarlo desde mi librería de recursos gráficos:

¿Qué te ha parecido? ¡Enseñanos tu firma! Deja un comentario.

Lauralofer

About Lauralofer

Soy Laura López y ayudo a diseñadores freelance y agencias creativas a conseguir mejores clientes y aumentar sus tarifas. Amante de los gatos. :) Si vendes servicios de diseño y quieres evolucionar en tu negocio apúntate a mi newsletter y accederás a mi charla gratuita "Atrae clientes online que contraten tus servicios de diseño sin regatear"

67 Comentarios

  • Hola Laura,
    Me ha encantado el post, muy útil. Pero no he podido incluir la firma a mis email porque outlook me dice que la firma supera la longitud máxima permitida. A ti te ha dejado incluir un código html tan largo?

  • freelancer dice:

    Hola, he estado en busca de opciones como profesional independiente, encontré este sitio, creo que es una buena opción, pero yo sólo estoy empezando a usarlo, qué les parece?
    Freelancer

  • Núria dice:

    Hola! Me ha ido muy bien tu tutorial y no me dió problema. Pero hoy he querido corregir el texto y al volver a pegarlo en la configuración de la firma (utilizo Mac) los elementos se centran y los iconos me aparecen más grandes. No consigo averiguar qué he hecho mal…
    Ésta es mi firma: file:///Users/nuria/Dropbox/Public/firma_mail/firma-email-nuriaayma.html
    A ver si me puedes iluminar un poco… Muchas gracias! 🙂

    • Lauralofer Lauralofer dice:

      Hola Nuria

      No me deja ver el archivo! Quizás se te haya borrado alguna etiqueta html o similar al sustituir por tus datos. ¿Cuando lo has corregido en el html se veía bien? ¿Sólo se te ha desconfigurado al copiar y pegar en tu correo de mac?

      • Núria dice:

        vale, no se como copié el enlace… https://dl.dropboxusercontent.com/u/16772737/firma_mail/firma-email-nuriaayma.html
        Yo juraría que no borré ninguna etiqueta html. Y si, solo se me descuadra al pegarlo en mi correo de Mac, pero en el html yo lo veo bien.. Además, al pegarlo también me pasa que no muestra los acentos y está en UTF-8, no se deberían ver?
        Gracias!

      • Núria dice:

        Ya lo he solucionado, el problema no estaba en el html de la firma sino en como pegaba la firma al gestor de correo de Mac. No se si es muy normal, pero los archivos .mailsignature estaban bloqueados y con una codificación errónea. Listo, gracias igualmente Laura!

        • Lauralofer Lauralofer dice:

          ¡Me alegro de que lo hayas podido arreglar! No me ha dado tiempo a contestar a tu último comentario pero te iba a decir que parecía que el problema estaba en si estabas copiando la firma correctamente. Por cierto, te ha quedado una firma preciosa!! ¿Te gustaría que la incluyera en mi post a modo de ejemplo? Si quieres puedo difuminar el teléfono por confidencialidad y dejar tu web para que mis lectores te visiten. ¿Qué te parece?

  • Hola Laura.
    Primero que nada, muchas gracias por tu generosidad y por regalarnos esta plantilla.
    Tengo una pregunta. Dices que la usas en Mac Mail, resulta que yo también y mas encima tengo retina por lo que estaba haciendo una firma PNG mas grande para luego darle los parámetros de tamaño en el HTML, pero resulta que al pegar la firma y luego traerla al correo, no respetaba el tamaño dado en el código sino que se mostraba la imagen en tamaño original. Luego intenté exportar la imagen a tamaño normal y aun así se ve pixelada.

    Alguna idea?
    Muchas gracias desde ya!

    • Lauralofer Lauralofer dice:

      ¡Hola Claudio!
      No sé muy bien si he entendido el problema pero siendo una maquetación HTML por tablas (porque es para email) tendrás que modificar el ancho de las tablas para ajustarlas a las dimensiones que quieres. Por otro lado, la imagen debe tener un tamaño concreto también, si el tamaño indicado en el html es mayor que tu imagen entonces se verá pixelada. Tienes que respetar el tamaño tanto en las dimensiones de la imagen como en el código html. No sé si me he explicado bien o si con esto te ayuda a ver dónde está el error. Un abrazo!

    • Yuz Guerra dice:

      Hola! Yo tengo el mismo problema, al pegar la firma en mail Mac, las imágenes las hace gigantes y cuando lo pruebo en el correo, se ve demasiado grande. La imagen y también los iconos de RRSS. Espero me puedan apoyar 🙂

  • vtisnes dice:

    Hola Laura,
    muchas gracias!!! Ha sido muy útil!
    Pero tengo una pregunta, yo también uso el mail de mac, pero no he podido establecer esta firma en html. Puedes decirme como puedo hacerlo?
    Gracias 🙂

    esta es mi firma
    http://www.valeriatisnes.com/firma_correo/firma_correo.html

    • Lauralofer Lauralofer dice:

      Hola Valeria
      ¡Te ha quedado genial la firma! Yo en mi mac lo que hago es abrir en el navegador la firma para que se visualice como quedaría con las imágenes y seleccionarla entera con el ratón. Después lo pego en la caja de firmas del mac y listo. ¿Habías probado a hacerlo de esa manera? ¿Qué problema te surge?
      A ver si te puedo ayudar.

    • Lauralofer Lauralofer dice:

      Otra cosita, ten en cuenta que has añadido a la firma tu email como imagen y que para alguien que quiera copiarlo de ahí le va a resultar un poco “coñazo” tener que transcribirlo a mano en lugar de copiar y pegar e incluso puede que lo escriba mal. Yo te sugiero o bien que lo añadas con texto, o que pongas un enlace de “mailto” en al imagen. Un abrazo!

  • Nícolas dice:

    hola laurita, estaba buscando el post de editar una ficha personalizada cuando vi tu foto y me enamoré de ti y me olvidé del post, y ahora ando dejandote un comentario, y bueno luego ponerme a leer el post, =) eres linda, ojalá encontrara una chica con las mismas aficiones tecnológicas que yo y a la vez hermosa como tú que fuera mi musa 😛

  • Gracias por el post, muy útil y claro, también agradecerte el ejemplo por que acaba dando ideas.
    Lo mismo acabo por intentar contratarte y dejar de meterme en estos berenjenales.

    Saludos y gracias !

    • Lauralofer Lauralofer dice:

      Carmen, no necesitas contratarme para esto mujer! Es muy sencillito y seguro que te queda genial. Si tienes dudas escribe por aquí y te intento ayudar. Un abrazo!

  • Maria Eugenia dice:

    Hola Laura, yo quiero hacer mi firma con ese formato pero no soy diseñadora ni tengo conocimientos de html. Puedo hacerla de todas maneras? Uso Mail de Mac.

  • Joan Morci dice:

    Precisamente ayer cambie la mía, no esta mal como la deje pero la tuya se ve más elegante y en un medio como el nuestro, hay que cuidar todos los detalles posibles. Gracias Laura, a ver si la pongo en practica.
    Saludos.

  • Jose dice:

    Muchas gracias por el artículo, llevo tiempo buscando cómo colocar la firma en Gmail, voy a probar a ver 🙂

  • Godo dice:

    Hola, no encuentro el link para bajar la plantilla… me puedes ayudar

  • Rodri Vilar dice:

    ¡Hola Laura! Grandisimo trabajo el tuyo, felicidades. Queria comentarte si sabes como incluir la firma en la apk de gmail. Ya que por motivos de trabajo me muevo mucho y suelo contestar “al vuelo” ¡Gracias!

    • Lauralofer Lauralofer dice:

      ¡Hola! Creo que en gmail tienes que abrir la firma en tu navegador de internet y seleccionar el contenido para copiarlo y pegarlo directamente en la caja de la firma de gmail (con las imágenes que utilices alojadas en un servidor, no en tu pc)

  • ferran dice:

    Hola Laura,

    horas llevo con esto y no soy capaz, no hay manera de que al copiar la firma en html, abierta en chrome y en el text edit me la abra en html, trabajo habitualmente con safari, tego un iMac nuevo con Gran Capitan de sistema operativo y m,e estoy volviendo loco, jeje, ¿me puedes decir por favor si quiás no es válido para mis sistema operativo o en que fallo? Gracias

    • Lauralofer Lauralofer dice:

      Hola Ferrán
      No la abras en HTML, abre la firma en firefox o el navegador que utilices y pincha y arrastra para seleccionar el contenido y luego pégalo en el hueco de la firma tal cual. Es decir, no copies el código, copia la vista previa. Esperi que te sirva…

      • ferran dice:

        Hola Laura,

        pues no me ha servido, al hacerlo los iconos de las redes sociales y web no són linkables, no llevan enlace y al clikar en boton derecho no me aparece la opción de añadirlo.

        Saludos

  • jcarlosc84 dice:

    Hola Laura. He seguido los pasos y he creado una firma bastante chula, pero tengo un problema, y es que algunos programas como Thunderbird bloquean las imágenes en los correos. ¿Sabes alguna manera de solucionar esto? Gracias!

    • Lauralofer Lauralofer dice:

      Hola Juan Carlos
      Mis conocimientos técnicos no llegan a tanto jeje… No uso thunderbird y me temo que si te bloquean las imagenes de los correos tendrá alguna opción que se pueda deshabilitar pero creo que no te puedo ayudar. Ya lo siento

  • Hola Laura, en verdad un espectáculo la plantilla, la he modificado un poco para que se adapte a las vistas en celulares (no quedó perfecta pero bueno) lo único malo es que hasta ahora no he podido sacarle un recuadro azul del hipervínculo que aparece cuando lo abro en un celular, en una PC o notebook anda de 10.

    Te agradezco por todo lo que nos brindas y aportas desde tu experiencia y conocimientos.
    Esta es mi firma:
    http://rosariopaginasweb.com/firma-pablo-bruno.html

    Un beso enorme desde Rosario, Argentina
    Pablo Bruno

  • Ya corregí lo del recuadro, había imágenes a las que no les había puesto el border=”0″, ahora funciona bien

  • dagosalas dice:

    Hola Laura!
    una duda, estoy haciendo pruebas con una firma en HTML, utilizo Outlook, entonces he notad que tengo que subir el HTML y las imágenes a un servidor para que puedan desplegarse en las firmas, igual si envío un correo la otra persona tiene que “ver” esas imágenes en línea (son muy ligeras, asi que no se nota) En el caso de Outlook para windows, al copiar el HTML las imágenes sí son embebidas automáticamente y no dependen de la referencia externa. No sé si así sea el comportamiento de las Macs (seguramente) pero ¿se podrá hacer algo para que las imágenes se queden embebidas localmente y no se tengan que cargar remotamente? Saludos!

  • Esther ConHache dice:

    Hola Laura, gracias por la plantilla a sido muy útil! pero si no tenemos un servidor contratado como podemos hacerlo? Tengo las img subidas a mi unidad de google drive, tendría que cambiar algo del código html?

    • Lauralofer Lauralofer dice:

      Creo que podrías vincularlas con el enlace de Google drive directamente, tendrás que sustituir todas las imágenes de mi plantilla por las tuyas.

  • Anabel dice:

    Hola Laura,

    He intentado descargarme la plantilla HTML pero no me ha llegado nada al mail, solo la suscripción al newsletter que hecho junto a otro mail para descargar tu ebook ¿Como podría realizar la descarga?

    Gracias de antemano.

  • Nataly Giraldo dice:

    ¡Hola!
    Me encanta esta página y tu diseño, hice el mío a partir del tuyo y me quedó algo así file:///C:/Users/G40-30%20CELERON/Downloads/mio.html
    Pero me gustaría saber cómo puedo cambiar los íconos y el color de ellos ya que no se como abrir el archivo .Al
    ¿Me podrías ayudar por favor?

  • macarena dice:

    ¿Cómo se ve en móvil?

  • Elayza Zarraga dice:

    Hola qué tal Laura. Excelente post, me encanta tu firma… Sólo un detalle: pedí descargar el archivo y aún no he recibido, además que no sé si comprendí mal pero, cuando leo “descarga de mi plantilla de firma de email en HTML” con su detalle de una carpeta comprimida donde se encuentra: “- El archivo HTML con la firma, – Iconos de redes sociales vectoriales en formato .ai y que se puede descargar desde tu librería de recursos gráficos”, voy directo al botón donde me dice que me llegará un material contentivo de “Cobra lo que te mereces”. ¿Viene con este los archivos de la firma? Mil gracias por tu respuesta…

    • Lauralofer Lauralofer dice:

      Hola Elayza
      Para poder acceder a la librería de recursos tienes que estar dado de alta en mi newsletter. De esta manera recibirás automáticamente un email con mis regalos de bienvenida y las instrucciones para acceder a la librería. Tendrás que guardar el enlace de acceso en tus favoritos ya que no hay otra manera de poder entrar a los recursos.

      Si no te deja darte de alta puede que sea porque ya estás en mi lista de correo, haz una búsqueda en tu bandeja de emails para localizar este mensaje de bienvenida. Si no lo encuentras avísame por email para que te lo envíe de nuevo o date de alta con un email diferente. ¡Gracias!

  • Angel Flores dice:

    Hola Laura 😀 Pasa que quise implementar la firma en mi web de WordPress, pero no tomé en cuenta que no es responsive y se ve muy genial, pero queda demasiado grande si se ve desde móviles, puedes ayudarme con eso? Excelente trabajo, soy un gran fan, sé que la finalidad de la plantilla es ser usada en e-mail marketing, pero me gustó demasiado que quise ponerla en mi web, sé muy poco de HTML pero de verdad me gustaría mantener el diseño que logré con esta plantilla.

  • Walker Arenas dice:

    Hola laura! No he podido descargar la plantilla, ya indique mi correo, me llego el correo y le di al boton confirmar tambien. No doy con la plantilla :/

  • Hola, yo tengo esta firma: http://www.yakumama.com.pe/Firmas/index.html como verás la he ordenado en tabla, aún no están los vinculos, eso lo haré después, si sé como hacerlo, el problema es que cuando copio la firma de la página web, y lo pego en el gmail, no lo pega como en el formato de la tabla que se ve en la web, si no se ve desordenado una imagen debjao de otra, como puedo solucionar esto para que se pegue como en la web. Gracias