[Favicon]having the icon of your site in the address bar

You have probably noticed the presence of an icon to the left of the URL into the address bar of your browser to certain web sites?

To implement this type of icon on your own website follow the steps below.


Creating a favicon

There are several methods:

• Drawing software (Gimp, pixia, inkscape ...)
• Specialized software (IconEdit32 or IconWare)
• Websites (which transforms an image favicon):
  • http://www.html-kit.com/favicon/
  • http://www.html-kit.com/favicon
  • http://www.favicon.co.uk/
  • http://www.favicon.hu/
  • http://tools.dynamicdrive.com/favicon/
  • http://favikon.com/

For most browsers:

The first step is to create an image in png or gif
You can choose from various sizes, 16x16 or 32x32 (pixels).

For Internet Explorer:
For this browser, use an image or bmp format and size 16x16 pixels.

To create an animated favicon or generate an ICO file

http://www.html-kit.com/favicon/

The link above will allow you not only generate an ICO file easily but also animate your favicon and scroll the text if you wish.

Click the Browse button and choose an image on your computer.

You can also add text to scroll after your icon, it automatically generates a animated icon.

Finally, it is also possible to generate an animated icon without text, by checking the Animated Favicon (the favicon itself that seems to scroll).

Then click on the Generate Favicon.ico button

You will then have an overview of your favicon.

Then simply download the zipped file on your computer.

After unzipping the file, copy the file favicon.ico to your site.

If you have downloaded an animated icon, the ZIP file will also contain the Extra file containing animated favicon (animated_favion1.gif) then copy it to your site.

Putting favicon online

To put the favicon on your site,indicate its path via the link tags found in the header.

Here's an example with a png image:

<link rel="icon" type="image/png" href="/images/myfavicon.png" />

Depending on the format, the attribute "type" change:

• Png: image/png
• Gif format: image/gif
• Jpeg format (jpeg or jpg extension): image/jpeg

And if you have a favicon that do not meet the standards, the attribute "rel" change also:

link rel="shortcut icon" type="image/x-icon" href="/images/icon_ie.ico" />

If your icon is animated (GIF)

Insert the following tag:

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

Notes

If you use both an icon in a standard format, but also another ico format , avoid placing it in the root: the browser will display if they do not find the image in PNG format.