So we’ve all come to know those little icons by a website’s browser tab or bookmark link as Favicons. They’re 16×16-pixel identifiers for a site, and are sometimes initials, the main logo or a bright, eye-catching visual element by which we’ll remember the website.

After reading an article on Smashing Magazine, I thought I would try my hand at making an animated Favicon. And guess what– it worked! However, there’s a slight handicap to having an animated Favicon: only newer browsers will recognize its animated nature and decide to display it. Older browsers, however, will take one whiff of the .ico file and instantly reject that whiff that is of animation. For those users who are on older browsers, they’ll get a general� page logo, as opposed to a site-specific Favicon.

But let’s promote newer web browsers (like the recently-released Firefox 3.0) and allow ourselves to make animated Favicons! Often I find a simple solid color with a logo/letter is not unique enough to each site…. (Facebook, Myspace and now Google all share blue-and-white Favicons). If we’re able to animate, we can change color– which further means greater diversity in Favicons, hence giving YOUR site more individuality!

The programs I used to pull this off are Adobe Photoshop, Adobe ImageReady and Dreamworks. I’m sure you can pull it off with other programs, but due to their popularity I’ll demonstrate with these.

For one, you don’t want your Favicon to be too distracting. A fast-paced, obnoxiously-flashy and convulsion-inducing Favicon is, in the end, more likely to be a quick identifier for your site, but may give your design skills 50 un-cool points for annoying your visitors. So keep it simple!

First, make a 16×16 document in Photoshop. Hopefully you’ll have in mind something that you want to animate– say, a static image with its hue changing, or perhaps your site’s name scrolling marquee-style.

You can scale down any previous image you have and� work with that, if you want. But I’ll make a marquee in this demo.

My bottom layer is a simple vertical green-dark green gradient. I have a text layer on top which says “Tahnee.com”.

Once you’ve got your layers set up for all that you want to have incorporated/animated in the final icon, hit the export to ImageReady button:

Once ImageReady opens, make sure your Animation timeframe is open. (Window>Animation). This is what we’ll be dealing with:

Arrange your layers so that the composition is how you want it to look for your first frame. As this is a marquee, I’ve set it up so my text is not visible– but for convenience purposes, I have it set up centered, just to the very right of the ‘scene’ (or whatever’s visible in this frame). Once you have your first frame looking like you want it to, hit the new frame icon at the bottom of the Animation editor; it’s to the left of the trash can, it looks like a page with its bottom corner turned up. This creates a new frame. So long as your current frame is selected, you can re-edit your composition to what you want it to look like. Using the arrow tool, I have my “Tahnee.com” text layer selectedand using the left arrow key, I nudge that whole layer to the left by a pixel. (Remember, we’re only on a 16×16 pixel canvas, so moving things around won’t take too much time and effort). I want my “Tahnee.com” text to scroll to the left, so after I nudge it to the left by one pixel, I make a new frame, then nudge, make a new frame, nudge, make a new frame….. and so on.

Here’s a progresion of what my frames ended up looking like.� Remember, this is only ONE way to go about making an animation– you could speed up the scrolling process (and hence save yourself on download time) and nudge each frame two or three times, instead of just one. But this offers a slow, not-too-distracting(yet interesting) Favicon.

Once you’re happy with your animation (you can hit the little play/stop button to test it out in the Animation editor– watch the actual image itself because that’s what animates)� you’re ready to export! Go File>Same Optimized As and then save your file as a .gif.

Next, copy and paste your .gif into your website’s main directory. I opened up Dreamweaver and in the file manager, found my favicon.gif file and renamed it to favicon.ico . That’s really IMPORTANT! I’m not sure if a browser will quite read a .gif as a favicon, because they expect a .ico file. So make sure to turn that .gif into a .ico! (However, some browsers do read .gif and .png files, so you may be able to leave it as a .gif and try working with that).

And then, upload it to your site’s root.

Now, so far as I know, browsers magically discover the favicon.ico file and automatically display it. However, it doesn’t hurt to throw in some code in the event that doesn’t happen.

<link REL=�SHORTCUT ICON� href=�http://www.yourdomain.com/favicon.ico�>

Copy and paste that code in between the <head> and</head> tags of your html document(s) and you should be good to go.

Apparently IE won’t recognize .png and .gif favicons (and my old IE6 doesn’t like the current animated favicon.ico), but other browsers may catch onto these alternate codes:

<link rel=”icon” href=”/favicon.png” type=”image/png”>

<link rel=”icon” href=”/favicon.gif” type=”image/gif”>

Then, view your site– be sure to hit the refresh button on your browser to get the new favicon into your cache… or else go directly to the favicon itself (www.tahnee.org/favicon.ico, for instance) and then try viewing your site. Hopefully all goes smoothly with a new, animated favicon 🙂

–Do note that for tahnee.org’s new favicon, I chose to duplicate my original image layer, and then modify the hue on the second layer. In ImageReady I adjusted the opacity by 10% for every frame, allowing it to ‘settle’ five frames on each extreme (blue and green). You could move elements around, you could draw out new frames. But let’s put some animation into our bookmarks and tabs!