Favicons

Favicons are small icons that are displayed next to the website name/address in internet browsers.

Internet Explorer only supports icons in the .ico format, and all other major browsers have support for the .ico format. Prior to Internet Explorer 7, only bookmarked websites had their favicon displayed in Internet Explorer1.

Favicon sizes

Traditionally favicons were 16×16 pixels in size. The advantage of using the .ico format is that it is a container format that can contain multiple icons at different sizes.

It is recommended1 that you produce images at the following sizes: 16×16, 24×24, 32×32, 64×64 for Internet Explorer.

The HTML

Once you have made your icons, add the following code to the head section of your documents:

<link rel="shortcut icon" href="http://mywebsite.com/favicon.ico" />

HTML5

The code above has been in use since Internet Explorer 52.

In the HTML5 specification, icons can be defined as follows:

<link rel="icon" type="image/png" sizes="16x16" href="http://mywebsite.com/favicon.png">
<link rel="icon" type="image/png" sizes="32x32 64x64" href="http://mywebsite.com/favicon_big.png">
<link rel="icon" type="image/png" sizes="any" href="http://mywebsite.com/favicon.svg">

The any keyword can be used in the sizes attribute to specify that the icon can fit any size, a vector image (SVG) for example.

Internet Explorer backup

If you want to use the HTML5 code, but also have the Internet Explorer icons you can use Internet Explorer only code:

<!--[if IE]>
    <link rel="shortcut icon" href="http://mywebsite.com/favicon.ico" />
<![endif]-->
<link rel="icon" type="image/png" sizes="16x16" href="http://mywebsite.com/favicon.png">

This will only include the shortcut icon if browsing using Internet Explorer.

No HTML backup

Most internet browsers look for favicon.ico by default when loading your webpage. So you can omit the shortcut icon HTML and instead just put the favicon.ico icon in the website root directory and it will be automatically be picked up by browsers.

WordPress

To add these items to a WordPress site, add the HTML to the header.php theme file.

Related tutorials

Further Reading

References

  1. http://msdn.microsoft.com/en-us/library/gg491740(v=vs.85).aspx#icons
  2. http://msdn.microsoft.com/en-us/library/ms537656(v=VS.85).aspx#About_Shortcut_Icons

Categories

Tags

Social