I can't remember exactly when...

.. it first dawned on me that I was easily distracted... I suspect I was born this way so it's became my own personal "norm" but I do vaguely remember when I started to be become quite picky... some would even say anally retentive ... about some things that really, in the over all big picture of life, make no difference what so ever, but that really push my retentive button... like insects that land, die and subsequently poop in my coffee, ppl not putting tools back the original case in the correct order (yes andrew I am talkin about you!), eating jellybeans in the dark when you have no clue of the colour, ppl that text me using jibberish (like how can one possibly know that z = said) and then there are Favorite Icons.. specifically mine... which since I've started using FireFox with Colorful Tabs extension really grate against my picky quirk.

These days the fair majority of websites have favicon.ico files, some of them are aok, some are pretty whizzy and some need a bit more work... mine fall into the latter category Basically I did a bums rush job with the favicon on WackyB.co.nz (background is not transparent), then I shared.. being lazy... that .ico file with WackyB.com bee.geek suffered a similar fate in that I just grabbed a heading image, squished it down with little care or attention to detail, and once again failed to address the background transparency, ditto for WackyB.info Thankfully with StickerCam.com I put a bit more effort in, end result being the background is transparent and it's the correct size (16x16px) overall I don't think its whizzy.. but I do think it's passable...

favicon.ico display
FireFox address bar	FireFox Tab (using Colorful Tabs extension )

Correcting the favicon files has been on my to-do list for yonks and I'm guessing it would have stayed that way for quite some time, but then I stumbled across some websites that had animated ico files which inspired me to revisit my to-do list and knock at least one item off it...

First on my list was addressing the transparency issue in my exisiting .ico files I know it's not a biggy, it's just a personal quirk... unfinished work staring me in the face

favicon.ico with no background transparency

background transparency issue in Microsoft Internet Explorer 7 Tabs

WackyB (bee) is horrid as with Bee.geek (star) as they have a white background StickerCam (webcam) with a transparent background

background transparency issue in FireFox 2 Tabs (using Colourful (Colorful) Tabs extension )

WackyB.co (bee) is horrid as with WackyB.inf (speaker) as they have a white background StickerCam (webcam) with a transparent background

I hit the issue head on by saving the original .gif files with white as the transparent background, then as a .ico file preserving the (now) exisiting transparency. It worked aok for the bee but the star and speaker didn't fair so well, there is a slight white edging around both, particularly noticeable in FF, not so much in IE.

favicon.ico with transparency

FireFox 2 Tabs (using Colourful (Colorful) Tabs extension )

not as noticeable in Microsoft Internet Explorer 7 Tabs

I know I need to re-do the star and speaker graphics from scratch (to remove the shadows used in the originals) but I was chomping at the bit to see what, if any, animated favicons I could use, so off I trotted turning a blind eye to what will no doubt be another partially complete project ... oh well.. ho hum

Animated Favicons aren't new... just newish... at this stage they only work (as animations) in some browsers, FireFox (the Windows and Mac version) is one of them, perhaps the biggest downside is that Microsoft Internet Explorer fails to recognise the animation which creates a bit of a dilemma with regard to referencing them but there are ways around this. Some plonking is required and how I have done mine is my no means the best or neatest way... it's just a way that suits me, my time frame, quirks and comfort levels with how things can be done... not "should" be done

If our websites had stock standard html pages, throwing a favicon.ico file in the root directory is generally all that is required for most browsers to pick it up , referencing the .ico with
<link rel="shortcut icon" href="favicon.ico" />
in between your <head></head> tags will give it an extra push but WackyB.com uses IP Board and I was using a .gif file in place of an .ico files so things are a little different.

I used an existing .gif animation which is 16x18 pixels, ideally your animation should be 16x16 but it's not going to be the death of your favicon if it's a tad bigger, i renamed it to favicon.gif and threw it (ftp'd) in the root directory over at WackyB.com with our existing static icon. I then checked out loads of coding options but the one I finally settled on (personal preference only) was in a post by inuwolf over at webmasterworld.com which has the following sample:
<link rel="shortcut icon" href="http://?.com/favicon.ico" />
<link rel="icon" href="http://www.?.com/animated_favicon.gif" type="image/gif" / >

As our .com uses IP Board I ducked into the admin panel to edit the template
Look & Feel > Default Skin > Edit Board Header & Footer Wrapper, then replace
<link rel="shortcut icon" href="favicon.ico" />
with
<link rel="shortcut icon" href="http://www.wackyb.com/favicon.ico" />
<link rel="icon" href="http://www.wackyb.com/favicon.gif" type="image/gif" / >
hit Save, hard refresh the browser, and tada, all done

Animated favorite icon at WackyB.com
WackyB.com in FireFox address bar	WackyB.com in a FireFox Tab

I'm guessing that as the files are in the root directory, the links could aslo be referenced as:
<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" href="favicon.gif" type="image/gif" / >
but as always, each to their own

From there is onwards, upwards and a tad sideways. I ran into a Joomla quirk here at bee.geek.nz and WackyB.co.nz. Joomla references the favorite icon in it's configuration file
$mosConfig_favicon = 'favicon.ico';
which kinda blew my biscuit, in the end I opted for lazy, removed the favicon.ico configuration file enty, sprung open my default template that and entered inuwolf's code in there instead.
<link rel="shortcut icon" href="http://www.bee.geek.nz/images/favicon.ico" />
<link rel="icon" href="http://www.bee.geek.nz/images/favicon.gif" type="image/gif" />
works a treat

Animated favorite icon here (at bee.geek.nz)
bee.geek.nz in FireFox address bar	bee.geek.nz in a FireFox Tab

I suffered a "can't be bothered" moment over at WackyB.co.nz as while it's also running Joomla, and as such in theory it would have been easy to put an animated icon in place, the downside is that it's running 9 different templates the idea of editing all those files held no appeal what so ever.. so I didn't do them

I quickly came to the conclusion that I had already spent far too much time twiddling, plonking and generally avoiding work for the day, so I trotted along to our vbulletin forum, edited the template to introduce the animaged icon and left our Joomla pages with static icon

Animated favorite icon here (at WackybB.co.nz)
FireFox Tab (using Colorful Tabs extension )
WackyB.co.nz forum (using vBulletin)	Wackyb.co.nz main site (using Joomla )

overall the experience wasn't up their rocking with a fresh pot of coffee... but it was a fun

Notes:
• Animated favourite icons don't display in IE, but they do in FF... another good reason to make the switch
• If you edit / replace your own favorite icon, or a site has updated there one, you will need to hard refresh the page for it display the update to the latest, you may even have to delete your existing bookmarks for it also