Animated Favicons

The animated favicon is not terribly different from the plain favicon. In essence, animated favicon are just animated gifs that are re-named .ico. In fact, some newer browsers support plain image files like jpg and gif in spite of the .ico extension.

Step 1:Read “Designing a Favicon for your website”

Step 2: Using Image Ready or a similar animation program like Animation Shop you will create a set of layers, usually between 3-5 frames but 3 frames is best because of load time for greater sized images.

Step 3: Go to File > New remember to set your image somewhat small like 60×60 as you will eventually reduce your image size to 16×16.

Step 4: Then place your text or image on the new canvas. Right-click the canvas and select create a Duplicate Layer. From there you create the set amount of layers and create your animation, it will scroll in a continuous loop or just once, it will need to look clean. For more in depth instructions use the ImageReady Tutorial.

Step 5: Finally, when you’ve created your animation, save your image by going to File > Save Optimized As and selecting animated gif. For a plain animation save it as a simple gif. Then use either converters or simply rename the gif extension to .ico.

Step 6: Follow previous instructions on uploading your image to the internet.

Bookmark to: