Scott Photographics | Photography & Graphic Design Resources

In this tutorial, I’ll give to a step-by-step guide on how to really stand out from your competitor sites by making an animated GIF FavIcon.

Animated GIF FavIcon

First of all… (You can view images larger by Right Click –> View Image)

Begin by opening up Gimp –> and opening up your FavIcon, if you don’t have one then checkout my Logo Tutorial!

You may need to scale down your image.

To around 120 x 120 pixels, with 300 dpi.

Now go Filters –> Animation –> Spinning Globe.

Set the frames to 20, Transparent background (your choice),  Index ~81 (depends on your colours), work on copy (unless you want it separate).

It should look like this:

On that window go, Filters –> Animation –> Playback!

There you have it!

Now Save As:

Save as Animation:

You’ll want: Loop Forever, and 0 delay:

And that’s it!!!

Installation:

1.You need to upload it to your Webhost directory in your images file

2.Add this code just before the </head> on all your pages. If you have Wordpress: Just in your header.php

Code: Replace “Animated-GIF.gif” with your favicon name.

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

and your original FavIcon, just in case (You GIF will be the one Shown however):

• <link rel=”shortcut icon” href=”images/favicon.ico” >

Please rate and comment, if you have any questions just comment below