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)

Begin by opening up Gimp –> and opening up your FavIcon.

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: