Animated FavIcon in GIMP

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)

Create your Logo

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.

Scale Image

To around 120 x 120 pixels, with 300 dpi.

Scaling

Now go Filters –> Animation –> Spinning Globe.

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).

Settings

It should look like this:

Like this

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

Playback

There you have it!

That's it!

Now Save As:

Save As

Save as Animation:

As Animation

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

Loop Forever

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:

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

Please comment, if you have any questions just comment below!

Written by Mike

Michael Scott is the publisher and photographer behind Scott Photographics! He is very passionate about his photography and enjoys sharing the best of his experiences for others to enjoy too! Contact Mike via email!