How to Create a Favicon for Your Blog

1 June 2015


As you can probably tell from the picture, A Favicon is a small image that appears in tabs, and bookmarks in your internet browser. All good websites have them, and if you haven't edited yours before, you still have one but it will be the orange square with the white B in the middle. (If you're using blogger).

Gross! Your fancy blog is so much better than that! So here's a little guide showing you how you can create your own. I'll also show you how to install it! Spoiler alert, it's super easy! You'll wish you'd done it ages ago. 

Choose an Image

Because your favicon is incredibly small. About 16x16 pixels! You want to choose something that is going to be visible at such a tiny size. Which means sorry, that cute picture of your dog, it's not going to be very visible. But a clipart picture of a dog might be! It can be a bit of trial and error before you find out what is actually going to look good at such a small size.

Here are some examples:

So the first one is a bust, to no one's surprise, but the second one! Puppies for all! As a bonus, see how much the dog icon stands out when there's no white around it, just some left inside the dogs face. That's because it's surrounded with transparent pixels. Don't freak out just yet! I'll explain everything..


Welcome to Photoshop

I'm sorry, I know there's probably quite a few people that don't have photoshop, but if you're quite keen on blogging it's definitely worth it! I'm going to show you how to create a super basic and Favicon for your blog using an icon from The Noun Project. So the Noun Project has free to use icons, that all you have to do is put a small disclaimer somewhere on your blog about where you got it. Otherwise you can pay a couple of dollars and use it without fear forever!

So go ahead, click on over to The Noun Project and pick out your icon. The search system is fantastic and there's a lot to choose from so have a look!

For my example today, I thought I'd pretend I'm a beauty blogger and choose some lips!

So all of the icons are black, so I will super quickly run through how you can colour them really easily.


Select your icon with the Magic Wand tool (in the blue circle) You want all black pieces of your icon selected. You can hold down command + shift (control + shift on PC) while you click to be able to select them all at once. After you've selected it all, go ahead and click on the paint brush tool, pick a colour in the palette down the bottom on the left. It will look like two squares.


Then paint in your icon whatever colour you want! Here's my lips half painted pink. Go nuts! For icons with more detail, you can select different parts at a time, to paint things different colours.

Now Back to It!

I've painted my lips a lovely pastel pink colour and now I want to shrink it down to use it as a Favicon. But first, what will look better than a fully white square around the lips would be either no white space, or a small white circle around the lips. So go ahead and cut them out.

You can always leave the square if you like! Otherwise your icon should be looking like one of these.


Those checkered squares are transparent or blank space, so once your image is out of photoshop, they won't appear when you view your icon.

Rezize Time!

Go up to your toolbar that runs along the top of your screen. Click "Image" then "Image Size" and you want to resize it to 16 pixels by 16 pixels. Unless your image is a perfect square then you won't be able to get it exactly 16x16. So make sure it is first. Now shrink that baby down!

Note: If you have an icon already and are unable to shrink it, Blogger auto does it for you! So scroll down and skip to installation instructions!

Once You've shrunk it down to 16x16 pixel you have to save it as a special file type in order to keep the transparent pixels. So if you have the empty space, save it as a PNG file. If your square is full of white space or colour, go ahead and save it as a JPEG.


So here are four different examples of how your icon can go, I picked a pastel pink, and it stood out really nicely with the white circle, but without, it blended in too much with the grey. In a darker pink it stood out a lot nicer, the first one is the lips with the white still in the middle, and the last one is without. There are so many options!

Installation!

Phew! I hope that wasn't too confusing. 
Okay on Blogger you want to go to your template settings option! It's down the bottom of that list of links that is underneath the big orange "NEW POST" sign. You would have been there before because it let's you move around all your blog stuff. 

There's a small white rectangle in the top left hand corner of the templates box, that you've probably ignored before now. It says "Favicon"! It's a good sign.

Click "Edit" A box will pop up for you. Then you just need to press "Choose File" and go ahead and find your icon image that you've saved. Click on it and then press save and you are DONE!
Woohoo! Sadly, it can take a few days before it officially attaches to your account so that it's visible to you and the world. But if you can see it in your template settings then just know it's loading up.


Tada! Easy peasy, and not stressful at all.. I hope.. 

Remember you can use whatever image you want, it just needs to be an exact square shape. Try to pick one that actually matches your blog and it's theme and colour scheme. 

If that was actually super confusing and you have any questions, post them in the comments and I will help out as much as I can!

Cya! xx

More from Blogging 101:



Follow Me on Bloglovin' / Follow Me on Instagram

45 comments

  1. I have a favicon but I'm saving this so I can redo it tomorrow! Love your blogging tips!

    www.sophieslittlesecrets.blogspot.com

    ReplyDelete
  2. Hahaha, this so helpful for beginners! I wish I knew this when I was just starting out

    xx Bash | Bash Says Hey | bloglovin'

    ReplyDelete
  3. Your blogging tips are awesome! I'm definitely gonna give this a go, although my tech skills are limited!

    Lucy x
    Yellowicing.blogspot.co.uk

    ReplyDelete
  4. This is really helpful even though I already have mine...can always improve it :D

    Pam Scalfi♥

    ReplyDelete
  5. very useful thanks!giulia
    www.theslashgirl.com

    ReplyDelete
  6. Cool !! I didn't even know that you can do that by yourself, haha. I thought you need some fancy designer for that. Great post - thank you for sharing :)

    x Stefanie
    http://www.thefashionrose.com

    ReplyDelete
  7. great tutorial Honey! i'll use it asap! :) thanks a lot !
    greetings
    Vivi:)

    Vivienne Night Blog
    www.vivinight.pl

    ReplyDelete
  8. Thanks for this great tutorial! It's made the process of getting a favicon for a website much easier :)

    Sarah
    https://everydayconcepts.wordpress.com/

    ReplyDelete
  9. this post was very useful..we always must pay attention to what the image would look when it is tiny. I like your suggestion, the one with the lip- very simple and will be noticeable even in a small format.

    I'm a bit technically challenged so I really appreciate this kind of tutorials...thanks so much!

    http://modaodaradosti.blogspot.com/

    ReplyDelete
  10. Im going to try this out!
    www.norawears.com

    ReplyDelete
  11. I am totally pinning this.
    I made a favicon when I first created the blog and then forgot how I made it. I've wanted to change it for a few months now, and now I've got the motivation and knowledge to do it.
    Thanks Tegan! :)

    ReplyDelete
  12. So helpful! Thanks for sharing now I want to change my favicon. xx

    Trend-Mae

    ReplyDelete
  13. Very helpful post! I think a favicon makes your blog a little more unique and personal :)

    RachelShuchatMakeup

    ReplyDelete
  14. Thanks for sharing this post, it was helpful. xx

    Nina
    http://www.ninasstyleblog.com

    ReplyDelete
  15. What a fantastic tutorial! You've made it look really easy!

    Rachael at broomfie.blogspot.com

    ReplyDelete
  16. Love this! Thanks for the step by step on how to do this :)

    RedLip&Love

    ReplyDelete
  17. omg, this is such an amazing post my dear! really helpfull :D xoxo

    ReplyDelete
  18. That Blogger B... BLEHH. Haha ;P thanks for the tutorial! -Audrey | Brunch at Audrey's

    ReplyDelete
  19. I just have to make one for me :) thanks for the great tutorial:)

    http://lovelyattitude.com

    ReplyDelete
  20. I only recently learnt how to do this - so it's really nice that you are helping people out :) Sophie xx
    www.fashionnomads.com

    ReplyDelete
  21. Great tips, I wish I saw this a while ago, but Favicons do add a little extra to your blog so I am sure youre helping others.

    xx Falasha

    Bite My Fashion ll Instagram ll Bloglovin'

    ReplyDelete
  22. Very helpful post, I certainly come in handy))

    With love, Nastya Deutsch ♥
    http://nastyadeutsch.blogspot.ru/

    ReplyDelete
  23. just come across your blog and I love it! A neat and fresh looking blog always catches my attention. I also like how you have your own logo which you've used as a favicon, which is something I need to do for my own blog as well.
    Definitely going to be using this blog as inspiration for my own as I've only just started blogging :)

    Amrit♥
    www.allthingsamrit.blogspot.co.uk

    ReplyDelete
  24. I have always wondered how to do this! Thank you for such an informative post. I'm saving this for later!
    Brooke | brookewrote

    ReplyDelete
  25. Very helpful!! Thanks for sharing.
    Xoxo

    http://www.sweetsimpleday.com

    ReplyDelete
  26. omg thank you so much for thos post!!

    Ana ♥
    http://aruivablog.blogspot.pt/

    ReplyDelete
  27. Such a useful post, i remember when i did this and it took me forever to find out!x
    Jess x
    www.momentsofbeuatywars.blogspot.co.uk

    ReplyDelete
  28. What an amazing post! This is so helpful, thank you so much for sharing! Have a great week sweet girl:)

    xo
    www.charltonlee.com

    ReplyDelete
  29. Such great tip :) I need a new favicon soon so I will keep these in mind! :D

    www.maireem.blogspot.com

    ReplyDelete
  30. I remember the first time I tried to make a favicon, I thought it was a lot simpler at the time and mine ended up being blurry and just a mess lol. Now my favicon is just a black square lol. Nice and simple, and hard to screw up.

    Z · JPOTTER

    ReplyDelete
  31. This is such a great tutorial, I love these kinds of posts! Too bad I use Wordpress instead of Blogger though haha. Great instructions though, thanks for sharing!
    xo Kiki
    https://colormekiki.wordpress.com/

    ReplyDelete
    Replies
    1. I totally put in a link for Wordpress instructions at the end :) xx

      Delete
  32. This is going to be so useful when I jazz up my blog and move into my own domain. Thank you for sharing! (And thank you for commenting on my blog as I now know the existence of your own awesome space of the internet - I'm loving your blog!) x

    Ornella || euhnella

    ReplyDelete
  33. Just a nice tutorial, thank u so much for sharing!

    STYLE & FLOWERS // BLOGLOVIN

    ReplyDelete
  34. Great tutorial! I love having a favicon, it gives your blog or website that little extra something

    xo - Naomi in Wonderland

    ReplyDelete
  35. Thanks for this! I am going to try this very soon :)

    ReplyDelete
  36. This is amazing! I'm thinking about changing my favicon again lol :)

    Miss Eleigh Neux | Bloglovin

    ReplyDelete
  37. This is very insightful, thanks for the share! :) xo~ Lena
    www.felinecreatures.com

    ReplyDelete
  38. I didn't know how to do this before! Thanks for sharing!
    Melanie @ meandmr.com

    ReplyDelete
  39. This is awesome. Thanks for sharing this with us and visiting my blog.
    Kind regards! :))

    missymayification.blogspot.co.uk

    ReplyDelete
  40. What a great, helpful post! x
    fashonismyfirstlanguage.blogspot.ie

    ReplyDelete
  41. Great tutorial.
    http://www.dianavilic.com/

    ReplyDelete
  42. I love this post it is so helpful! Just found your blog and I absolutely love it :) x

    thelibstick.blogspot.com

    ReplyDelete

Thanks so much for commenting everyone! I read and appreciate every single one of your comments! xx