Domain favicon

[francis]

Hi David

How did you achieve getting a favicon on the websitearchitecture domain? I notice that it's on all pages without the need to code into each page

[francis]

Damn, I can't spell domain.



Fear not! - I have the power to correct B)

[David]

The Favicon Trick

For those of you who are not sure what Favicon is: it's the small icon that appears in your Favourires menu when you bookmark a webpage. See the image below.

http://www.websitearchitecture.co.uk/watson/postimages/favemnu.gif

Notice that some favourites such as the BBCi Homepage have the default Explorer webpage icon but others, like Website Architecture have a custom icon. This is the Favicon.

Once a page with a favicon is added to your favourites (bookmarked), it will also appear in the browser address bar when you view that page.

http://www.websitearchitecture.co.uk/watson/postimages/faveurl.gif

OK, so how's it done? Well, it's really very, very simple and it requires no code whatsoever.

To have a favicon for every page in your website, simply place a file called favicon.ico in the root folder of your site. If you want different icons for different parts of the site, you can place an icon in any folder on your site. The browser always looks for favicon.ico in the current pages folder first and if it is not found, it looks in the root folder. If there is nothing in either location, the default icon is used.

OK, so what kind of file is favicon.ico? Well, it's a standard Windows icon file that contains a 16 x 16px image. Unfortunately, none of the standard image editors (like Photoshop) can be used to create an icon file so you'll need some special software. Fortunately, there are lots of shareware utilities you can use. I am very fond of Microangelo (http://www.microangelo.us/) which you can download free for a 21 day evaluation. However, I recently moved to Icon Workshop (http://www.axialis.com/iconworkshop/index.html) which has a better feature set and a great interface. This can be downloaded for a 30 day evaluation.

Beyond that, there's not much point my saying more as there are lots of tutorials out there that give you the detail. Have a look at:
What is FAVICON.ICO? (http://www.thesitewizard.com/archive/favicon.shtml) at thesitewizard.com
Favorites Icon (http://www.yourhtmlsource.com/promotion/favicon.html) at HTMLSource

Of course, if you don't want to bother downloading and installing software, just pop over to
favicon.co.uk (http://www.favicon.co.uk) and make your icon online and have it emailed to you.

[James]

David,

I have trouble with Internet Explorer "forgetting" favicons and defaulting to standard "e".

Sometimes the favicon stays with my favourites list for a few days but ultimately it disappears! I have always found this so I don't bother creating them!

[francis]

Did you know that you can use PNGs with transparency for favicons? It's not supported everywhere (but let's not start that off again), but some browsers do support it. I've never managed to get a decent, non-haloed image even with a PNG, but when it works, it's very nice.

When trying to create something with an .ico extension, I've always just made a GIF and then changed the file extension to .ico. Probably not how it's supposed to be done, but it seems to work!

[David]

Originally posted by: James Barker
I have trouble with Internet Explorer "forgetting" favicons and defaulting to standard "e".

Sometimes the favicon stays with my favourites list for a few days but ultimately it disappears!

The reason for this is that the favicon file is stored in your "Temporary Internet Files" folder. Consequently, it will eventually be deleted by the system or by you if you decide to delete your temporary files. This is pretty anoying however, you can get around this by downloading favicon.ico and storing it in a different folder. This is a bit of a hassle and so you might want to try the FavOrg utility that saves favicon for you. You'll find it in an article entitled Clean Up Your Favorites (http://www.pcmag.com/article2/0,4149,9883,00.asp) on the PC Magazine site.

[David]

Originally posted by: francis
Did you know that you can use PNGs with transparency for favicons?

That's true but the native .ico format also supports alpha transparency under Win XP. So, forget PNG for favicon. Stick to ICO and you can have alpha transparent icons with all browsers!