Tweet
You must have come across many sites that have a small icon right before the beginning of the URL.
The same is also displayed in the Favorites (Bookmarks, if you are using FireFox) menu.
In this tutorial, I will demonstrate how to have such an icon for your own website. To begin with, you will need a small icon that you wish to set as the FavIcon. It should be 16x16 in size. If you don't have an icon with you, I suggest you try Google to find such icons. Once such site from where you can download these types of icons is mentioned below:
If you have images on your local system which you wish to use as icons then you can download converters available on the web to accomplish this. IrfanView is one such free graphic converter that I would recommend.
Once you have the icon ready, rename it to favicon.ico and upload it to your wwwroot folder if you are having windows hosting or public_html if linux.
Next, you will need to add the below line of code in between the <HEAD> and </HEAD> tags in your pages. You should include this line in at least the default page of your website:
Below is a sample code:
Believe it or not, you are done; Try visiting your site, the icon will be displayed now.
Notes:
1. Make sure that you specify the name of the file in the same case as the original file or it will not work on Linux servers.
2. There have been instances where the icon does not get immediately displayed. This is a know issue of certain browsers.
3. Please read the terms and conditions of any website carefully before downloading any content.
Cheers;
The same is also displayed in the Favorites (Bookmarks, if you are using FireFox) menu.
In this tutorial, I will demonstrate how to have such an icon for your own website. To begin with, you will need a small icon that you wish to set as the FavIcon. It should be 16x16 in size. If you don't have an icon with you, I suggest you try Google to find such icons. Once such site from where you can download these types of icons is mentioned below:
If you have images on your local system which you wish to use as icons then you can download converters available on the web to accomplish this. IrfanView is one such free graphic converter that I would recommend.
Once you have the icon ready, rename it to favicon.ico and upload it to your wwwroot folder if you are having windows hosting or public_html if linux.
Next, you will need to add the below line of code in between the <HEAD> and </HEAD> tags in your pages. You should include this line in at least the default page of your website:
Code:
link rel=shortcut icon; href=/favicon.icon;
Code:
; DOCTYPE html PUBLIC //W3C//DTD XHTML 1.0 Transitional//EN;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional; html xml:nshttp;//www.w3.org/1999/xhtml; head; meta http-equiv=;Content-Type; content=;text/html; charset=iso-8859-1; link rel=;shortcut icon; href=;/favicon; title; My WebSite; /head;
Notes:
1. Make sure that you specify the name of the file in the same case as the original file or it will not work on Linux servers.
2. There have been instances where the icon does not get immediately displayed. This is a know issue of certain browsers.
3. Please read the terms and conditions of any website carefully before downloading any content.
Cheers;
Comment