Monday, 27 August 2012

How to create a Favicon for your blog

Hey guys, something I've noticed recently is how many bloggers don't have their own Favicon.  What is a Favicon I hear you say?  It's the little square box in the tab of your browser - most bloggers or at least a lot have the default blogger Favicon.

Makeup-Pixi3 Favicon

Blogger Favicon

Now, personally I often keep a couple of blogs on tabs pinned so they're always at the ready for me to look at :)  And, when they're all the default blogger icon, they're impossible to tell apart ;)  So here's a guide to help you make one :)


You'll need an image editing piece of software to make one, paint would be ok - personally I use Illustrator, but you can also do it with PicMonkey.  For the sake of this tutorial, I'll use PicMonkey, as everyone has free access to that.

So, first go into create a collage.

Next, click on the arrangement of squares on the left, and click the top selection 'Create your own'

Then, go to the bit at the bottom where you can put your sizes in, in the first number field type 50 and press enter.  Both numbers will change to 70, but that's fine.

Then, click on the artist palette on the left, and go to the top row where it says 'spacing'.  Move the slider all the way to 0.

When you've done that, you'll have a little square.  Change it using the colours on the left, to the colour you want as the background.  Hit Save at the top and give it a name :)

Go back to the main page of the site, and this time click on 'Edit a photo'.

Next, click on the 'P' on the left, pick the font you want and click 'Add Text', click on the text to change it (keep it to 2 letters at most, preferably one) and change it to the size that fits the square best :)

Then save it (.jpg is preferable, but .gif is fine too), give it a name and make a note of where you've saved it.

Then head to blogger, go to the 'Layout' tab and click on Edit on the Favicon.

Click on 'choose file' and locate your saved file.

Click on the file, hit ok and save it.  That's it done!  Click 'view blog' and your Favicon should show :)  If it doesn't, press F5 to refresh the page and it should be there then :)  Feel free to mess around and make tiny pics, you don't have to do it how I've suggested :)

That's it, done!!!!  Hope you've found this tutorial useful, let me know if you have any questions :)

Pixi3 out


  1. This was such a helpful post! I knew what the favicon was, and had always wanted to make my own, but never really got around to it. I think you make such a valid point about how you keep multiple blog tabs open. I do the same thing! I'm gonna follow these steps tonight to create my own. Thanks for sharing!

  2. This was so helpful. I used paint, but still followed your instructions, I'd never thought to do it on paint before. I'm pleased I now have a favicon.

  3. Oh my god, I feel like an idiot for never seeing Favicon bit before! So thank you :D


  4. just done this from your steps! ive been wanting to do it for ages!

  5. Oh thank you so much this was really helpful, I'll definitely get my own x

  6. Wow i didnt know it was that easy, i am sure i will use this in the near future, thanks!!

  7. I tried this and for some reason it doesnt work for me! I upload it and it says my favicon is the one I uploaded but it stays as the blogger one! xx

    1. Try refreshing the page :) You need to make sure you're on your blog and not on the blogger dashboard - other wise you won't see it :)

  8. THANK YOU! Finally managed to change it, very simple, :D xx

  9. thanks for doing this tutorial... i am gonna try it right away *.*

  10. This is so helpful! Thank you so much, I now have a moustache favicon ;)

    Thanks again


Thank you for taking the time to leave me a message :)

Please note that 'lets follow each other' type comments will be deleted and not replied to.

© Makeup-Pixi3. All rights reserved.