Web Development Blog

A question I get asked a lot by die IM posse is how to “get that little icon in the tab on Firefox” so after giving these instructions quite few times I have decided to put a post on here so that I can just direct the next person directly to a complete guide to installing a favicon (Yep, that’s what the little icon is called )

So, firstly we have to create this icon that we want to use, and the best way to do this would be with a graphical application like Photoshop or Paint Shop Pro and create an image with the dimension 32px x 32px. You can also have transparent parts in your favicon, just remember to save it in PNG8 format for that.

OK, so now you got your creative on and you have a favicon that you absolutely love! Now you just need to get it to the .ico format and for that I am going to direct you to a online converter at http://tools.dynamicdrive.com/favicon/

On there you basically browse for the file, say “convert” and tada! You have a favicon.ico file and even ‘n preview of what it will look like.

All that is left to do is to ad the file to your website and that is also a pretty easy thing to do. Firstly upload the favicon.ico file into your root folder of your site. (This is the same place where you can find you index file)

All you need to do now is to enter the following line into the head section of your site:

<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” />

There you go, that was pretty easy hey.. Your site can now boast with his/her own little piece of site bling!

OK, so you spend the whole day trying to get this huge project out of the way, but just as you are about to finish up, you decide to run it through all the other browsers to make sure that your work is up to standard and that the maximum amount of Internet users can view your site as it was intended…

Firefox works perfectly, as does IE7, Opera and Safari - all except IE6… *sigh* I truly hate the fact that there are still people using Internet Explorer 6!

I think the problem is that a lot of these people don’t realize that there are newer browsers available and there is nobody to inform them. The fact that we keep tweaking for IE6 (and older) only helps for one thing: keeping these people in the dark ages!

What I propose to do is simple: we just start adding a notification block to the top of pages when they are being opened by Internet Explorer 6 or earlier. This is also a lot easier than it sounds.

The first thing we need to do is to create a stylesheet that will only be read by IE6 or earlier and Microsoft actually provided for this to be doable when they added conditional comments to their browsers. We will call this stylesheet “oldie.css” and we call this in the header of our page, wrapped in the conditional comments like this:

<!–[if lte IE 6]><link rel=”stylesheet” href=”[stylesheet folder]/oldie.css” type=”text/css” media=”screen” /><![endif]–>

This basically means: If the browser is lower or equal to Internet Explorer 6, load “oldie.css”

Ok now that we have the browser-specific stylesheet in place we can make it work for us.

You can now create a container at the top of your page with some sort of message in it, telling your visitors to go get a newer browser to stop seeing the notification.

Now this is where the browser-specific stylesheet comes into play. In the normal stylesheet we will set the display value of the container to “display: none;” and in “oldie.css” we will set it to “display: block;” causing only people using Internet Explorer 6 or earlier to see this container.

Here is a zip file with all the files you will need, You are most welcome to use this on your site: Download

(If you access superevil.za.net with IE6 or earlier, you will see this element in action!)

Just as an extra note, I think that we should continue (at least for now) with tweaking our sites to work on older browsers, but if enough people start doing this we will create the awareness we need to phase out IE6 completely.

Over and Out!

UPDATE: James from MentallyRetired had a very similiar idea.