Oct 29 2007

How to Make and add a Favicon to your Blog

Published by at 3:59 pm under blogging,General,wordpress

It might help you to know exactly what a favicon is, and why on earth you’d want to make one!

A favicon is a tiny little image (icon) relating to the website you are visiting, that appears in the address bar (and on a tab, if you’re using a tabbed browser like Internet Explorer 7 and Firefox).

Here’s mine – Blogpond favicon

Notice how tiny it is? Just 16 x 16 pixels.

But why would you bother? Well if your readers are anything like me, they can have numerous tabs open at any one time. The more open tabs, the less room there is on the tab for the name of the web page that is open.

So having a favicon enables a web surfer to quickly identify your tab from a series of open ones, and it can also help with branding.

Creating a Favicon Yourself

Because a favicon is so small, it’s impossible to work with a space that tiny. So if you’re going to create one, try using a larger square that is divisible by 16. Something like 64 x 64, 80 x 80, or 96 x 96 pixels…. You can do this in a program like photoshop or paint.

Favicons have to be in a .ico format. More than likely you won’t have the technology to save a file in this format. So you can save your image in a format like .jpg or .gif.

Using a Favicon Maker

Another option is to create an image from scratch using a favicon maker. There are a few nifty tools like this around, that will allow you to both create a favicon and convert an existing image into a favicon.

It’s good to keep in mind that as a favicon is so small, it’s better not to have too much detail. Bold contrasting colours work really well.

Using this service, you can also upload an image that you have previously created yourself and the program will convert the image to a favicon (.ico file).

Once you’re happy with the favicon, save it to your computer (using the favicon maker metioned above you, right click on the newly created favicon and save the image to your computer). Will notes in the comments that it is VERY important that you get the case right – it has to be saved as favicon.ico NOT Favicon.ico OR favicon.ICO or any other variation.

How to Add a Favicon to WordPress

Next you need to upload the favicon file on to the root directory of the server hosting your blog. As an example, my favicon is located at http://blogpond.com.au/favicon.ico – but don’t bother trying to look at it, because you’ll get a page of gobbledygook. If your root directory is something different like example.com/blog, then “/blog” is your root directory and that’s where you put the favicon file.

n.b. Will suggests that just uploading it to your root directory should be enough and the next step might not be needed – you could try doing this and then looking in an alternative browser to see if the favicon has been detected, before proceeding to the next step.

Next you have to add a little bit of code to your blog so it will recognise that the favicon file is there. In my wordpress theme the file I have to edit (under presentation/theme editor) is “header.php” (note: if you are reading this by RSS, it won’t make much sense because bits of it will not be displayed – feel free to click through if it’s of interest).

Right under

I added the following code:

Obviously you’d replace my url with the location of your own file!

You might not see the favicon right away. However, if you try opening an alternative browser it should show up.

How to Add a Favicon to Blogger

I don’t have much experience with Blogger, but this seems to work. If you go to “template” and “edit html”, directly under where is says you need to add the text below:

The url is where your image is hosted. I’m not sure if you have the facility to upload images to Blogger, if not you’ll have to host the image somewhere else.

If you decide to try it, let me know how you go.

11 responses so far

11 Responses to “How to Make and add a Favicon to your Blog”

  1. # Willon 29 Oct 2007 at 5:28 pm

    Hey Meg,

    Just adding favicon.ico to the root directory of the domain (not /blog, etc) will (should) get Internet Explorer and Firefox to find it, even without code.

    If you move the file, then you do need to add html code.

    Case can be important (and usually is) – make sure you name it all in lowercase – so: favicon.ico not Favicon.ico or favicon.ICO.

    Originally it came from Internet Explorer (4?) checking for favicon.ico in the root directory when you bookmarked a page. Now with tabs and Firefox, its’ fetched much more regularly.

  2. # Megon 29 Oct 2007 at 5:43 pm

    Thanks Will

    I did notice that on one of my blogs I hadn’t put the code into the header.php and the favicon was still showing.

    I just thought for people on shared (or sub) domains it would be better to include it in the root directory of their blog, so that not everyone would have to use the same favicon.

    Thanks for the hints :) I’ll mention it in the post.

  3. # Katieon 29 Oct 2007 at 6:06 pm

    I used to have a favicon on my blog but it’s gone (probably since I changed templates a lot). Maybe I should install another one. Thanks for the tips.

  4. # Karen (Misc Mum)on 29 Oct 2007 at 6:29 pm

    I LOVE mine :) A little ‘value-added’ in my opinion, for the blog….

  5. # Thiruon 29 Oct 2007 at 7:20 pm

    I have added a favicon for my blog a while ago. Firefox recognises it. But IE 7 doesn’t it. If anyone is looking for a tutorial on adding a favicon to Blogger Blog, here it is http://www.howtoliveonline.com/2007/06/how-to-add-favicon-to-your-blogger.html

  6. # Cellobellaon 29 Oct 2007 at 7:53 pm

    Nice post. I added a favicon about four years ago and completely forgotton how I did it. :) My hair has since shortened considerably! And Will’s right about not needing the code because mine is still there and I’ve not added any code.
    :)
    CB

  7. # Megon 29 Oct 2007 at 9:05 pm

    Hi Karen – yes it is :)

    Thiru – many thanks for the link, seems like I wasn’t too far off the mark… I see that IE doesn’t recognise it (you have the blogger icon). Did you add it to your header.php?

    CB – I have to ask, what is that favicon an image of? I notice it doesn’t come up in IE either. Hey you also have a text in the header on IE, but not FireFox.

  8. # Steven Snellon 30 Oct 2007 at 2:48 pm

    I need to do this. I just haven’t taken the time.

  9. # Pratishon 20 Nov 2008 at 4:15 am

    Hi.. Thanks for the great tips – have managed to create my favicon and upload it to the root directory of my wordpress cartoon blog (I can even see it in my browser if I go to wonkie.com/favicon.ico) – I’ve updated the header file exactly as you indicated (and changing the bigpond address to wonkie) – the problem is I can see the favicon fine on firefox but on IE7 I’ve tried just about everything and cannot get it to display at all on my computer!

    I am not sure if removing all site files in the temporary internet files folder is the same as removing the cache but have tried that too!.. any suggestions as to what I could try would be most helpful please!

    Pratish’s last blog post..Palin mentors Malema cartoon – part 2

  10. # Megon 20 Nov 2008 at 9:03 am

    Hi Pratish

    I’m not sure how (or when) you will get to see it, but I see it just fine in IE7 :)

  11. # ilzon 13 Jan 2009 at 4:14 am

    All the download links for the Photoshop plugin file seem to be down, so I uploaded it here for all to download.

    DOWNLOAD PHOTOSHOP FAVICON PLUGIN HERE

    ilz’s last blog post..How to create & add a Favicon to your website or WordPress Blog