Something Swanky

How to Create Your Own Social Media Icons using Picmonkey

Creating your own social media icons is actually a fairly simple process– it’s not much more complicated than creating an image you like and linking to the appropriate URL.

All you need is a good set of Social Icon Sillhouette images (which I will direct you to :) and a little Picmonkey know-how.



Using Social Icon Silhouettes and a Custom Image 
This method is my favorite for creating social icons and has been a popular how-to question among my readers, so I think you’ll like it too! But I’ll touch on another method in a later post for those of you who don’t want to create your own image from scratch.
1. Find free social icon silhouette vector images online. My favorite set is here: http://theblogdesignernetwork.com/2011/08/free-social-icon-silhouettes/ I like this one because you don’t have to do a download! They’re just click and save images.
 
2. Right click on the images you want to use, and save them to your desktop (or an easily accessible folder).
3. Go to picmonkey.com and upload your white starter image. Size it just a little smaller than the width of your sidebar (mine is 300px) by about 300px (just to give wiggle room, you can crop later). So I would size mine to about 280x300px.
4. Here’s where you use that creativity a little bit– create the image for your social icon to go over. I would suggest keeping it simple– circles, squares, etc. I’ll show you a few different things that you could do…
4. Go into overlays (if you’re using Picmonkey), select YOUR OWN, and add the appropriate social icon images, one at a time, that you’ve saved to your desktop.
5. Adjust the size and color, and drag the icons over your images. (most of the time, you’ll want the color to be white, but in image #3, I chose to have the social icons different colors. I sent the image to the back and faded them out so that the words are the main focus of the image)
6. Crop the image down and save it (as .png) to your desktop…

Ta-da!
Now for something really fun… linking the URLs.
7. Go to http://www.image-maps.com (this site is AWESOME).
Time out. you will need an image URL to continue at this site (they can’t host images for you). So make sure to upload your image to a blog post, photo bucket, picasa, etc. so that you can have an “image location.”
8. Enter in your image location and click on “start mapping your image.”
9. Click on RECTANGLE
10.  A.) Size the rectangle to fit over one social icon.
       B.) Type in the corresponding URL (your FB page, your twitter profile, your RSS feed, etc), and click save.
       C.) UN-CHECK THIS BOX.
11. Repeat for all social media icons (you only have to un-check the box once). Once complete, click on GET CODE.
12. Click on HTML Code
 
13. Copy the code and paste it into an HTML gadget box on your Page Elements (old blogger) or Layout (new blogger) page. I would recommend adding
at the start of the code and
at the end of the code before saving. This will center it in your side bar. Drag the gadget box to wherever you want your social icons to appear!

Follw me!

Ashton

Ashton is the owner and author ofSomething Swanky. Although first and foremost a wife and mother, she considers herself an online entrepreneur, freelance writer and photographer, and brand ambassador.Her focus is in food styling, food photography and recipe development.
Follw me!

Latest posts by Ashton (see all)

   

189 Responses to “How to Create Your Own Social Media Icons using Picmonkey”

  1. Alison posted on May 11, 2012 at 5:19 am (#)

    I know what I will be doing this evening now! Thanks for the fab tutorial!

    Alison
    x

  2. Sarah Carletti posted on May 11, 2012 at 6:45 am (#)

    Great job!

  3. Aimee posted on May 11, 2012 at 7:35 am (#)

    Um, you had me until the “time out.” Then I got scared and confused. Good thing you did mine before you quit :) If I do ever want to change though, I know the perfect place to get some great tutorials ;)

    • Jocelyn replied: — May 11th, 2012 @ 7:58 am

      LOL Aimee…I was the thinking the exact same thing…thank goodness Ashton did mine before stopping:-)

  4. Shandra Lenae posted on May 11, 2012 at 7:38 am (#)

    Whaaat?! Oh I am so doing this right now! Great Tutorial.

  5. Jocelyn posted on May 11, 2012 at 7:59 am (#)

    Girl you make it sound so super easy!!! I know if I sit down and work on it, I could do it. Oh wait I don’t need to because awesome you did such a great job already on mine! But when the time comes to change…you have the best and easiest to follow tutorials!!!

  6. Lora posted on May 11, 2012 at 10:45 am (#)

    This is great information. Thank you!

  7. Dorothy @ Crazy for Crust posted on May 11, 2012 at 11:20 am (#)

    Thanks Ashton! You rock. I love all that you did for me, but I know I’ll get the “itch” soon (you know the one, where you want to change everything :) so this will be great. The mapping, is that how you put your icons in your header? Because I’ve been wondering about that. SO cool!

    • Something Swanky replied: — May 20th, 2012 @ 11:37 pm

      Wow. It has taken me 10 DAYS to respond to this comment!!! Sorry :/ But, YES. That’s exactly how I did my header. I LOVE that site. Honestly, it does give some trouble every once in a while, but I honestly think the results are worth the occasional hassle.

  8. Robin @ Bird On A Cake posted on May 11, 2012 at 12:09 pm (#)

    I have been wanting to do this, but didn’t know how. Thanks so much for the tutorial!!!

  9. Crunchy Creamy Sweet posted on May 11, 2012 at 2:32 pm (#)

    Ok, so seriously I will need you address, to send you a box of cookies because this ROCKS! I can’t thank you enough for your tutorials! I love it!! xoxo

  10. Motivated Mommy of two posted on May 13, 2012 at 8:22 pm (#)

    Thank you so much for this tutorial, I will be doing this to make sure all of my button match. If I can request another tutorial I would to be able to do my custom menu bar but really have no idea how. I would love to see something like that in the near future.

    Thank you so much

    • Something Swanky replied: — May 20th, 2012 @ 11:36 pm

      Thanks for the suggestion! Look for it in the next few weeks :)

  11. Liz Fourez posted on May 14, 2012 at 2:55 pm (#)

    Thank you! Thank you! Thank YOU! I’ve been attempting this for a couple weeks now, and now I finally can cross that off my blog to-do list!

  12. Erin Sipes posted on May 14, 2012 at 5:17 pm (#)

    It’s as if you’ve read my mind…just yesterday at our Mother’s Day BBQ I was asking my stepmother if she knew how to put multiple links onto one image. You’re my hero, THANK YOU!

    • Something Swanky replied: — May 20th, 2012 @ 11:35 pm

      It’s funny, I spent MONTHS wishing I “had that kind of technology.” And then one day I just thought, why don’t I just google it? Just to see. And I literally googled “I want to put multiple images on one image and use different links.” IS there a more ridiculous search than that?? Anyway, found image-maps through that search, so I guess it works!

  13. Alyssa posted on May 14, 2012 at 11:31 pm (#)

    Thank you sooo much! This may be old news to some, but I have coveted custom designed social media tabs for so long. I’m implementing this!

  14. Sarah Carletti posted on May 16, 2012 at 9:24 am (#)

    I did it! I did it! You are da bomb!!!!

  15. cheapcraftymama posted on May 16, 2012 at 10:24 am (#)

    That is so helpful, thanks! I would love for you to share this (and any other creations) at Pin It and Win It Wednesday @ http://www.cheapcraftymama.com– where you can win free ad-space on my blog!

  16. Nicola posted on May 17, 2012 at 5:09 am (#)

    Such a great tutorial. That image maps site is great!

  17. Kristin posted on May 17, 2012 at 2:46 pm (#)

    Oh wow! This is great! Thanks so much! Haven’t used PicMonkey yet and hadn’t heard of image-maps

    Visiting from HoH

    • Something Swanky replied: — May 20th, 2012 @ 11:33 pm

      I love image-maps! Highly recommend. Sometimes the site gives me a little bit of trouble and I have to start over— but honestly, it’s worth the hassle. It’s an awesome service for free!

  18. Jill posted on May 17, 2012 at 7:04 pm (#)

    Great tutorial, but I cant figure out how to link up my email, any suggestions?

    • Something Swanky replied: — May 17th, 2012 @ 9:02 pm

      Ok, so if you want to provide a link to your actual email address, you’ll want the URL for that link to be: mailto:example@gmail.com

      OR, you can link it to a standalone page, and embed a contact form on that page using 1-2-3 contact (you’ll have to google that, I can’t remember their URL).

      Hope that helps!

    • Jill replied: — May 17th, 2012 @ 10:09 pm

      Thank you so much!

  19. Jill @ KitchenFunWithMy3Sons.com posted on May 17, 2012 at 8:41 pm (#)

    oh wow…just noticed this linked up to our party and was looking for awhile on how to do this. Everything I came across seemed so confusing. This is great! I ended up having a friend send me the ones I have now, but I still have no idea how to group them. I am terrible at this stuff! I will make sure to share this…you rock!

  20. Shannah @ Just Us Four posted on May 18, 2012 at 10:59 am (#)

    Great tutorial! Would you consider linking it up at my Pinworthy Projects Party? I hope to see you there!

  21. Sarina posted on May 18, 2012 at 1:42 pm (#)

    This is a great tutorial! Thank you so much! I have been trying to figure out social media icons forever!

  22. Tim, Allyson, and kids posted on May 18, 2012 at 2:34 pm (#)

    Wow! I have been wanting to do this for a long time and now I can thanks to you! I’d love for you to link up to our Finished Friday blog party.

  23. Heather Kinnaird posted on May 18, 2012 at 3:09 pm (#)

    what a great tutorial – I wish I hadn’t already paid a web designer:( you have all the tips I would have needed.

    thanks
    ~heather

    • Something Swanky replied: — May 20th, 2012 @ 11:31 pm

      Well, they did an awesome job because your blog looks fabulous :)

  24. Tim, Allyson, and kids posted on May 19, 2012 at 9:58 pm (#)

    Seriously, this was so easy. I spent much more time getting it how I liked it in picmonkey than actually getting it all linked up and on my blog. Come check out my new buttons.

    • Something Swanky replied: — May 20th, 2012 @ 11:30 pm

      You did such a great job! I LOVE it! Makes me want to redo mine :)

  25. lizy b posted on May 21, 2012 at 10:43 am (#)

    This is at the very top of my to do list this week! What a great tutorial! Can’t wait to get to this!!!

  26. lisacng posted on May 22, 2012 at 10:42 am (#)

    Found this site thru a google search, and it’s great. Thanks!!!!

  27. Frazzled Mom of Five posted on May 22, 2012 at 12:43 pm (#)

    I am so jazzed I found you! I know what I will be doing on my lunch break! THANKS so much for sharing!
    New Follower!
    Jen @ f5

  28. Olga@Stardust-Decor&Style posted on May 22, 2012 at 2:26 pm (#)

    Great info! Thanks! Just pinned it!

  29. Natural-Nesters posted on May 25, 2012 at 12:01 pm (#)

    First of all I LOVE THIS! And am so thankful that I found it….BUT I NEED SOME HELP! I have put the center codes at the front and end of my html code, but it is still not to the left margin. Does it need to say something about the left?

    I would love for you to stop by and look at the issue I’m having and see if you have any tips on how to fix it. I will leave it up (even though it is messed up for a bit) so hopefully you can stop by and help me!

    Please email me: naturalnesters@gmail.com

    • Natural-Nesters replied: — May 25th, 2012 @ 12:07 pm

      Nevermind I figured it out! Thanks for all the help !

    • Something Swanky replied: — May 25th, 2012 @ 12:09 pm

      Great! What was the problem? Did you have to change the width of your sidebar a little? That was my only guess, and I actually haven’t even taken a look yet– I just got around to looking at my comments this morning!

  30. MamaMunky posted on June 3, 2012 at 1:19 am (#)

    This tutorial was amazing and awesome and easy! Thank you so much for sharing. :)

  31. cupsbykim posted on June 5, 2012 at 9:24 pm (#)

    This is great! Thanks for the tutorial! If there is one request I could make it’s how to add the box at the bottom of your posts as to where you’ve linked up to. I just can’t seem to get that to work for me!!

  32. Robin @ Bird On A Cake posted on June 7, 2012 at 5:34 pm (#)

    OK, I just finished following your tutorial. It is AWESOME…thank you!!! I have one little problem. My finished product is too wide, even though I looked up the width on my blog layout (320 px). Would you take a look and let me know if you have a solution? Thanks again, Ashton! :0)

  33. Mrs. Dwyer posted on June 11, 2012 at 5:02 pm (#)

    ….and just when I thought I was going to walk away from the computer, lol! This tutorial is EXACTLY what I have been looking for! Thanks so much!

    ~Tanya
    Mrs. Dwyer’s A+ Firsties

  34. Pamela R posted on June 13, 2012 at 11:03 am (#)

    I have a question that is probably ridiculously simple but how do I figure out what the link is for my rss feed? Thanks! I can’t wait to update my blog layout!

  35. Cathy posted on June 15, 2012 at 9:47 pm (#)

    I have been looking for this for ages

  36. Lindy (Veni Vidi Scrappy) posted on June 25, 2012 at 8:24 pm (#)

    That’s for the fabulous tutorial!!!!!

  37. Nicole {WonkyWonderful} posted on June 27, 2012 at 12:36 am (#)

    Thank you – Thank you – Thank you! Perfect timing. I am new to blogging and still getting my site all set up. I was just thinking about attempting my own icon designs on Picmonkey, this post will be so helpful. :)

  38. Kristen Kogel posted on June 27, 2012 at 2:32 pm (#)

    I just tried to paste this to my page and it says it contains illegal charachters! can you help? thanks!

    • Stephanie replied: — July 1st, 2012 @ 9:33 pm

      I got the same error! Let me know if you figure it out, thanks!

    • Something Swanky replied: — July 2nd, 2012 @ 4:15 pm

      Hi! Can you walk me through exactly what you pasted to where? Like– were you able to successfully generate the code from Image-Maps? And then were you pasting it into a blogger gadget box?

  39. MissCandiquik posted on June 28, 2012 at 5:03 pm (#)

    Love it, thanks! I have been learning quite a bit – and learning to do it all on my own!

  40. Carolina posted on July 5, 2012 at 9:20 am (#)

    Thanks for the tutorial! I love picmonkey and now with you help I know how to make my own images!!

  41. K@DragonflyMumma posted on July 6, 2012 at 7:54 pm (#)

    Thanks so much for this tutorial it was so easy and now my social media buttons are unique and professional looking Kxx

  42. Lorie K posted on July 8, 2012 at 8:16 pm (#)

    Thanks so much! This was just what I needed!

  43. Our Journey Through This Lovely Life posted on July 10, 2012 at 3:53 pm (#)

    this is Awesome!! I just made mine! I have one question though, I am using the Mail picture and trying to link it to my email and I keep putting in my email address and it’s not working? Do I have to use the Send email I tried it several times several different ways and it wont work %-(

  44. The Headless Owl posted on July 11, 2012 at 2:40 am (#)

    Thanks for the tutorial!!! Used it to create social media icons and credited to you on my blog. :)

  45. Hannah posted on July 12, 2012 at 12:27 am (#)

    This comment has been removed by the author.

  46. Hannah posted on July 12, 2012 at 12:36 am (#)

    Thank you thank you! My blog looks a million times better, and you made it really easy. If I could hug you, I would! justpeachy-darling.blogspot.com

  47. Desi posted on July 25, 2012 at 2:44 pm (#)

    I love you so much for this! And all of your tutorials! I used your tutorials to make my social media icons, to make a white blank photo, how to use image maps to link urls, and customized my horizontal navbar… all thanks to you! Seriously seriously thank you. I have tried googling help to no success and your tutorials are very easy to understand, and always easy on the eyes too. You’re the best :)

  48. Karen At Home posted on July 30, 2012 at 10:09 am (#)

    Awesome tutorial, just completed it for my blog and had to say thanks!!!

  49. Mo 'Betta posted on July 31, 2012 at 11:16 am (#)

    You are an ANGEL! The tutorial was fabulous and even I was able to follow it and just made some cute little social icon buttons! They need a little ‘tweeking’ but so much better than the clutter I had! Thank you so much! I’ll be doing a blog post when I can,singing your praises :)

  50. Lauren posted on August 1, 2012 at 5:53 pm (#)

    I LOVE YOU. thank you thank you thank you thank you thaaaaannnnkkkk youuuuuu!

  51. Jo H posted on August 2, 2012 at 10:58 am (#)

    I just wanted to say thank you soooooo much for this post! This morning I had no idea how to do this and by this afternoon i have a full set of working custom media buttons that i made! you rock!!

  52. Emily Netz posted on August 8, 2012 at 11:57 pm (#)

    I am so glad that I found you! I have been needing to revamp my social icons, but had no idea how I did them to begin with ;). Your tute was super helpful! Thank you! Please feel free to swing on by and check it out!

  53. Nitesh Ahir posted on August 14, 2012 at 2:03 am (#)

    Amazing work dear……

  54. sonya posted on August 14, 2012 at 2:33 pm (#)

    Thank you so much for this! This is amazing!! I just have one question. How to I make the social icons button white? Thanks again! Youre a genius!

  55. Sarah D. posted on August 22, 2012 at 10:30 am (#)

    I AM NOW IN LOVE WITH YOU. PERIOD. END OF STORY. CUE HAPPY ENDING MUSIC.

  56. Shayna posted on August 29, 2012 at 11:00 pm (#)

    I just found your blog via Google & I am SO glad I found it! I’ll be back later to fancy up my blog “all on my own” thanks to you!!!

    XOXO,
    Shayna

  57. Shiloh Barkley posted on September 4, 2012 at 12:16 am (#)

    that was a lot of work! see for yourself and let me know if I can make any adjustments. i guess it’s set in stone!
    http://www.shilohstaste.com

  58. EmmaRuthJones posted on September 5, 2012 at 11:16 am (#)

    I have been trying to find a simple way to do this (one without learning lots of code!)for ages! Thank You!

  59. Holly @ abakershouse.com posted on September 11, 2012 at 11:37 pm (#)

    I finally got around to following this tutorial– THANK YOU! I am jumping into social media a bit late in the game but your tutorial has me going in the right direction.
    Many thanks!

  60. Judy posted on September 12, 2012 at 8:43 pm (#)

    Thank you so much. I have been trying to figure this out forever. You just helped me redesign my entire blog. I have one question – can you tell me how you got your recent posts to configure like that. I have the widget from blogger and I can only have it in my side bar. I just want the thumbnail like you have and to have it in the same location. Any help would be very appreciated. I am now a follower of your awesome blog.

  61. The Boyer Family posted on September 14, 2012 at 3:48 pm (#)

    Thank you SOOOOOO MUCH for this tutorial!!!!! This will be Such a great help when I design our social media icons!!

    Thanks again!

    Charlotte
    boyerfamilysingers.blogspot.com

  62. Laura Novobilsky posted on September 14, 2012 at 11:16 pm (#)

    You just made me feel really, really smart! Thank you so much for this great tutorial!!! :)

  63. Kara Gibson posted on September 22, 2012 at 5:39 pm (#)

    Thank you so much for this tutorial! Everything worked for me the only slight problem is that when I put it onto my blog (WordPress) there is a little grey boarder that surrounds it. Not sure if this is normal or if I did something wrong? Any help would be great. Thanks!

  64. Christina posted on September 25, 2012 at 11:58 pm (#)

    Hi, Ashton
    Just wanted to say thank-you for this tutorial. I walked my way through split screen of your blog and split screen of image-maps. I had already loaded my pic onto picasa after I tweeked it in photoshop elements 9.0 but, found picmonkey to be very useful for the future. I was not sure how to get the URL address then I right clicked on my photo when it was in picasa then went to properties and the location was right there. I just did letters than the squares and linked up my urls to each letter, then copied the html added to my blog and tada, it was beautiful. Can’t tell you how many times I have come across a blog and thought, man how can I get my links going across and not down, without taking to much space up. And you walked me through it. Yeah, I feel so proud of myself. I also made my own button and banner and my blog keeps getting better like a fine wine. Thanks again, oh and stop by to see how it turned out. Christina http://www.creativetizzy.blogspotcom

  65. Kristen Kogel posted on September 26, 2012 at 3:12 am (#)

    HIII! Mine is saying “untitled image map” underneath and that’s ugly. lol
    help?

    • Something Swanky replied: — September 27th, 2012 @ 4:16 pm

      Ok, the good news is: easy fix. The bad news is: sort of a time consuming fix :P

      You need to re-map the image, but before you finish and grab your code, look in the right hand column on the mapping page. There will be a check box that says “show text links.” Make sure that is UNCHECKED and you won’t have any problems :)

  66. Angela Joy Holmes posted on September 26, 2012 at 12:15 pm (#)

    This is the best tutorial I’ve found! Thanks for being so descriptive.. but when I get through all of the steps at to the end, it appears on my page as a little photo bucket box that says “This is no longer supported by the site”
    HELP!
    :)

    http://www.fashionablecents.blogspot.com

  67. Angela Joy Holmes posted on September 26, 2012 at 12:42 pm (#)

    Okay My bad.. it actually says “Photo has been removed by the user” I dont know what that means? Thanks again for your awesome advice/ help :)

    • Something Swanky replied: — September 27th, 2012 @ 4:17 pm

      Did you host the image yourself? Or did you let image maps host the image for you (uploaded the image from your computer?

  68. ZaraAlexis posted on September 30, 2012 at 12:28 pm (#)

    This is AMAZING! Thank you so much for posting this! It’s helped me finally figure out how to create my own social icons!! YOU ARE THE BEST!!!

  69. NaturallyPureBeauty posted on October 5, 2012 at 1:44 pm (#)

    Thank you! Thank you! Thank you!!

  70. Dawn posted on October 6, 2012 at 2:52 pm (#)

    OMG you are amazing, followed your directions and it worked perfectly. I am now a follower:)

  71. Lyss Arielle posted on October 10, 2012 at 4:02 pm (#)

    this is great-you’ve given me a project for today :) thank you!

  72. Lyss Arielle posted on October 10, 2012 at 9:59 pm (#)
  73. Wordpress Family posted on October 19, 2012 at 10:42 am (#)

    Wow. Nice.

  74. Shirley posted on October 21, 2012 at 3:42 pm (#)

    THANK YOU for this guide! Love all your tutorials. Just finished adding my new icons to my blog.

    • Ashton replied: — October 25th, 2012 @ 7:37 pm

      Awesome!

  75. Val @ Home Made Modern posted on October 24, 2012 at 9:02 pm (#)

    Oh my goodness, you are a godsend!! I just followed this tutorial and it worked! So happy!!! Thank you ever so much for taking the time to write this post.

    • Ashton replied: — October 25th, 2012 @ 2:39 pm

      I’m so glad it helped!

  76. Bethaney - Flashpacker Family posted on October 28, 2012 at 3:33 am (#)

    Brilliant!!!!! Thanks so much. :)

  77. Amber posted on November 4, 2012 at 11:42 am (#)

    OMG! Thanks so much! I found this through blogcon and it was so simple to follow. I have no blog design experience and I was able to get it to work with minimal issues. I have wordpress so finding where to put the code was a bit tricky, but I figured it out. Thanks SO much for sharing your wisdom with all of us newbies.

  78. Julie @ Julie's Eats & Treats posted on November 13, 2012 at 5:47 pm (#)

    Hey! Any idea where we can find the outline of the Instragam Icon?

    THANKS!

    • Ashton replied: — November 15th, 2012 @ 2:03 am

      Yes! Will you email me on this? Otherwise I’ll forget to find the icon set for you when I get back into town and can sit down at the computer!

      Thanks :)

  79. Rachel posted on November 24, 2012 at 2:18 am (#)

    Yaaaay! This is such a great post – I just make some awesome buttons for my blog. Thank you so much!

  80. Sarah McLachlan posted on November 29, 2012 at 10:38 am (#)

    URL contains illegal characters??? I go through everything exactly as you said but then I get this messge when I try to ad my own Gadget URL on my Blog??? PLease help! This was such a great tutorial and I really want to get it working.
    Many Thanks

    • Ashton replied: — December 3rd, 2012 @ 11:50 am

      Sadly, the first thing I’m going to have to recommend is to just try it again! Occasionally, HTML code can just be a pain and one little mistake in typing or in copying and pasting can throw the whole thing off. So that’s the first thing you do, just try it again. If that still doesn’t work, send me an email with all of the links you are trying to use and I’ll take a look and see if I can help! somethingswanky [at] gmail [dot] com

      • sarah replied: — December 3rd, 2012 @ 5:32 pm

        Hi Ashton,
        Thank you so much for your reply. So I’ve re tried the entire thing several time and was meticulous with the details however i just can seem to get it working?Darn, I’m so dissapointed I can’t simply figure this out. Any chance you’d be able to lend me a hand :)
        Many thanks
        Sarah

        • Ashton replied: — December 5th, 2012 @ 12:48 pm

          Hey! Email me the link to your blog and a description of the problem again, and I’ll take a look :)

          • Sarah McLachlan replied: — December 12th, 2012 @ 9:33 pm

            Hey Ashton,
            You told me to e-mail you back so you could take a look at my link problem. I’ve seriously tried it so many times since then, thinking I would be able to sort it out myself but it still continues to only work the first time and then shows an error or unauthorized message after that :( Would you send me an e-mail at photographybysarahanne@hotmail.com when you get a chance and let me know where I can message you the info.
            Thanks again!!!

  81. Riverlea Soap - Odette posted on December 2, 2012 at 9:19 am (#)

    WOW This is amazing – thanks for these tutorials.

  82. Stephanie posted on December 12, 2012 at 3:16 pm (#)

    Thank you so much for posting this tutorial it was very helpful! I’m currently “re-vamping” my blog and now have awesome social media icons because of this post! Do you happen to know where I can get an Instagram silhouette? I’ve googled it, to no avail….

  83. Tanny S. posted on January 3, 2013 at 5:14 pm (#)

    Awesome tutorial! it worked like a charm. I used picmonkey for the first time and coding for the first time! thanks! my navigation bar image on the blog is super blurry, but in picmonkey and picasa it’s fine. What could be the issue?

    • Ashton replied: — January 5th, 2013 @ 1:08 am

      My first guess would be that you need to save the image as .png not .jpg . Could that be the problem?

      • tanny s. replied: — January 6th, 2013 @ 2:33 pm

        hmmm… png or jpg seem to be really poor quality. and it seems nothing fits right either. lots more trial and error. If you have any other ideas, I am more than willing to try them. Thanks again!

  84. Laura posted on January 5, 2013 at 6:02 pm (#)

    *cries* Thank you sooooooo much! I thought for sure I could do this, but I couldn’t figure out how to get the right “fonts” for each social media website. I also didn’t know how to map the image outside of FrontPage, which I don’t own anymore. This is a HUGE help!!!

  85. Marcie @ Flavor the Moments posted on January 10, 2013 at 6:13 pm (#)

    I love your website and all the fabulous how-to’s! I just started blogging a few months ago and I’m trying to give my blog a face-lift. Your site will definitely help me there. I love your blog design…can you tell me if it’s a specific WordPress theme that you’ve used? I noticed a very similar design on portuguesegirlcooks.com and I’d like to do something similar. Thank you!

    • Ashton replied: — January 10th, 2013 @ 8:07 pm

      I’m running the genesis framework with the Craftiness child theme :) Good luck on your blogging journey!! It’s a lot of fun :) :) :)

  86. Laura posted on January 17, 2013 at 6:55 pm (#)

    Hi. This is a great tutorial, thank you! I’m in the middle of using it right now…but for the email social media icon, how do I link my email to that part of the image since it’s not a url? I was doing so well up until that point.

    • Ashton replied: — January 18th, 2013 @ 12:34 am

      Hey there! The URL is mailto:youremail@gmail.com :)

  87. Kristin posted on January 17, 2013 at 11:09 pm (#)

    What is the process for a ‘mail to’ link? LIke I have the interest and instagram set up, but I’m not sure how to make it bring up my email when people click the envelope??

    • Ashton replied: — January 18th, 2013 @ 12:33 am

      The url for an email is: mailto:youremail@gmail.com :)

  88. Kelly Reber posted on January 21, 2013 at 3:16 pm (#)

    I luv U! Your tutorials are so helpful and user friendly! I just did this one and feel proud of my self for it. Couple questions… is it necessary to host the html other than on your own blog (in case you lose it later)? I want to do some fun stuff like your scalloped side detail on your blog and your custom background – got any tutorials coming for those?
    Thanks again!

    • Ashton replied: — January 21st, 2013 @ 5:29 pm

      I have lots of tutorials coming up this year! I’ve just recently partnered officially with picmonkey, and part of that deal is writing lots of blog design posts!! :)

      It is necessary for you to host the image SOMEWHERE, but it doesn’t ave to be on another blog. Lots of people host on photobucket or picasa. I just like to use my sample blog to host, because it actually keeps me a little more organized :)

      Glad you liked this tutorial!

  89. Heather @ The Unsophisticated Kitchen posted on January 24, 2013 at 6:35 pm (#)

    Thank you so much for this post!!! You are the best !! I can’t believe I did this on my own, but your post made it so easy!! Amazing! Thank you!

  90. Tash @ The Velvet Moon Baker posted on January 27, 2013 at 4:13 pm (#)

    Hey ashton thanks for the tutorial. one quick question when doing the nav bar, for some reason I can’t see the HTML code to put before and after for it too center. It’s just showing up as blanks spaces in your post. Could you let me know what the code is. Thanks so much :D

    • Cristina replied: — July 3rd, 2013 @ 5:39 pm

      I can’t see the code to center it either; can anyone tell me what it is?

  91. Tracy J posted on February 2, 2013 at 5:04 pm (#)

    What do I do to set up my social icon links to open up in a new tab or webpage?

    • Ashton replied: — February 3rd, 2013 @ 1:56 am

      You can’t do it in image maps :(

  92. Rachel Simons posted on February 9, 2013 at 2:17 pm (#)

    Would you happen to know where else I might be able to get the silhouettes? as the site links is under construction.

    Thank you

    • angel replied: — February 12th, 2013 @ 2:07 pm

      i’m also looking for the silhouettes… the link below looks like it’s actually for icons that are already created….

      searching, but not finding something like the link included in the tutorial so far!

  93. Minou posted on February 9, 2013 at 9:42 pm (#)

    Most amazing, thank you. If this “old dog” can follow your directions, ANYBODY should be able to! Thanks!

  94. Tammy posted on February 20, 2013 at 11:54 pm (#)

    Thank you – thank you – thank you! Decided I had procrastinated long enough on fixing a mess I made of the nav-bar, googled, and voila! yours was the only one that made sense. Thanks so very much!!

  95. Katie Clark posted on February 21, 2013 at 1:12 am (#)

    Hey, that link is broken for the social media sillhouttes. I found the updated link, if you want it :)

    http://theblogdesignernetwork.com/free-social-icon-silhouettes/

    • Ashton replied: — February 21st, 2013 @ 2:34 pm

      THANK YOU!

  96. Adrienne posted on February 28, 2013 at 9:06 pm (#)

    Hi, Ashton! Thank you so much for your tutorials on blogging! I am a newbie and I think I have been on you blog now for at least 2 hours!! lol, I have one thing I am unsure of before trying this. You say to add at the start of the code, and at the end of the code. Not really sure what you mean. Are you actually typing “at the start of the code” in the HTML box before pasting?

    • Ashton replied: — March 2nd, 2013 @ 10:40 pm

      Hey there! Sorry, someone just pointed out to me that the center tags disappeared from the post! I’ll have to add them back in (but I have to change the code a little so it shows up). What I’m trying to say in the post is be sure to add “center” tags. Add a center before the HTML and a /center after the HTML. But be sure to put each of the “centers” in these: <> (I can’t actually do it, or else they’ll disappear from the comment like the do in the post). Does that make sense?

  97. Lanae posted on March 1, 2013 at 6:44 pm (#)

    My question is about the tag you said to add to the front and back of the html code to get it to be centered? it isn’t showing up on your blog post, and i think that i need it to make my stuff work! Help!
    By the way.. this is the most helpful thing i have ever found online! You are awesome!

    • Ashton replied: — March 2nd, 2013 @ 10:36 pm

      Add

      before the code and
      after the code :)

      • Ashton replied: — March 2nd, 2013 @ 10:36 pm

        Shoot! It did it again! I’ll try to email it to you!

  98. Hollie posted on March 8, 2013 at 12:11 pm (#)

    hello! I love the tutorial! Also, love the font as I am typing this in haha! just one question… the blog design network silhouettes are not available anymore :( do you recommend any others?

    • Ashton replied: — March 9th, 2013 @ 11:15 pm

      I just saw that! So disappointing! Maybe I’ll post some here, but for the most part you can google and find them :)

  99. Kristin posted on March 9, 2013 at 6:50 pm (#)

    What’s the code for the “Follow by RSS” link? I got FB, Pinterest & email all sorted out but can’t figure out that one. This tutorial is great and I’ll post when I get it all figured out. Thank you!! :)

  100. Kristin posted on March 9, 2013 at 7:18 pm (#)

    I think I figured it out. Would love to have you come see. I used your tutorial to make my header AND nav bar! Is there a way to make my Header smaller & center it? I can make it smaller in PicMonkey but it automatically anchors on the left. It’s blurry when it’s stretched this big but that’s better for my OCD than having it off center. ;)

    Little Miss Glamour Goes to Kindergarten

    • Ashton replied: — March 9th, 2013 @ 11:00 pm

      Maybe save your images as .png instead of .jpg to help with the blurriness! And if you change the width of your blog in template designer, that should help with the centering too :) But I think it looks GREAT! You did such a good job!!!

  101. Sukhi posted on March 21, 2013 at 10:28 pm (#)

    Hello there!

    I wanted to take a minute and thank you for posting these instructions! I just created social buttons for my blog using your instructions. I am new to the whole blogging thing and have been working on making my blog prettier and more user friendly! I have got long way to go though.. :p
    Thank you once again though!

  102. Katie posted on March 28, 2013 at 11:52 am (#)

    Did you create your “My Favorite Posts” and “Reader’s Favorites” in the sidebar using Image Map Tool, or was that a plug-in?

    • Ashton replied: — March 28th, 2013 @ 5:58 pm

      Image-maps! :)

      • Katie replied: — March 30th, 2013 @ 6:55 pm

        Thanks! Cheers.

  103. Anja posted on April 5, 2013 at 3:54 am (#)

    Your tutorials are so great! :-) I am your newest follower as of now!

  104. Nancy P.@theittersideofsweet posted on April 6, 2013 at 5:07 pm (#)

    I just did this on Thursday I am curious if I did it wrong because I selected image upload from my computer instead of from a URL. Was that wrong? I am in the process of making a header, I saw on the comments I can add my icons to that as well? I like the position of them better at the top. This has been so helpful to a newbie!

    • Ashton replied: — April 6th, 2013 @ 9:45 pm

      Yes! You want to use a URL, NOT upload it. When you upload it, it’s like asking image-maps to host it for you. And they don’t like to do that. So they’ll delete your photo within 2 days. That’s why you have to host it yourself :) I have a tut on image hosting in my nav bar if you want to check it out!

  105. Darcel ~ The Mahogany Way posted on April 7, 2013 at 2:16 am (#)

    I just put my icons up today. I followed your instructions but made my own icons from scratch. I love them!

  106. Maria posted on April 16, 2013 at 1:37 am (#)

    THANKS!!!

  107. Rita Marie posted on April 24, 2013 at 8:12 pm (#)

    Holy cow!!! Thank you so much!!! Love the result and it was so easy!

  108. Shannon @ Pinstersisters posted on April 30, 2013 at 1:39 pm (#)

    Thanks to you, my blog is starting to look great. Thank you for the easy to follow directions!

  109. Chelsea posted on May 12, 2013 at 12:17 am (#)

    Thank you so much for this!

  110. Tehmina Zaman posted on May 20, 2013 at 7:25 am (#)

    Thanks for the very helpful tutorial. I use Picmonkey a lot but have never come across Image-Maps.com. Definitely worth looking into for social icons and perhaps even banner creation.

  111. Alicia Jay posted on May 24, 2013 at 4:51 pm (#)

    Ashton, this tutorial is so helpful! I kept wondering how people made all the gorgeous free social media icons around the web, and this made it simple for me to create them in my own colors and style. Thanks a lot for the clear, easy to follow guide. Can’t wait to check out more of your posts.

    Alicia

  112. Katie posted on May 26, 2013 at 12:06 pm (#)

    Thank you so much for this post! Was so useful when I was creating my own little icons! Thanks again, so useful!

    Katie <3

  113. Kayla posted on May 26, 2013 at 12:47 pm (#)

    Thank you so much for this tutorial! I just have one quick question…Is there a way to get rid of the ugly rectangles shape that appears on the mouse over of the links?

    • Ashton replied: — May 28th, 2013 @ 12:36 am

      Hm… mine never have a rectangle mouse over! I wonder why that’s showing up for you?

  114. Janet Meijer posted on June 4, 2013 at 2:31 am (#)

    Thank you so much for the tutorial! You can see the result on my site (www.apestaartje.net)!

  115. marci posted on June 20, 2013 at 2:40 pm (#)

    This was so helpful. Your detailed explanations were great. Thank you so much! :-)

  116. Jillian Wade posted on July 16, 2013 at 1:57 am (#)

    What a fantastic tutorial! I just made a bunch of Social Networking buttons for my blog in no time at all!

  117. Christina Ventura-DiPersia posted on July 23, 2013 at 7:30 pm (#)

    THANK YOU a million times over!!! I am so excited about my new social media buttons. They are gorgeous! Seriously, thank you so much for this tutorial. You are a lifesaver.

    • Silvia replied: — July 27th, 2013 @ 10:10 pm

      hi, thank you so much for this tutorial, your explanations are really clear, cant wait to try this for my blog…

  118. Whitney posted on July 30, 2013 at 10:16 am (#)

    Thank you So much for this tutorial! I have been struggling for a month with finding and using my social media icons. I think I am going to go back and fix a lot of things using your site! Thanks!

    How do you center it in the side bar? I couldn’t see that in your blog post!

    Also, unrelated question I have been searching for the answer to forever! My CSS codes I enter never work or remotely move anything. Any ideas for a solution to this? Thanks again!

  119. Rebekah posted on August 8, 2013 at 11:22 am (#)

    Thank you so much for writing this post! It is so helpful!

  120. Vyki @ On The Shelf posted on August 21, 2013 at 4:12 pm (#)

    Fabulous tutorial! I’m not very computer graphics savvy, but I was able to make my icons from this :-)

  121. absolutelymrsk posted on August 23, 2013 at 9:12 am (#)

    i think you have just saved my life

  122. Andrea posted on September 4, 2013 at 9:58 am (#)

    Thank you! Easiest directions yet! http://www.handandtheheart.com

  123. danielle posted on September 21, 2013 at 5:43 am (#)

    Brilliant Tutorial! I’m not great with website type things but found this so easy to do! Thanks :)

  124. Erica posted on November 19, 2013 at 2:37 pm (#)

    OMG Thank you so much! You have no idea how great of a help this was to me!

  125. Patricia posted on January 3, 2014 at 1:11 pm (#)

    This is amazing! I just tried this and upload it to my blog. Thank you for sharing!

  126. Tina posted on January 15, 2014 at 12:22 pm (#)

    This was so easy and a huge help! Thanks so much!

  127. Ellie posted on February 5, 2014 at 1:55 pm (#)

    This is a great tutorial but I’m having problems, my google+ and Facebook links don’t work. Has this ever happened before?

    • Ellie replied: — February 5th, 2014 @ 2:16 pm

      I have actually fixed it now! lol! just a little tip for everyone, you can’t copy and paste stuff into the website unless you use keyboard shortcuts.

      Mac:
      Copy: cmd+c
      Paste: cmd+v

      hope this helps x

  128. Sofie posted on February 6, 2014 at 10:59 am (#)

    Love your tutorials, but have a problem with this one: image maps isn’t working anymore like in your screenshot. The layout has totally changed and when I map a button it just becomes one color instead of a button with an icon on it:/

  129. Catherine posted on February 15, 2014 at 7:34 pm (#)

    Hi this is great thank you just having a little bit of trouble finding out what to put at the beginning and end of the code to make it centre on the sidebar?

    Thanks :”)

  130. Jacqui posted on March 17, 2014 at 11:13 pm (#)

    Thank you SO much!! I have been wanting to do this for ages but had no idea how. Your tutorial is the best. Thank you.
    Jacqui

  131. Kacie posted on May 2, 2014 at 2:36 am (#)

    I know this is an old post, but it’s a gold mine! HUGE thanks, cause I totally did it! :D

  132. Andi posted on May 11, 2014 at 6:19 am (#)

    Thank you very much for this tutorial.

    I used Adobe Illustrator to create the photo with the icons that I looked for on Google. Some links in this post don’t work any more.

    The image mapper does work. It looks different now, but the functionality is the same.

    Cheers!

  133. O Williams posted on June 9, 2014 at 4:42 pm (#)

    Warning: I’m only 13 years old and have absolutely no clue what I’m doing. None. Nada.

    So…I tried to use this website on an image that I created using PicMonkey aaaaaaand….has the website changed in the past two years since you’ve posted this? (This is a possibility.) Or am I doing something wrong? (A much more probable possibility.)

    Because when I tried to map my image using the url (that I got after uploading the image to Dropbox), and it took me to the page where I could map my image, I just got a white screen. And I could right-click in the white screen and add where I wanted the image to link to, but I couldn’t see my image while I was mapping it. (I probably explained this very badly.)

    Sorry I’m sooooo late commenting, but if you even still use this blog, could you tell me what I’m doing wrong? Or…at least sort of try to with the small amount of information I gave you? Because I’m really confused. Thanks!

  134. Ashley posted on July 10, 2014 at 1:56 pm (#)

    Thank you so much! I have no coding/minimal computer experience, and I just successfully followed this tutorial in about 15-20 minutes. So very helpful to the person who has no idea what she’s doing. :)

  135. Beck posted on July 14, 2014 at 4:12 pm (#)

    I appreciate the tutorial. I never thought about doing this before coming across this post. Now, I designed social media icons for 4 different sites. :)

Trackbacks/Pingbacks

  1. Pingback: A New Look for a New Season | OneMommysThoughts

  2. Pingback: Tid Bits of Our Daily Life - The Mahogany Way

  3. Pingback: Free Social Media Icon Silhouettes and How to Use Them in Picmonkey.com - Something Swanky

  4. Pingback: Gone Fishing, or Something (in which I sort of DIY some technology) | Planting Sequoias

  5. Pingback: The Parsi Company » 13 Blogger Tutorials

  6. Pingback: 13 Blogger Tutorials

Leave a Comment