How to Install HTML Email Signature for Google GMail

If you want to install a HTML email signature into your Gmail, you have come to the right place. GMail users are in luck as the installation process is very straight forward and simple. Assuming that you have a HTML email signature created already, follow the 4 easy steps below to get your great looking email signature installed.

If you don’t have a HTML signature, you may read my tutorial, Create a HTML Signature in Apple Mail on Lion OS X 10.7 to get started on creating one yourself or you may contact me to create one for you at a small cost.

Step 1: Open your HTML file

Drag your HTML email signature file into your browser. For this example, I use Safari but you may use any browser of your choice.

Step 2: Copy Signature

Select your entire signature design (Command+A) and Copy (Command+C). On other broswers where you cannot select the content by highlighting it, go to Edit > Select All and then Edit > Copy

Step 3: Open GMail Settings

In Gmail, you may see a Machine Bearing icon on the upper right hand side. In the drop down menu, go to Settings.

Step 4: Paste HTML Content and Save

Under the General tab in Settings, scroll down till you find the Signature section. Click inside the Signature edit box and go to Edit > Paste to paste in the HTML you have stored in the clipboard (Command+V). Click “Save Changes” right below the Signature edit box.

Summing Up

That is it! You are done! If you run into any problems installing your HTML email signature into your GMail account, let me know by writing in the comments section. I will try my best to help or maybe a fellow reader may. I hope this tutorial is helpful to you and it would be a great pleasure to see your creation so please showcase that wonderful signature you have created!

UPDATE 08-30-2012: Due to the high number of recent requests to create custom email signatures, I created a service section for signature design and development. If you would like me to create a signature for you, please visit www.mydesignpad.com/htmlsignature/ for more info.

Follow responses through the RSS 2.0 feed | July 19th, 2012 | 316,907 views

80 comments »

  1. February 12th, 2016

    Tim Cai says:

    Brad, what seems to be your problem when you followed my tutorial? I’ll see if I can help.

  2. March 21st, 2016

    SURUCHI says:

    I am trying to set my clients signature with Hyperlinks and images in gmail but not getting successful.
    Its a very important task if you please help me out ?

  3. May 15th, 2016

    Thank you

  4. May 29th, 2016

    Carlos says:

    Hi , wonderful tutorial im having problems when people recieve my mails they are not able to see the pic but when i compose a mail Im able to see it, can you help me

    Cheers

    Carlos

  5. May 29th, 2016

    Tim Cai says:

    Carlos, the images have to be hosted in order for the images to be visible after it is sent out to the recipient. The images are visible to you because the images are loaded on your local computer.

  6. May 29th, 2016

    Tim Cai says:

    Dear Suruchi, in order to do this, you need to create a html email signature with images hosted on a web server. If you still need help, you may consider using my service where I can take care of this for you. Here is the link: http://mydesignpad.com/htmlsignature/

  7. June 4th, 2016

    yadhu says:

    I am not getting image.

  8. June 22nd, 2016

    HTML creation on my email

  9. June 25th, 2016

    swapnil says:

    when i am pasting the email signature i am not able to see anything in gmail signature box.
    plz help me out

  10. July 21st, 2016

    Tim Cai says:

    Preview/copy the HTML design with Google Chrome or Safari and then paste it into the Gmail signature box. That should sort the problem.

  11. July 21st, 2016

    Tim Cai says:

    In order for the images to load, the image have to be hosted on a web server. If you need help, check out my service page: http://mydesignpad.com/htmlsignature/. I can help you write up a proper HTML email signature file and host the images for you to ensure that the signature will work perfectly.

  12. July 28th, 2016

    Looking to insert an email signature into our gmail accounts that includes images and hyperlinks – can you assist?
    -Holly

  13. July 29th, 2016

    Ramona says:

    Hi

    I have 3 signature footers to upload – I designed the image – inserted hyperlink – they work in outlook but not in gmail

    I have even uploaded them to server

  14. July 30th, 2016

    Tim Cai says:

    Hi Holly, I would love to help. We can communicate via email for details. I have already written an email to you. Please check and reply. Thanks.

  15. August 3rd, 2016

    Cesar says:

    The stye has to be inline in order for most mail clients to read it also you have to use tables instead of divs.

  16. August 19th, 2016

    Tim Cai says:

    Cesar, you are correct. Email programs aren’t as sophisticated as web browsers. Thanks for sharing and helping out here.

  17. September 23rd, 2016

    Everything comes over except there is a large gap next to our logo. Have tried both Copy and Select All and both produce a large gap.
    Help?

  18. October 13th, 2016

    Tim Cai says:

    Caroline, the html codes have to written in a very specific way in order for the email programs to translate it well. Even then there may be a little bit of a spacing and font issue. Nothing major though.

  19. November 23rd, 2016

    prajwal says:

    Caroline, the html codes have to written in a very specific way in order for the email programs to translate it well. Even then there may be a little bit of a spacing and font issue. Nothing major though.

  20. November 23rd, 2016

    prajwal says:

    Is there any way to find out html code of gmail signature? I want to use my gmail signature for my outlook account but outlook doesn’t allow to add images in signature section. Is there any simple solution for it. I am not very technical. Thanks for your help.

  21. December 20th, 2016

    Ati says:

    Everything work like charm if I follow your tutorial. But one point which I am facing why it’s not work if I copy paste from notepad?

  22. January 3rd, 2017

    Brian says:

    Hey Tim. I had you design my signature a year ago. Looks great and working well. I have been able to set it up through Apple mail without issue. I am not trying to set it up through Google Mail, through the regular gmail.com. I followed your steps and pasted it into the signature box. After I save and try to compose an email, the html just shows up rather than the signature. Any thoughts?

  23. February 6th, 2017

    […] メールの署名 (Webサイトへのリンクや電話番号も載せる) […]

  24. February 14th, 2017

    Tim Cai says:

    Hi Brian, make sure you have selected HTML on your Google Mail Reading and Composing settings. Also using Google Chrome to preview and to do the select all and copy step during the installation. Good Luck!

  25. February 14th, 2017

    Tim Cai says:

    It works best when you preview the html design via Google Chrome. Perhaps, Notepad doesn’t render the html codes properly and makes it less compatible with Google Gmail.

  26. February 14th, 2017

    Tim Cai says:

    Do you have the html codes of your gmail signature? If not, try this: select and copy your email signature from your gmail signature section on your gmail settings. Paste the design into Google Chrome. If you are able to see your email signature properly, you may do a select all and copy. Then go to your Outlook Preference> Signatures and paste it into the preview window after you create a new email signature. Hope this works.

  27. March 6th, 2017

    marpad says:

    Hi,

    I’ve made a nicely formatted html5 file with my email signature included and uploaded it to my server. After copying & pasting it into Gmail’s signature section it shows up properly. However, after I send an email with this signature it falls apart both at the recipient’s side and in the sent email section.

    The html5 file contains embedded/inline css formatting with a few specific #id related styling. It seems Gmail “forgets” these specific margin settings. Can you suggest a workaround for this?

  28. March 6th, 2017

    Maud says:

    Hi Tim!
    When I drag my html file to my browser (tried Chrome, Firefox and Safari) I only see the html text, not the signature I made. How can I fix this?
    Kind regards, Maud

  29. March 11th, 2017

    Tim Cai says:

    That is very odd. Make sure your sure your file ends with “.html”

  30. March 11th, 2017

    Tim Cai says:

    Most email programs aren’t as advance as current web browsers. To get the best results, stick with simple HTML using tables and cells and primitive inline styles.

Leave a comment * Required fields.


About

  • "Sure someone else could have created a greater logo redesign for EME Lighting but I was sold on Tim’s diligence & reliability plus I love our new logo! It is fresh, symbolic of who we are while staying in line with our brand intention."

    - Bill Lee
    CEO of EME Lighting
  • "Tim is a trustworthy and effective designer. He redesigned the entire visual identity system for my company & I am extremely pleased with it. As the CEO of a company with over 3000 employees, I would recommend Timmy to anyone looking to have some serious design work done."

    - Tony Ou
    CEO of Senqiu Lighting
  • "Tim effectively designed my website and newsletter. What impressed me the most was his ability to create the images, style and design I was looking for. I highly recommend him if you are looking for someone reliable, flexible and talented."

    - Christine M.
    Owner of Acupuncturebody
  • "Tim has a great personality that makes him a pleasure to work with. He is focused, hard working & always has an attention to details. He has great curiosity and constantly strives to learn & develop himself taking his work to the next level"

    - Slava S.
    Director of Creative Services at STV
  • "Tim conceptualized original ideas & executed the design brilliantly. He always made sure the highest technical & design standards were met. I could always count on him to translate the client vision into reality."

    - Linda G.
    VP Biz Dev. at Real Estate Arts
  • "Tim is a highly talented designer. He has excellent technology skills, amazing dedication & terrific interpersonal abilities."

    - Michael S.
    AD at Real Estate Arts
  • "Timmy is a very talented designer, he is passionate and reliable, his work is always creative & on time. He’s a good person with lots of energy, which makes him a pleasure to work with."

    - Jess L.
    AD at Sudler & Hennessey
  • "Timmy got a great system for helping you figure out what you want, need & putting those ideas down into a tangible product. He has done 3 sites for me already & anyone I have recommended him to has called me back to thank me."

    - Vahram S.
    Owner of Brooklyn Body