How to make a Favicon

Have you noticed how some blogs have little icons against their names in Google Reader and on the address line of their blog page. They're called favicons (favourite icons?) and the other day I got round to making a personalised one for my blog (look its up there now!). Its so simple I thought I'd share the process so we can all have them! I'm afraid this is only a Blogger tutorial though I'm sure you could apply it to other platforms.

Its simple to do, all you need is an avatar image which you convert to .ico format and then upload through your blog dashboard. If you have some avatars made up already then it takes a couple of minutes. I already had a couple that I use in Flickr, Instagram, Pinterest etc.

Avatars need to be simple and graphic square images and the best keep their detail when they are shrunk to much smaller size. If you don't have one then have a look at other favicons to get inspiration. I've used the Butterfly Doily that appears on my cushions. This is a good image for an icon as its squareish to start with and one colour.  If you don't have Photoshop or Illustrator, you can use Picnik online which is free or a simple paint or photo program. Experiment with photos, fonts or drawings to find something you like.

Once you have the image its easy to convert it to .ico format. Here's an online ico generator which turns jpegs and gifs into .icos, or download this free plug-in for Photoshop to do the same job.

Once you have your image in .ico format then go to the layout section in blogger.  Starting on your blog page click Design in the top right corner. You'll be taken to the dashboard. Click on Layout in the menu that runs down the left side and you will see something like this, above. On the top left hand side as you can see it says Favicon. Click edit (circled in red) and you will be taken to this dialog box.

Remove the image that is there already and browse to find your new image. Then click Save and the new favicon should appear. When you go back to Layout save the arrangement. For some reason Firefox takes a while to change icons, but I've noticed that Safari works straight away. So go and check it there. In a while it should show up on Google Reader too, and you will notice quite a few people have personalised ones, including me now. Leave a comment if you make one I'd love to come and have a look!