WebDesign&Such

So you know what a favicon is..right? At least pretend you know what it is.. it’s the little picture that shows up in your browser bar right next to the domain name of the website you’re on. In this example you can see how the WebDesign&Such favicon appears in the browser bar and in the Firefox tab. You can also see the Smashing Magazine favicon (free shout for those guys).

If you need to know how to add a regular favicon to your post or Wordpress blog, I covered this in a previous post. Check it out here, there is also a link to the Photoshop plugin that you need to create the ico file.

The topic I’m going to cover today is slightly different however, I’m going to show you how to make an animated favicon.. niiiice! Here’s an example of an animated favicon, this is the favicon I used on a previous version of BeantownDesign.com

Create a new document in Photoshop with a different layer for each state that you want in your animation. I’ll show you the process of creating the current animated favicon on BeantownDesign.com; which is a rather simple favicon with only two states, one black and one blue.

You’ll see I have one layer for the black state and one for the blue state. Next step is to open the animation controls in Photoshop (located under Window in the menu). I’m not going to go into depth the process of creating an animated gif, it’s rather simple. Just create a new frame for each layer, choose the speed and you’re done.

The important thing here is how you save the file. I should probably mention again that your file size needs to be 16×16 pixels. Design it larger and then drop it down to this size.

So when you save this file, you are saving it as two things. First you save it as a .ico format, which is the regular favicon file format. Again, if you need the Photoshop plugin to create this file format, check out this previous post. Next you need to save it a gif. This is how we get the animation. So why save it as two versions you ask? Because like all things that are worth doing on the web, not all browsers support animated favicons **coughInternetExplorercough**.

Now lets move to the head of your html document. Here is how you call your favicon in. We link both the regular version of the favicon for non-compliant browsers, and then the animated version for people that are worthy. If the browser supports the animated version it ignores the regular version. So that’s it..you’re done!

Something to keep in mind. My example uses a very simple animation, but let your creativity really flow. You can make a banner effect by having a long image and moving it slowly frame by frame.. or a zoom in, zoom out effect..the possiblities are endless.