How To Add Social Media Icons to Gmail Signature [UPDATED]

After my blog posts on adding social media icons in Hotmail and Outlook signatures. This tutorial enables Gmail users to take of this advantage as spicing up their personalized email signatures too.

I will elucidate the steps to add these Google Plus, Facebook, Twitter, LinkedIn, RSS etc icons to your Gmail Signature. Here is a preview of my personalized email signature.

Unfortunately, Gmail signatures does not gives us ability to use HTML in personalized signatures. So, basically you need to get the social media icons and paste it in the signature. Here are the steps and a video tutorial :

5 Simple Steps to be Followed

Step 1 Choose the social media icons you want in your email signature. Here are some of my favorite social networking icons in the form of skillfully hand-hewn and lovingly crafted package. (Hat tip Komodo Media).

Click on Edit using JS Bin on top right corner < Copy the URL of the desired social media icon which starts with http:// ends with a .png at the end (public link of icons). For example: http://therohanaurora.com/files/downloads/icon/facebook_16.png

OR

Step 1 Upload your selected icons from above pack to a web-based file hosting service such as Dropbox, Picasa, SkyDrive etc. (How to use Dropbox ? [VIDEO]). Create public links on your own …

Step 2 Open your Gmail inbox < Settings < General < Select Use Signature

Step 3 Type your signature text < Click Insert Image < Paste the URL copied in Step 1 < Select the icon < Click on the globe to make it a hyperlink < Add your personalized URL where you want the user to redirect.

Step 4 Repeat this procedure in Steps 1 and 3 < Save Changes

Hope, things become more clear, when you watch this video.


This personalized signature may also bring plenty of traffic to your blog or Facebook fan page. If there are any ambiguities, don’t forget to leave a comment below.

Update [24th July, 2011] : Google Plus One Icon

I have also added the new Google Plus button in the above download packs. Make sure, you add the new social networking touch too.

Update [3rd Feb, 2012] : Update

Added Yelp, about.me and IMDB icons too.

Update [26th June, 2012] : Update

Pinterest and Instagram icons added after so many requests. Anything else?

Tags: , , , , , , , , , , , , , ,

101 Responses to “How To Add Social Media Icons to Gmail Signature [UPDATED]”

  1. social media marketing February 2, 2011 at 9:36 pm #

    Wow! Thank you! I continually needed to write on my site something like that. Can I implement a portion of your post to my website?

    • Rohan Aurora February 3, 2011 at 7:32 pm #

      Sure. Don’t forget to give a hat tip by linking back to this blog.

      • Mickey July 20, 2012 at 3:00 pm #

        This was a HUGE help! Thank you! Any idea how to get the skype to work? I put in the icon, but how do I get it to open Skype?

  2. landscaping Hockessin March 7, 2011 at 12:47 am #

    How did you make a site look this awesome!?

  3. Muhammad Abdulkhalek March 11, 2011 at 10:17 am #

    gr8 job
    thx

  4. Khwaja March 12, 2011 at 9:50 am #

    great work nice & thanks

  5. Veronika March 23, 2011 at 7:40 am #

    Hey …thanks for the great post.

    Previously I had been using a service to add my social media icons but was quite dismayed at the prospect of having their logo emblazoned on my signature.

    This provides a much more professional approach.

    Respectfully,
    MissTeaLady

    • Rohan Aurora March 23, 2011 at 7:29 pm #

      Reverence to you Veronika for your kind words :)

  6. Craft Cocktails May 27, 2011 at 2:00 am #

    Thanks so much for this informative tutorial, and for sharing the pics! Cheers!

  7. Rokia Ahmed June 21, 2011 at 3:58 pm #

    Thnx!
    But the icon doesnt show on my Signature box!!

  8. Akhil June 25, 2011 at 4:53 pm #

    First of all, thank for for writing this post. It is very valuable indeed.

    I installed the skype button on my gmail signature but how can I direct the user to call me by clicking on the link.

    Is there any way? Does gmail support this? If not, how can I place at least my skype id without putting any web link (since gmail asks for a url but I just want to place my skype id by way of plain text)?

    Thanks in advance for your feedback!

    Akhil

    • Matt March 15, 2012 at 4:19 am #

      I was wondering the same thing. I don’t think there’s a way, because Skype profiles aren’t as public as the others. Nevertheless, I’m very grateful for this very helpful post!

  9. Sook Xavier July 12, 2011 at 8:38 am #

    this post is very usefull thx!

  10. Ha Le July 15, 2011 at 2:21 pm #

    This post is very helpful. Thank you! However, I encountered a problem that I didn’t see in your video, which is there is a blue box around the images after I embedded the link. Do you know how to get rid of that box? Thanks!

    • Rohan Aurora July 15, 2011 at 6:30 pm #

      Thank you for the comment. The blue box may be shown on the icons for some email clients such as Hotmail etc. Don’t worry it does not appear on the receiver’s email id. Its just a representation of the hyperlink.

  11. Andrew October 17, 2011 at 2:48 pm #

    I have been trying to add the facebook widget to my signature and I cannot get paste the insert image stage. Gmail is not recognizing the URL. Is it because I am using the most updated version of Gmail?

    Thanks

    • Rohan Aurora October 17, 2011 at 9:55 pm #

      All you need to do is make the widget (icon etc) a hyperlink. Its explicitly explained in the video and steps above. The new Gmail interface should not be a problem.

  12. Louise November 5, 2011 at 2:08 pm #

    Hi, great set and instructions, but I couldn’t see the google+ icon and link for it.

    • Rohan Aurora November 5, 2011 at 3:24 pm #

      Just added it again. The second icon from the list.

  13. Shawn November 7, 2011 at 5:48 pm #

    When I add an image I get the blue box around the image and when this is sent
    the receiver sees the blue box also. How do i fix this

  14. tracey December 14, 2011 at 2:03 pm #

    Thanks so much for sharing this information. I’ve been wondering how to do this for a while and now I feel confident enough to try to do it myself, wish me luck!

  15. rebecca December 15, 2011 at 7:17 pm #

    I was excited to get the icons into my signature – but then gmail said the signature was too long! Even with just my name and the icons. ??

    • rebecca December 15, 2011 at 7:50 pm #

      Got it – merely by logging off and back on. Thanks!

  16. chris January 12, 2012 at 2:05 am #

    Nice post, but…

    What do I need to do to have the button (such as twitter) automatically follow my feed, when you press the button? Right now it just brings someone to my twitter page (but not auto follow).

    I’m looking for a way that the person to click the twitter button, and be automatically following me, vs. having to manually hit follow once on my page.

    Hope this makes sense. Thanks.

  17. Gerald Fought January 13, 2012 at 9:54 pm #

    Good Day, Rohan…I have followed your procedure in my gmail signature, adding the “View my Profile on LinkedIn” button. When I add the hyperlink, another box gets added around the button. Can this removed…the button from LinkedIn is all I want to see in my signature.
    Thanks…
    Gerald

  18. Jan Ross January 19, 2012 at 2:25 pm #

    Perfect! I really wanted to add Twitter to my signature; this made it quick and easy. I Tweeted your post, since I think it will help others. Thanks!

  19. andrea January 26, 2012 at 5:39 pm #

    Thanks so much! This is awesome. Really, really appreciate it. Now I added the little buttons and my rescue kitty that is up for adoption to my signature. Would have never figured it out without this site!

  20. Ana January 30, 2012 at 9:05 am #

    Tks for that!
    thats great!

  21. sara January 31, 2012 at 5:44 pm #

    do you have a Yelp icon? Your tutorial was amazing, thanks!

  22. Joaquin February 5, 2012 at 10:05 pm #

    This was very helpful, thanks!

  23. jorge February 6, 2012 at 10:06 pm #

    Thanks for this wonderful tutorial, the only problem I have is :
    everything works well in gmail but when i receive them in the Mail app it has the links but the icons shows a ? mark.
    Any help on this?
    Thanks again

  24. nanly February 9, 2012 at 3:47 pm #

    thank you so much for the tutorial! i’ve told lots of people about this already :D

    is there any way you could add an icon for about.me? it’s pretty much a dark navy blue square with a yellow “me” centered

  25. Kelly Fletcher February 15, 2012 at 6:28 am #

    Hi. Thanks for the tutorial – really helpful. Any way you could add a Hand Embroidery Network icon? Thanks a lot. Kelly

  26. midwesterndays February 16, 2012 at 5:41 pm #

    Which email clients (recipient-wise) did you test this in?

  27. jonmpauley February 22, 2012 at 9:41 pm #

    Any Pinterest icon available? Awesome info, BTW. Kind to share. JP

  28. Diane McCoy February 27, 2012 at 5:00 pm #

    How do I add the social icons to Apple Mail?

  29. Danielle February 28, 2012 at 5:10 pm #

    Pinterest icon?

  30. Jesse March 2, 2012 at 3:16 pm #

    Thank you! This was incredibly helpful!

  31. Melissa Albert March 5, 2012 at 11:22 am #

    Thank you!!! Extremely helpful.

  32. remove blue border March 8, 2012 at 6:48 pm #

    It says that to remove the blue border we are getting around all of these icons that you have put on this website for us, you will need to put this in the HTML:

    If you could do that for each of them, then all of the blue boxes should be removed.

    Thanks.

  33. remove blue border March 8, 2012 at 6:49 pm #

    img src=”/foo/image.png” border=”0″ /

  34. Maria April 1, 2012 at 9:48 am #

    Thanks! I was able to add SM icons to Gmail! Will follow your tweets too! Keep going

  35. robert April 5, 2012 at 4:57 pm #

    when trying to click the icon links on iPhone, the phone instead just tries to download the images. on BlackBerry the link works.

    is there a workaround for this?

  36. Jessica April 10, 2012 at 9:09 pm #

    Thank you for this!! So helpful. As long as you’re taking requests on additional icons, though, I’d love one for goodreads.com.

    Thanks!

  37. Red Lips Graphics April 10, 2012 at 9:32 pm #

    Thank you so much for the step by step and video. Easy to follow and test!
    Put a smile on my face. :D

  38. Willow April 11, 2012 at 10:59 pm #

    Am I missing Pinterest?

    Worked perfectly for the others. Thanks!

  39. Kate April 12, 2012 at 2:00 am #

    These are great! Would also love Pinterest icon.

  40. Iliyana April 17, 2012 at 8:25 am #

    This is brilliant! I would also love a Pinterest icon!

  41. sumit kumar srivastava April 17, 2012 at 5:51 pm #

    i feel that social media is very useful for our socaity. we should respect it,

  42. jason purvis April 30, 2012 at 3:38 pm #

    This was a great help to me … THANKS

  43. Sara April 30, 2012 at 5:00 pm #

    Is the globe to make the icon a hyperlink only available in the step after you upload the hosted image? For whatever reason I am not seeing the option anywhere…..
    thanks for all of the info!

  44. Eli Hunter May 3, 2012 at 3:41 am #

    I previously put FB & LinkedIn buttons and linked. Trying to put Houzz in now, but I can’t get the icon to move where I want it to – to line up with the other two icons I already have there. I’ve right-clicked but there are no options to adjust it. It puts the icon off to the right and higher than the 1st I have on there. Any help on how to fix this?

  45. Heather Cobbs May 15, 2012 at 4:36 pm #

    Do you have a Pinterest icon? Thanks!

  46. Jennifer Petty May 15, 2012 at 8:49 pm #

    Thanks for the tutorial! I ran into trouble getting Gmail to recognize the image link in Internet Explorer but it worked just fine in Firefox. Thanks for making this such a simple process!

  47. VIshal May 16, 2012 at 2:17 pm #

    thanks man…

  48. Pratik Soni May 19, 2012 at 5:12 am #

    Awesome.. thanks.. I was looking for these icons from long time..

  49. Kim May 28, 2012 at 6:31 pm #

    Hi-
    This is great….but I’m really having trouble with the concept of getting a URL for a picture. Does this mean having to join a third party place to dump your photos to get a URL link? Can you provide more detailed instructions on how to accomplish this?

    Also, could you add a Pinterest button?
    Thanks!
    -Kim

  50. Elizabeth May 29, 2012 at 4:24 pm #

    This was very helpful. Thank you so much for sharing the info! Is there any way to easily change the size of the icon? I would like them a little bit bigger.

  51. JulieGong June 18, 2012 at 6:26 pm #

    This is awesome! Thank you.

    Any luck on getting one for Instagram?

  52. Magali June 19, 2012 at 5:55 pm #

    This was really helpful! Thanks a lot!

  53. Mun June 21, 2012 at 4:58 pm #

    Awesome – this was perfect. However you are missing the Pinterest Icon.

  54. yen June 22, 2012 at 9:09 am #

    can you add a Kickstarter icon? thanks!

  55. Caitlyn June 23, 2012 at 3:52 am #

    Any way you can add a Carbonmade icon for my portfolio? Or perhaps a phone icon just for placing before my number in my signature.

  56. Lila June 27, 2012 at 2:51 am #

    Great tutorial! Makes emails look oh so professional! Adding a Pinterest button would make it even better!!

  57. zieglerfe June 27, 2012 at 7:47 pm #

    THANK YOU! My signature looks better now!

    What about a Google Maps icon, so addresses can be linked via Google Maps?

  58. Christophe July 4, 2012 at 1:48 pm #

    I tried numerous times of putting some icons in my signature of my gmail.

    I created first hyperlinks with dropbox : https://www.dropbox.com/s/x5h2wzgf3hxnd6y/facebook_16.png and then also with picasa: https://picasaweb.google.com/109789941917466685992/SocialMedia#5761292210245421586 but still nothing shows up when I add the URL.

    I also tried different browers : safari, firefox and Google Chrome. I have no idea what I’m doing wrong. Or cannot it be that those steps simply don’t work with mac software?

    • Rohan Aurora July 8, 2012 at 1:00 am #

      It should work on all platforms.

    • Julia December 6, 2012 at 5:59 pm #

      Did you ever figure this out? I’m having the same trouble.

      Rohan,
      Thank you so much for this. I have referenced this page several times and directed my friends to it too.
      ~Julia

  59. mike July 11, 2012 at 11:15 pm #

    reverbnation please

  60. Maya July 13, 2012 at 3:53 am #

    Rohan Aurora,

    Thank you very much for your dedication on helping others, you are too kind.
    All the icons and links worked out perfectly.
    The only thing I don’t like is when adding a link of a youtube video in the icon, the screen of the video shows at the end of the email. I was wondering if you knew a way to get rid of that.

    Thanks in advance!

  61. PaperCUTS July 17, 2012 at 5:03 pm #

    This worked great! I just got my business account all set. Please let me know if you ever add Merchant Circle, http://www.merchantcircle.com/ Thanks!!!

  62. kholo0d July 30, 2012 at 7:50 am #

    Hey thanks for the great post, I just noticed that you mentioned updating the instagram and about.me icons, but couldn’t find them in the list of social media icons! where can i find them?

  63. Suzy July 31, 2012 at 5:52 pm #

    Tumblr logo stopped working!!!!! :(

  64. Peter August 5, 2012 at 6:21 am #

    Hi, this is great and with your help I have added Facebook, Twitter and YouTube!

    I work for a social-enterprise in the travel industry, so a TripAdvisor icon would be VERY USEFUL for us!

    Can you help?

  65. gluten free diet benefits August 5, 2012 at 7:00 pm #

    If you wish for to increase your knowledge just keep visiting this web site and be updated with the latest
    information posted here.

  66. Joanne August 16, 2012 at 5:20 pm #

    Wow thanks I really needed this! I second the Trip Advisor logo :) Please!

  67. Steve August 20, 2012 at 3:51 pm #

    Hey! This is an excellent and educative post! Thanks a lot Rohan. It help me on my updated Gmail account! :-)

    Many many thanks.

    Steve

  68. Suzy August 20, 2012 at 9:46 pm #

    Can you please add a Klout logo?
    http://klout.com/home

    thank you

  69. Yolanda August 24, 2012 at 6:47 am #

    thank you very muchhhhhhhh very useful.

  70. Matrassen August 24, 2012 at 8:10 am #

    Thanks, helped me a lot. I tweeted this page :)

  71. Il Brizzo September 4, 2012 at 12:53 pm #

    LinkedIn Logo stopped working!!! :D

  72. Verhoog September 6, 2012 at 9:20 pm #

    ohoh, facebook and linkedin icons aren’t working anymore…

  73. michael brooks September 27, 2012 at 7:44 pm #

    The old linkedin logo is broken and the new logo is way too big… please advise

  74. Shanemeister October 8, 2012 at 12:40 am #

    Great post! I’ve been looking for help with this for ages. Thanks a bunch

  75. Nick October 10, 2012 at 4:05 pm #

    Hi, your steps work great, however, in Gmail, when inputting the link to the image, it also places the text next to the icon. Do you know how to make only the image appear without the text?

    • Nick October 10, 2012 at 4:35 pm #

      Just wanted to come back on and say I resolved my own issue. I wasn’t highlighting the icon before linking it. Thanks for the great site.

  76. Patrick Chauke October 20, 2012 at 4:31 pm #

    Works like magic, thank you so much :)

  77. Deanna October 24, 2012 at 6:59 am #

    Hi there. THANK YOU for the site and the step-by-step instructions. What a time-saver!! Any chance you can offer a Tumblr icon that has the period after it? The current one, while most common, is easily confused with Twitter. That being said, do you also have the bird icon for Twitter? If so, awesome. If not, thanks so much for all the help thus far!

  78. Danica October 29, 2012 at 4:43 am #

    Where can I find icons in black and white to match my site?

  79. Myles Cowherd November 10, 2012 at 5:07 pm #

    This was really helpful, that’s for taking the time to share this great idea.

  80. Daniel November 13, 2012 at 1:52 am #

    Hey Rohan!

    This has been very helpful! I’ve successfully added many of my social media links to my signature. You’ve said above that you included both Instagram and Pinterest in the updated download pack, however I’m unable to find either of these there. Could you provide the link on your site to both (e.g. http://therohanaurora.com/files/downloads/icon/facebook_16.png) please?

    Thanks!

  81. Tahra Boatright December 4, 2012 at 1:52 am #

    Could you add Etsy?

  82. Carl Russo December 28, 2012 at 6:30 pm #

    Hi, Rohan! Your Gmail icons have disappeared again. Woe is us!

    • Deanna January 6, 2013 at 8:17 pm #

      I have the same issue. :(

      • Jude January 8, 2013 at 10:54 pm #

        Hi, Rohan! Your Gmail icons have disappeared!!! :(
        Can you please fix them?

        JF

  83. Alicia February 10, 2013 at 6:52 pm #

    Gmail won’t let me upload the image using the dropbox or drive share link? Is anyone else having this problem recently

Trackbacks/Pingbacks

  1. Tweets that mention How To Add Social Media Icons to Gmail Signature -- Topsy.com - January 30, 2011

    [...] This post was mentioned on Twitter by Rohan Aurora and Rohan Aurora, Alltop Innovation. Alltop Innovation said: How To Add Social Media Icons to Gmail Signature http://bit.ly/dMjuWm [...]

Leave a Reply