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.
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.
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" />
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">
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.
To add these items to a WordPress site, add the HTML to the
header.php theme file.