How To Create a Favicon For Your Blog Using PicMonkey


Seems as though most blogs and websites have their very own favicon, those teeny tiny images you see along tabs and in bookmarks.

favicon on tab

These are another way to have your blog stand out from the crowd, handy when you have a whole heap of tabs open!

To make one is super easy, honest, and I’m going to show you how.
When choosing an image for your favicon you want to take into consideration that it will be shrunk A LOT! Much of the detail will be lost in the shrinkage.

You also might want to go with something that ties in with your blog header and blog button, be consistent!

Once you have decided on your image, upload it to PicMonkey.

upload photo for favicon

Resize your image to about 100x100.

resizing favicon

Add any effects, remember, anything to fancy will most likely be distorted when the image is shrunk further.

adding effects to favicon

Once you are happy with the image, {Save} it to your computer.

Next you need to open a new web page and go to favicon.cc

This is where your image will be turned in to an actual favicon image.

creating a favicon

Use the {Import Image} tab to open select the image you want to use as your favicon.

When the {Import Image} window opens, you will need to select {Choose File}, this will allow you to select the image you want as your favicon.

Then hit {Upload}, this is upload your favicon image.

uploading favicon image to favicon

Your favicon, will appear.

Don’t Panic! It is supposed to look like this!

uploaded favicon image

Below the favicon image will be your favicon code, copy this.

download favicon code

Now that you have the code for your favicon you need to add it to you blog.

From your blog layout, go to {Layout}.

In the top left hand corner you will see the Favicon gadget tab, click on {Edit}.

blog layout for favicon

When the {Configure Favicon} window opens, you will be able to {Choose File}, this is the one you down loaded from Favicon.cc.

configure favicon

Once uploaded, you will see a small image of your favicon.

If you are happy, hit {Save}.

uploaded favicon to blog layout

Your favicon image will now appear in the top left favicon gadget.

favicon image on blog

So, now you have your very own favicon!

I hope you found this useful, if you have any questions please ask!

Once you have done all the steps to great your favicon, it can take Google or which ever browser you use about 24 hours to crawl your blog and pick up on the new favicon. Don't panic if you can't see the new one right away!


44 comments :

  1. I followed all of your directions and everything works just fine all the way to uploading the favicon in the configuration. It shows up there, but when I view my blog I still have the blogger favicon. Not sure what the deal is? Any idea where I could have gone wrong?

    ReplyDelete
  2. Thank you so much that was so helpful! If you'd like to check out mine its justanotherwittyblog.blogspot.com :) Thanks times a million!

    ReplyDelete
  3. Thank you so much. I followed your instructions and I managed to make my favicon!

    ReplyDelete
  4. Thanks for sharing!!

    www.showeredwithdesign.blogspot.com

    ReplyDelete
  5. Thanks for such great directions.Everything worked perfectly.

    ReplyDelete
  6. I followed all of your directions and everything works just fine all the way to uploading the favicon in the configuration. It shows up there, but when I view my blog I still have the blogger favicon. Not sure what the deal is? Any idea where I could have gone wrong?

    ReplyDelete
  7. Great tipz, keep em coming *winks*

    ReplyDelete
  8. This was a very helpful guide, much appreciated. To those showing that it still displays the Blogger favicon, wait for a few minutes and try refreshing; that worked for me.

    ReplyDelete
  9. thanks for the help, want to get started with my blog.........www.onlinetecgit.blogspot.com. Thanks alot

    ReplyDelete
  10. After uploading my custom favicon I end up only seeing blogger favicon in my browser tab.

    ReplyDelete
  11. Superb walkthrough.
    I have followed it step by step.
    The picmonkey and favicon both are excellent sites. Thanks for introducing them.

    ReplyDelete
  12. Thank you so so much! This was a great walkthrough! I've been trying to figure this out myself for ages but had no luck. xo

    ReplyDelete
  13. I followed all direcions but my favicon isn't showing :(


    cosittos.blogspot.com

    ReplyDelete
  14. Forgive me for being a completely blog nooblette, but what is the purpose of a favicon exactly?

    ReplyDelete
  15. You need to clear your cache for the favicon to show up. Thank you for the great directions. I didn't realize Blogger now lets you add it to the layout rather than insert it into the code.

    ReplyDelete
  16. This was so helpful and well explained - thank you so much !!

    ReplyDelete
  17. Thanks for creating this nice tutorial. I successfully made a favicon and added it on my blog.

    Regards,
    Abdur Rakib
    www.bestwaysofblogging.com

    ReplyDelete
  18. This is awesome! Thanks alot for the simple tutorial. :)

    ReplyDelete
  19. After uploading my custom favicon I end up only seeing blogger favicon in my browser tab.

    http://systemclue.blogspot.in/

    ReplyDelete
  20. I followed all direcions but my favicon isn't showing,,,how to delete cache
    http://systemclue.blogspot.in/

    ReplyDelete
  21. These tutorials are so helpful! Ah, thank you! =)

    http://adventuresofbria.blogspot.ca/

    ReplyDelete
  22. Thank you for making this wonderful demonstration on how to get a favicon, I always wondered how people got one and know thanks to you I will have one xx <3

    www.affectionforglamour.blogspot.com

    ReplyDelete
  23. Thank you so much! So helpful :-) Everyone just refresh your screen with F5 button & you will see it appear ;-)

    Whimsy Living

    ReplyDelete
  24. Thank you very much! Your tutorials have helped me immensely! :)

    ReplyDelete
  25. my favicon is replaced but it is not changing i have uploaded animated favicon..Please help!!

    ReplyDelete
  26. Thank you so much! ive been wanting to know how to change my favicon for ages!
    - Linsey
    redvelvetkiss.blogspot.co.uk

    ReplyDelete
  27. Very helpful, thank you so much!

    iamsyndayarayan.blogspot.com ♥

    ReplyDelete
  28. Super easy directions and super easy to do, thank you so much!
    Hannah
    pookybanana.blogspot.ie

    ReplyDelete
  29. Ah finally. Thank you!


    www.naturallyjes.blogspot.com.au

    ReplyDelete
  30. Thanks so much soooooooooooooooo helpful

    ReplyDelete
  31. this tutorial was GREATLY appreciated! Thank you. Google didn't pick it up yet, but that's alright, it will! :D
    Keep up the cool tutorials, I followed you on G+!
    Marc

    ReplyDelete
  32. I did everything and I see the favicon in layout, but it is not showing up. I even restated my computer. Any ideas? Thanks!

    ReplyDelete
  33. Thank you so much for this tute! I finally got mine. Easy to follow. :)

    ReplyDelete
  34. thank you so much for this tutorial! very easy to follow! nice one.

    ReplyDelete
  35. Thanks for the tutorial - super easy to follow!
    Angela
    alittle-aboutalot.blogspot.com

    ReplyDelete
  36. Thank you great explanation!!

    cathshowerinspired.blogspot.com

    ReplyDelete
  37. Thank you...it was so easy to understand!

    ReplyDelete

Thank's for taking the time to read and comment, I appreciate each one!

09 10