Wednesday, 23 February 2011

Making a favicon for your Blogger/Blogspot blog

As an escape from the PhDemon, I decided I would look at how to make a favicon for this very blog. You may be asking "What's a favicon?" in which case I suggest glancing at the relevant Wikipedia article, it's basically that little icon you see on your browser tab. If you aren't browsing with tabs, I'm presuming your browser predates "Thunder Thighs". More gory, imaged details are over at the Google Chrome Browser blog, from which most of this is drawn.

The first step, obviously, is to actually make a favicon. I quickly put together the one you see here using Inkscape. I'm no design guru (although I find it a fascinating subject), so I just went for a shiny black background and white text, a bit like the blog title. Maybe I can increase the number of magpies that read this. I exported that from Inkscape as a PNG and used GIMP to shrink and convert to an icon file. I rendered the original at 160x160 but shrunk it down to 24x24 because there's possibly an upper limit to the size (36x36). If you're lazy, you can just use an online tool to faviconize an image.

This brings us to the subject of image format. Basically, I can't seem to establish what formats are usable. PNG, GIF or ICO (Microsoft Icon) should all work. Apparently x-icon should too but support isn't as widespread. Your choice of format will correspond to an appropriate specification in the HTML that we're about to add to the template.

Secondly, you need the favicon to be hosted somewhere online. This part is left as an exercise for the reader. Most of the blog posts I found on the matter recommend defunct services. A current example would be ImageShack but, like I said, any service will do.

Now, to add the favicon to the Blogger template. From your blog's homepage, click "Design" and then "Edit HTML". The following code should be entered somewhere in the header block (i.e. between <head> and </head> but not inside any other command)

<link href="http://www.example.com/username/favicon.ico" rel="shortcut icon" />

and one of the following (depending on file format).

<link href="http://www.example.com/username/favicon.ico" rel="icon" type="image/vnd.microsoft.icon />
<link href="http://www.example.com/username/favicon.png" rel="icon" type="image/png />
<link href="http://www.example.com/username/favicon.gif" rel="icon" type="image/gif />

where the URL should be replaced with the location of your favicon. That should do it!

A couple of details. The first is that I haven't been able to test extensively for what formats and sizes do and don't work or on what browsers. It seems to work on Firefox 3.6.13 and Chrome 9.0 using a PNG for the second format. If you're testing with Firefox, you might find that the favicon isn't refreshed when you change it. One solution is to load the favicon by entering its URL in the address bar. This appears to flush Firefox's cache and worked for me.

1 comment:

  1. In this age of technological ubiquity and consumer techno-lust, there is one thing that will always separate the geek from the user: OPTIMISATION!
    By taking the time to create your very own, entirely personalised and unique favicon (and then blog about it) you have marked yourself out as a true geek. I'm not insulting you.

    To flush Firefox's cache when refreshing, hold Shift. Dunno if that works for favicons though.

    ReplyDelete