How do I include a "favicon.ico" on my Web pages?

Wondering what we're talking about? Look up on the address bar of your Web browser right now and to the left of the actual URL of this page you should see a tiny little Dave icon, a nice little visual bookmark for the site that (I hope) doesn't appear on any other sites on the Web.

That's my "favicon.ico" and it looks like this:

If you don't know how to create one for your own Web site or blog, check out the many, many matches for a Google search for 'how to create a favicon'. :-)

Now, once you have one, save it at the root level of your site, so that a URL like http://domain/favicon.ico works. Here's mine:

I used to include it in my Web pages with the following code:

but I found out that it's actually obsolete and there's a smarter, more XHTML legal and proper form, as detailed on the W3C site:

So to convert that to work on my site, my pages now have the following in the head:

Note that I had to convert the ".ico" format to a more standard ".png" format for this to work, btw!

Also, please note that I am actually in the middle of this transition right now, so please don't leave a comment if you want to point out that it is NOT in fact what I have on the page at this moment in time. I'll fix it ASAP and all will be well. :-)

Hope that helps you out!