An icon that you see over the top of the browser at the left corner is called favicon, that is, favorite icon.
If you carefully observe the root directory of your website, you will find that favicon.ico
is residing there by default. If it's not there, it would always throw an error to the server that favicon.ico
was not found with the HTTP status code 404, which we don't want to happen. So, either handle such status code or better have one small favicon in your root directory. We need it anyhow because modern browsers always look for it.
Your hosting service provider would provide one by default, else you can create your own by using any icon generator tool or the freely available online icon generator (http://tools.dynamicdrive.com/favicon/).
When you open the preceding link, you will see the following screenshot:
Click on Browse... as shown in the preceding screenshot to create an icon. You can click on those Optional checkboxes, else it will be 16 x 16 pixels by default.
Then click on Create Icon. You will see the Download FavIcon button, as shown in the following screenshot:
Click on the Download FavIcon button to download the
favicon.ico
file, as shown in the following screenshot:Now, click on OK to save it; upload the file on the website under the
root
directory, and you are done.
Whenever you hit the page, it sends requests to the server, and all the files get downloaded either from the server or cache depending upon the expires header. By default, favicon will always get downloaded whenever you are making a request to the server, so as to avoid any delay and its interference with downloading other files from the server.
Try to have the favicon in the root directory with a size less than 1 KB and try to have it in the .ico
format, and set the expires header to a future date. If you are going to change the extension of your favicon, be sure to use the <link>
tag in HTML. For example:
<link rel = "shortcut icon" href = "/images/favicon.gif" type = "image/x-icon" />
This following screenshot shows the grade of the favicon image in a website using the YSlow plugin in Firefox:
YSlow suggests that one should manually create a cacheable favicon, so let's always do it. Almost every modern browser (tested on Firefox 9, IE9, and Opera10) requests a favicon.ico
by default, unless and until you are not mentioning your own customized shortcut icon via the <link>
tag. So, it's a good idea to always have the favicon.ico file in your root directory, to avoid a File not found error.
You can create your own customized favicon using the online tool from http://tools.dynamicdrive.com/favicon/.
If you use Photoshop heavily for image manipulation, you may use a Photoshop plugin (http://download.cnet.com/Icon-Plugin-for-PhotoShop/3000-2195_4-10587858.html) for an icon image creation that is available for free.
There are two famous paid tools available over the Internet, which does the icon creation job in a more professional and easier way:
The first one is Axialis IconWorkshop (http://download.cnet.com/Axialis-IconWorkshop/3000-2195_4-10124592.html?tag=contentBody;)
The other one is Icon Packager (http://download.cnet.com/IconPackager/3000-2195_4-10031210.html)