Favicons For Wordpress

August 20, 2007

Favicons are those little graphics which you can see on your browser. If you are using Firefox, you can see it directly on the left of your URL bar. So like when you browse to this blog, you can find the flag icon on the URL address bar. Yes, it’s that icon. For Internet Explorer and depending on which version you are using, you can find them on either when you click on your favourites or for Internet Explorer 7, you will find them exactly like on Firefox. Yes, everyone like Favicons. They are great. Why? Well because they look great on your Firefox and on Internet Explorer’s favourites. Other than that, I am not too sure why it is great.

Oh, if you are thinking of setting up a favicon for your website, you must realize that Internet Explorer is a bit flaky when it comes to favicons. You need the 16×16 version with 256 colours icon. If your icon has different versions in it, it will not appear in Internet Explorer 7! It will work without problems in Firefox, but somehow Microsoft is too lazy to do anything about it and we are left with some problems. A lot of online sites which help generate favicons for their visitors still had 32×32 version of the favicon and too often they would ask why can’t they see their favicons in Internet Explorer 7. Well, just strip that version out and it would work fine.

To create a favicon which works for all versions, you need to create a 16×16 pixel image and make sure it has 256 colours. After you have that image, you need to change it to an “icon”. It’s not as simple as renaming the file as “.ico”. You need a graphics editing software to do it. You can try Irfanview. Just open the image file and then save as “.ico”. Or you can just use those online favicon generators like Chami.

And if you are thinking of setting up your very favicon for your Wordpress blog, well, it’s very simple. Just upload the favicon file (favicon.ico) to your webserver document html root, and then download the header.php from your template folder. Then with a text editor, you need to do some minor changes to it. In between the <head> and </head> tag, add this code to it:

<link rel=”shortcut icon” href=”favicon.ico” mce_href=”favicon.ico” >

If you want the favicon to appear on every page of your blog, then use this code instead:

<link rel=”shortcut icon” href=”<?php echo get_settings(’home’); ?>/favicon.ico” >

Upload it back to where you have downloaded it from and overwrite the old file. That’s it! You are on your way to looking good like my blog.

No comments yet.

No Comments »
Name:
Email:  
URL:   
Leave A Reply:

XHTML: You may use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>