A favicon is a small (16×16 pixels) icon/image that is shown in the address bar to the left of your address. It is an important part of your website’s individuality. Just as logo. So don’t you underestimate it.

In this tutorial I will show how to create an animated favicon, but first I will show how to create a regular/static favicon for your site.

Keep in mind that animated favicons are supported only by Firefox for now. As for the static ones, all major browsers recognize them, since it’s a normal .ico Windows file.

Keep in mind II: you can’t just rename some favicon.jpg to favicon.ico and use it as a real favicon on your website. It won’t work that way.

I decided to write this tutorial when I ran into some web site [I don't remember which] and it just caught my eye. So if you want to stand out of the crowd, you may want to make an animated favicon. Up to you.

Here’s a simple animated favicon in action:

Regular/Static Favicon

In order to make Photoshop “friendly” with .ico format, you will need to download and install this free plug-in from here.

How to install the plugin:

1. Download it.
2. Close Photoshop if it’s open.
3. Unpack the archive and copy&paste the ICOFormat.8bi file into your File Formats folder in Photoshop directory (Program Files/Adobe Photoshop/Plugins/File Formats).
4. That’s it.

Open Photoshop and create a new document 64 px in width and 64 px in height [it will be too hard to work with 16x16 size, that's why it's comfy to use 64x64 canvas].

If you have a logo, resize it to a square, open it with Photoshop and resize the image to 64×64.When resizing, choose Bicubic Sharper, since if you don’t it will blur the image:

Tweak your image a bit, correct here and there, maybe Sharpen a bit and if you feel it’s ready resize your image to final 16×16 and see if it’s ok:

If you feel that it need more work, just undo the resize and keep working and when it’s finally ready resize it to 16×16.

Ok, now we need to save it in .ico format.

Since we have the ICO plugin installed, Photoshop now knows it. Just go to File->Save As… and choose Windows ICO from the drop-down menu:

That’s almost it!

Now upload it to your website’s root directory using your favorite FTP client. It’s better to upload it into root directory so that browsers can find it automatically, but we’ll use some small HTML code that will help the browser find your favicon for sure.

The Code

Paste this code between your and tags:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

For WordPress users: paste the code into your header.php file, between the same tags.

That’s it. Refresh your page. Enjoy. If it doesn’t show your favicon try to clear the browser’s chache or even the temporary Internet files.

Animated favicon

It’s not a hard task. Almost the same as regular.

Let’s say you have your 16×16 favicon file ready. Open it with Photoshop (remember you have the ICO plugin).

Here you will learn basic animation skills in Photoshop. But only for CS3 and higher versions…Others use ImageReady built-in feature, it’s almost the same.

Bring the animation window to the screen by going to Window->Animation:

You will see that the first frame is your active layer containing your favicon:

Now add some layers/images [each layer standing for a frame] that you want in your animated sequence:

Make all layers other than your original favicon invisible by clicking the “eye” icons:

You will see that the first frame now is the visible layer.

Create a new frame by clicking the new button:

It will duplicate the previous frame.

Make the second layer visible [the layer which you want to be the second frame in your animation]:

Repeat the last two steps until you have all your layers visible along with the frames.

You can set the freeze time of each frame:

Push the play button to see the animation.

Ok, once we’re done with it we need to save it as GIF. Go to File->Save for Web & Devices and choose GIF from the drop-down menu:

Save and upload it just where your static favicon is.

Now add the following code right under your regular favicon’s line:

<link rel="icon" href="/favicon.gif" type="image/gif" >

That’s should be it!

Remind you once again: it will work only in Firefox, other browsers will show your static favicon. But according to statistics, Firefox is the most popular browser among users. You decide!

by Azamat "Bohed" E.

TrueKolor.net Owner. Professional Graphic Designer.

• Web
|
• More Posts (152)