By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

How to make favicons

Favicons are the small icons located next to the URL in the browsers address bar, they are also used as bookmark icons when you bookmark a page. This Article shows how to make favicons for your own Website.

Edited: 2015-09-04 19:53

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.

Browser Support

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

Icon, Cursor, and Animated Cursor Format

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.

Animated favicons

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">