Web Dev Notes

First things first, what is a favicon you ask? A favicon is the small icon that you see in the URL field in your browser when visiting a website. Depending on the versions of your browser, when you bookmark a page, you will also see the websites favicon when looking through your bookmarks. If you look up into your URL field right now, you will see that the favicon for this particular website is the 451press logo, which consists of a red square with white flames.

I’m sure you’ve seen plenty of favicons while browsing the internet as they are becoming more and more common. However, have you ever seen an animated favicon? That is to say, have you ever seen one that shows a moving image? It’s actually quite easy to do!

To add a favicon to your website, all you need to do is create an icon named favicon.ico and put it in the root directory of your website. It will then automatically show up for all users visiting your site! Pretty simple.

So how do you create this favicon.ico file? For more advanced users, you can draw it in Photoshop. If you do this, you will need to download a plugin which will allow you to save in .ico format. Of course, I have found that you can just save as favicon.gif, then rename the file to favicon.ico and it will still load in all browsers. Please note, for your favicon to work, it must be exactly 16×16 pixels.

There is however a great alternative for users who just wish to generate a favicon from an image file. HTML-kit.com offers a great tool which will let you choose an image file on your computer and have it converted into a favicon for you. All you will then need to do is save the file it generates and upload it to your server in your root directory.

Great, now you know how to create a favicon and where to put it. The next question is, how do you make it animated? Well, .gif files can actually be made into animations. Again, you can use Photoshop to create animated .gif images. You can also visit GifAnimations.com if you are looking for some free animations you can use. To use your animated .gif file as your favicon, you will need to then use the following code on your webpage:

<link href=�?images/favico.gif�? TYPE=�?image/gif�? REL=�?icon�?>

If you’d like to see an animated favicon in action, visit Pod1.

So why bother using an animated favicon? Well, since the favicon will be displayed when a user is browsing through their bookmarks, the fact that yours is animated may make it stand out a bit more and this could help remind visitors to visit your website more often!