A Favicon is a website icon, which are small images next to the URL in the browsers address bar. They are also used as shortcut icon for bookmarks to your site.
Favicons are usually just static images in the ico format, but it is also possible to use pngs, or even animated gifs in Firefox and Opera, but you would still need to specify the location to your favicon using the Legacy method, to have an alternative icon shown for browsers not supporting other formats.
Favicons are placed in the head section of a page, using the link element of HTML. The legacy method specifies a favicon by setting the rel attribute to shortcut icon, and referring to the icon using the href attribute. While the modern method also specifies the type of the icon file.
Internet explorer only supports the ico format, while better browsers support the png format. The png format generally has smaller file-sizes then the ico format. Firefox and Opera even allows you to use animated gifs.
You can have both the legacy link declaration, and the new link declaration. Modern browsers will automatically ignore the old declaration, and show the icon specified with the new.
Editing favicon files
The ico format can hold multiple icons, in different resolutions. There is a Plugin for Paint.net, which allows you to save images as ico files, as well as multiple versions in different resolutions, inside the same ico file.
Note. Paint.NET is a free image and photo editing program for Windows.
Using Paint.NET ico filetype plugin
When installing the plugin, you simply need to place the IcoCur.dll in the FileTypes folder, which is located in your Paint.NET install folder. You would then be able to save your images as ico files when you run Paint.NET the next time.
Adding a Favicon to a Page
The legacy method
The legacy method of spicifying the location to your favicon, can be used for maximum browser support.
<link rel="shortcut icon" href="/myicon.ico">
The href attribute contains the path to your favicon, this should either be the relative or absolute path to your favicon.
The modern method
Another way to refer to a favicon, is to specify the type. This is useful if you are using a png file. But this is however not supported by internet explorer. The below is recommended by the w3c.
<link rel="icon" type="image/png" href="/My-FavIcon.png">
You can use Absolute and Relative paths when entering the location for your icon.
Only Firefox and Opera supports animated gifs, as of the writing of this. Gifs, whether they are animated or not, should be referred to as follows:
<link rel="icon" type="image/gif" href="/favicon.gif">