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.

A Favicon is the little picture that shows up next to the domain name in your web browser.

WD&S Favicon

Beantown Design Favicon

Read on to find out how to create your own Favicon, and add it to your website, or WordPress Blog.

The first step is to download the Photoshop plugin to save files as the Windows ICO format. I uploaded it here for you to download. Download that, install in Photoshop and you’re good to go.

The reason creating a successful Favicon is tricky is that you are creating a piece of art that is only 16 x 16 pixels.. pretty small right? I speak from experience when I say that some thought needs to go into this process for the end result to look any good. The best technique is to create a larger image first, (say 64 x 64), and then reduce the size to 16 x 16.

save 16x16 px

If the Photoshop plugin is installed correctly, you will be able to choose ISO format when you save the file.

Save that in the main image folder of your website. Then, in the head of your XHTML page, add the following code:

That’s all you need. Although, I needed to use the direct link for the Favicon on this site, most likely because it’s set up in PHP.. so it would look like this:

You can also make animated Favicons.. this does not have full support in all browsers; but then again nothing cool ever does! I’ll cover that in another post. Check out BeantownDesign for an example of an animated Favicon. Here is a tutorial on how to create and add animated favicons to your website or blog.

Here are a couple Favicon Galleries for inspiration thanks to Smashing Magazine:

Gallery One

Gallery Two

Gallery Three

Gallery Four