Example of globe-like rotation: 30 frames, 63 colours, 200 KB in total

ACK in July, I elaborately described how animated graphics can be created in the GIMP. The GIMP is a free application, which is available for Windows, the Mac and Linux. There is also GIMPShop in the wild, which is a nifty GIMP fork for the photoshop-inclined audience.

I recently decided to change my static favicon.ico image with a dynamic sequence, having discovered that Mozilla Firefox supports icon animations. GIMP was a satisfactory (yet not perfect) tool for this task.

What is favicon.ico?

The image file which is known as favicon.ico will be embedded and displayed in the appropriate tab/s. This works in most tab-enabled browsers (see breakdown at the end). For each Web site, there should ideally be a unique icon that serves as a mnemonic, if not a mascot. The form of the file is a rather obscure one. It is still loosely supported due to Microsoft-specific file structures in a bitmap. Moreover, its origin is the Favourites menu (thus the name), otherwise known as bookmarks, to use non-Microsoft terminology. The way to construct favicon.ico was briefly outlined approximately a year ago. It covered both Web-based and desktop-side tools.

Animation Recipe

Some of us may wish to extend favicon.ico, making use of the existing glitter which is finally supported by Web browsers. Below is are some rough and amateurish instructions on how to create favicon.ico that is animated. The GIMP is assumed although the ideas can be adopted and then applied in different graphical applications which support multiple frames. Alternatively, one can stitch together images in an application that is separate. Animake springs to mind as one among many options.

• Create a 16×16 pixels GIF image (assuming decent orientation with the GIMP).
• Create the first (base) frame (see discussion on animation under the GIMP, which is handled using the layers=frames premise).
• Continue adding more frames by instantiating new layers and accommodating them sensibly. Care to ensure a decent transition from one frame to the next. You can use the first frame as a “background frame” and rely on transparencies.
• Be alert and save your work (as a GIF animation) rather frequently, just to ensure the existence of backups. Many frames can involve a lot of work overall.
• At the end, save the image as a GIF animation and be sure to select the “animation” option (see previous discussion if necessary).
• Rename the outcome (i.e. the GIF animation file) to favicon.ico. And yes! Change file extension too. If you neglect to do so, then your route (path) is adverse to the convetion. In the absence of this renaming step, you might have to specify an abnormal, site-specific icon location at the top of each page, or else it would never be found.
• Add favicon.ico to your site, e.g. using FTP. The procedure is similar to that which involves static favicon.ico.

Various Outcomes – Old and New

Here is my initial attempt at a spinning favicon.ico logo:

The image above is not sufficiently crisp; the background is black rather than fully transparent.

The original image can be found here: JPEG (size: 5.7 KB)

The original (static) favicon.ico logo:

If you are using Firefox, you can probably see the final outcome the current tab which is active (assuming you have them enabled/displayed¹).

Final Words, Pitfalls, and Suggestions

On browser compatibility: animated favicon.ico‘s are not treated at all by Internet Explorer. A static image will not be extracted from the animation either. Instead, the default .htm icon (as defined in Windows’ filetypes) will be placed under one’s Favourites — once added, that is. The animations are not supported by Netscape and Opera; at least so it seems. The Firefox family seems to be the only friend to animations, yet as browsers evolve, broader support for animation will probably come along. So, why not take advantage of this now and ‘beat the rush’?

In principle, one could analyse the user-agent string in the HTTP headers and set favicon.ico to something which can be handled gracefully by the browser in question. For such decision-making, programming would be required, e.g. user-side JavaScript or server-side PHP, ASP and the likes of them.

Related item: Inkscape and the GIMP

¹ By default, Firefox hides the tabs panel if only a single tab is open. The browser window icon might be affected nonetheless (namely contain the icon), but not in all platforms.

This entry was posted on Monday, December 5th, 2005 at 2:47 pm and is filed under Design, Internet, Programming. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.