I guess you have all seen a favicon at a site or two in your life.

Favicons are the small icon that you can see on the left side in the url field in the browser. It’s really simple to create on of these actually.

At the moment we don’t have any favicon at 999tutorials because we have changed plattform and graphical design, but we hope to get a new one up soon.

First of all you need to create an icon and call it favicon.ico. An icon can be created with lots of programs and it is basicly a small image (16×16 pixels), in windows icon format. If you have photoshop or other graphics programs you might have a function there to convert into ico. If you don’t I would recommend this great site for generating an icon from an ordinary image:  Go to the site

Anyway, when you have your icon, rename it to favicon.ico and upload it into your web root.

Then add this code between < head > and : <link rel=”shortcut icon” href=”favicon.ico” />

This tells the browser to show your icon as favicon :-) Pretty simple right…

Animated favicons

Actually it is possible now to have animated favicons for some browsers. It only works right now for Firefox users.

If you want an animating icon you need to create and animating gif file and upload it to your file root. Then add this row after the first favicon row: <link type=”image/gif“ href=”animated_favicon.gif“ rel=”icon“/>

Of course you can do exactly the same thing as with the ordninary favicon and show different icons for different sections. Just modify the file name :-)

(The site I refered to above can help you create an icon similar to what I am describing …)

A small bonus is that the ordinary favicon is shown in your bookmark list if you bookmark the site. This might be the extra thing to get more visitors, because they recognise your icon in their bookmarks…
Today we found a great site that can help you to Get your own animated favicon

Similar Posts:

  • Share/Bookmark