Home > HTML > Adding favicons to your site

Adding favicons to your site

Hi,

After moving my site over to my new host I did a couple of little jobs on it. The first thing I did was to sort out some of the 404s that I’ve been getting. One of those is that my site is missing a favicon. A favicon is the little icon that is displayed on Firefox tabs or next to the URL in Firefox. IE also supports it. It is a 16×16 image that needs to be saved as a ‘.ico’ file. Photoshop doesn’t export to this format natively but there is a free plugin available for it at the Telegraphics site. Once I created a simple image I exported it and FTP’ed it into the webroot of my site. I then edited my skin header and within the head tags I added the following lines of html:




The extra couple of lines are to satisfy IE’s oddities.
You can also use png or even gifs for this but if you don’t use the ico format IE doesn’t play nice.

Once thats been done you should be ready to go. Most browsers won’t show the icon unless you clear your cache and restart your browser, IE6 won’t display it unless you actually add the site to your favourites.

Safari also has some problems. Emptying the cache in the regular fashion won’t clear the favicons. You need to go to the ‘Edit’ menu and select Reset Safari. Check Remove all website icons. If this doesn’t work, quit safari and you’ll have to manually clear them by going to User/Library/Safari/Icons and in Windows C:\Documents and Settings\YourUserName\Local Settings\Application Data\Apple Computer\Safari\WebpageIcons.db.

You may see the little grey ‘EL’ icon that II now have on my site, that’s it!

Categories: HTML Tags:
  1. No comments yet.
  1. No trackbacks yet.