Friday 9 December 2011

How to make a Favicon

Doily print Cushion cover

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.


favicon1

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.

favicon

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!

4 comments :

  1. Oh Thanks! I have always wondered how to make one of those (didn't even know what they were called)!

    ReplyDelete
  2. They are cute aren't they... and so easy to do :) I think it may take a few days to update as I can't see yours yet???

    ReplyDelete
  3. Thanks for tutorial - it all sounds so complicated to me! Perhaps I'd better read it again in the morning when I'm awake!! LOL

    ReplyDelete
  4. You generous soul, Susie, sharing this tip. I've had my pink butterfly for ages and just love it. I'm so pleased that Blogger finally made it a DIY project! J x

    ReplyDelete

Thank you for dropping by and commenting :-)