Tutorial: How to change your favicon

How to change your what?!

As part of my recent blog renovation, I got a bit obsessed about having my own favicon. A favicon is the little symbol that appears at the beginning of the tab, before the name of a website. You've probably seen them before, but if not, see the photo below.




Of course before I started, I had no idea what this was called, but Google is a wonderful thing. So, favicon apparently means "favourite icon" and it basically acts as an identifier, drawing the internet surfer's eye to the tab containing your website or blog. You will already have one, but it will be Blogger's favicon - that white and orange B you can see above. Actually creating your own in Blogger is quite straightforward. In case you are interested, I thought I'd write a little tutorial. Sorry I can't help out the Wordpress or self-hosted users, but as I said before, Google is a wonderful thing, and at least you now know what to search for. :)

First up, you need to create your image. I chose to use letters for mine. You can use an image, but bear in mind it's going to end up very small, so I'd choose something very simple and clear. The image also needs to be square. I used Picmonkey, a free online photo editing tool, to create my image. Open up Picmonkey and select Design from the top of the page.

This will bring up a square blank page. If it gives you a different shape, don't panic, you'll need to crop your image anyway.

If you want to create an image using letters, select Text from the menu on the left hand side (it's the Tt), then click on Add Text.

This will bring up a text box. Type your text (remember: keep it simple! I'd say 1-2 letters at the most!), and then play around with colours and fonts to get the look you like. I chose a green colour and the font Didact Gothic, as it mirrored the font on my blog theme.


This next step might not be necessary, as you are going to crop the image anyway, but I then made the letters as large as Picmonkey would let me.

If you want to use a photo, or similar image you can still select Design and then just upload your photo/image. The following steps will still apply.

Now crop the image. Go back to the left hand menu and select the Basic Edits (the top one) and then crop. Go to the drop down that says "No fixed proportions", and select "Square", then crop the image as much as possible. You want your letters/picture to fill the image as much as possible.

Once you are happy, click Apply and save the file to your computer.

Now that you have your image, you need to convert this to a favicon file - a .ico file. You can do this through a favicon generator. There are loads online. I used favicon.co.uk.

Select Choose File and then find and select your image. You can select your Favicon size, but I have to confess that I don't really know what size is best. I selected 16 x 16, but not really for any particular reason.

Then click Generate Favicon. Once it's generated, it will give you a preview. If you are happy, download the .ico file and save it to your computer.

Now that you have created your favicon, you need to upload it to your blog!

Open Blogger and go to Layout. You will see there is a box called Favicon at the top left of the page.

Click Edit, then Choose File and upload your favicon. It will display your image. Click Save, then Save Arrangement.

If you now open your blog, you should see the Favicon, and I did read that it can take a while to update, but after a couple of days mine still hadn't uploaded (I didn't intend to leave it that long - I was just busy!). Further Googling revealed this final stage.

Have your blog open. Open another browser page and type the following into the address bar: http://[your blog url]/favicon.ico. Refresh the page and the favicon on this page should update to your image. Return to the your blog and refresh. Your blog should now have your favicon!

Hopefully this will work for you too! Do let me know if you give it a try!