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