CookandKaye - animated icon test and evaluation.
static alternatives to animated favicons
Icons work by inserting a link to a 16x16px icon graphic into the head of the HTML document. The facility was introduced in Internet Explorer 5, to help people find bookmarked sites more easily, as the icon appears as a small visual reminder about the site alongside its bookmark. Use of icons is now ubiquitous, though often poorly implemented...
A common problem is that IE only really understands graphic files in the .ico format (used for all Windows icons). A lot of web designers simply prepared .gifs or .png graphics, then renamed them .ico without actually converting them - giving rather variable results!
More recently (I believe from version 3) Firefox has extended icon support to gif and png formats. These formats permit animated icons to be displayed. There is a big advantage in having an animated icon against your bookmark, as the movement stands out a mile amidst a sea of static icons. Unfortunately, by drawing the eye to movement, it also makes it harder for users to work through their bookmark list - so is not without a downside!
Even with this caveat, there are occasions when the new technique might be valuable:
- It is a good visual reminder that you are logged in to a secure site (here a user should bookmark the login page, with a static icon).
- It is fun and visually appealing!
- For that vital site - yes, it will be helpful, but many users would want to choose which site they permit this for! You can switch off the animation on other sites by following these useful tips from LifeHacker, but this is a bit of a pain as a default option! Perhaps as designers we should just offer an animated bookmark icon as an option?
Whatever, there remains a big obstacle to adopting these things - and that is the patchy support. With just FireFox offering animated icon support, you certainly need to ensure that other browsers don't choke and loose your icon all together!
Here we are testing code* suggested by EyeStorm (How To: Animated Favicon), which uses two lines of code in the head of the HTML document, the first to a standard, static icon (.ico format), then offering an animated version in .gif format:
<link rel="shortcut icon" href="favicon.ico" />
<link rel="shortcut icon" href="favico.gif" />
This code should display a short looping animation (shown left) in the address bar of your browser. If your browser/OS cannot display this you should get a static icon showing an 'X' on an orange background instead. If you get neither, then the code didn't work!
Results
| Browser | Version | OS | Address bar | Bookmark |
|---|---|---|---|---|
| Firefox | 3.0.11 | XP Pro | animated icon | animated icon |
| Safari | 3.2.2 | XP Pro | static | static |
| Opera | 9.52 | XP Pro | static | static |
| Explorer | 7.0.5 | XP Pro | static | static |
| FireFox | 3.0.3 | OS X | animated icon | static |
| Safari | 3.1.2 | OS X | static | static |
Note that when saved as a bookmark there is no guarantee that the icon saved will be the animated version - for FireFox on Mac OS X the static version is saved (which is probably the better option for most users).
If you're using a different browser/operating system combination, please let us know what you saw!
Contact us with your observation (please tell us your operating system, browser and version number).
Web logos and icons some of our posts on icons on the web.
