Ever wondered how to set up a "favicon" - one of those tiny logos that appear
in your "location" line of your visitor's browsers? Ever tried to do it and
found that - in spite of following all the instructions - it hasn't
worked. Yes, I've been there too - but you'll notice that "favicon"s are
now starting to appear on our web site!

What are the things you should know about "favicons" ... that will help you
to get them working on your site for as many of your visitors as possible.

1. The format for a "favico" is the .ico format ... originally a Microsoft
standard but now (slightly) more available. If you use a .png file it
will work on some browsers but not on others.

2. To work consistently, the image must be tiny - 16 pixels x 16 pixels.

3. Browsers cache icons and even clearing out the cache isn't guaranteed to
reset them - in fact it probably won't. I describe this as "supercaching"
and they do it because you want to come back to your bookmarks days, weeks,
months later. Which means that if you have a problem and fix it, it's
very unlikely you'll realise you've fixed it when you reload.

4. The original tag type for the link was "shortcut icon", but that didn't
conform to the standard and so it was sort of switched to "icon".

So it it little wonder that even we have had a few problems with this one!

My suggestion for putting up a favicon and getting it seen on the widest
variety of browsers in the quickest possible time (i.e how to also expire
supercaches)

1. Design the icon as a .png and CHECK that it's 16 x 16 pixels

2. Use a program such as png2ico to turn it into a .ico file

3. Give the .ico file a new name - do NOT call it favicon.ico (I've used whc.ico for ours)

4. Add the following two lines into each page's head block:

<link rel="icon" href="http://www.wellho.net/whc.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://www.wellho.net/whc.ico" type="image/x-icon">
(written 2005-12-14 14:52:28)

Commentator	says ...
Caitlinn:	There's a plugin to create favicons native in Photoshop. http://www.telegraphics.com.au/sw/ I've had good results with this. (comment added 2005-12-14 18:39:24)
Graham Ellis:	Indeed, yes ... there's a number of such plugins around - another one we came across / tested / used was at http://www.photoshopsupport.com/tutorials/jennifer/favicon.html The problems that I've seen people having (and some of my own experiences in this area) relate(d) more to ensuring the icon file was the right size / format to deal with browser specific issues and (especially) in testing with that darned "supercache" thing which .... well - I can understand why it's done but it's one heck of a nuisance and very confusing if you don't realise what's happening. (comment added 2005-12-15 05:19:12)

W511 - Web and Intranet - Further Aspects
W501 - Introduction to Web Site Structure
G902 - Well House Consultants - Web site techniques, utility and visibility

Back to Greater Western Franchise Awarded

Previous and next or Horse's mouth home

Forward to Halal in Melksham

Copyright - how much can I legally copy?
Packages in packages in Perl
Perl course during the week, getting married at the weekend
Halal in Melksham
Getting favicon to work - avoiding common pitfalls
Greater Western Franchise Awarded
Apache httpd - serving web documents from different directories
Vision AND venture
Santa comes to Melksham
Apache httpd release 2.2
Link to page ... 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35 at 50 posts per page


This is a page archived from The Horse's Mouth at http://www.wellho.net/horse/ - the diary and writings of Graham Ellis. Every attempt was made to provide current information at the time the page was written, but things do move forward in our business - new software releases, price changes, new techniques. Please check back via our main site for current courses, prices, versions, etc - any mention of a price in "The Horse's Mouth" cannot be taken as an offer to supply at that price.

Link to Ezine home page (for reading).
Link to Blogging home page (to add comments).