How to Make an Animated Favicons

Animated favicons take the favicons in URL address bars one step further. Some people think they're cute; some people think they're annoying. You may not have noticed them at all because they only work with the Firefox browser. If you want your own animated favicon all you need is Photoshop and a little HTML mojo.

Instructions

Difficulty: Moderately Easy

Things You’ll Need:

• Photoshop
• A plug-in to export Windows ICO files
• HTML or text editor

1. Create a static favicon image. You will need to size your document 16 pixels by 16 pixels. You can reduce a larger image or create your favicon from scratch.
2. Save the image as an ICO file. You will need to have the ICO plug-in installed in the "Formats" folder inside your Photoshop plug-ins folder. Choose "Windows ICO" as the file format in the Save dialogue. Use "favicon.ico" as the file name.
3. Add animation. Open Photoshop's animation palette and make sure you are in frame animation mode. Add frames for each step in the animation. You can change the layer position, or show and hide layers to create the animation.
4. Save the animation as a GIF file (ICO files are static.) Choose "Save for Web and Devices" from the File menu. Make sure transparency is selected if you want a transparent background. Use "favicon.gif" for the file name.
5. Modify your web page. Insert the following code between the tags: .
6. Upload your web page and files to your server. Load your page in Firefox to make sure the animated favicon loads. Load your page in Explorer to make sure the static icon loads.

Tips & Warnings

• As of this writing animated favicons only work with Firefox browsers.
• Don't paint changes on Photoshop layers because they will affect every frame in the animation. You can change layer position, or copy the layer and make changes to the copy.