Hello there!
You must have come across many sites that have a small icon right before the beginning of the URL as seen on the left.
The same is also displayed in the 'Bookmarks' menu if you are using FireFox ('Bookmarks' is to FireFox as 'Favorites' is to IE).
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 16×16 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:
http://www.clickfire.com/content/graphics/favicons/
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 and tags in your pages. You should include this line in at least the default page of your website:
<link rel="shortcut icon" href="/favicon.ico" />
Below is a sample code:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" href="/favicon.ico" />
<title>My WebSite</title>
</head>
</html>
Believe it or not, you're 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!
Hi,
I saw that you mad a remark on the codesnippet plugin for WordPress that it didn't work for you. Seeing your blog it apparantly works!
Great for you, but for me it still doesn't work. What did you do to get it work?
Thanks for the help,
Chris
Hi Chris,
Sorry for the delay in posting back!
Initially the codesnippet plugin did not work for me but now it is. It appears that I was using the wrong syntax.
Just make sure that your posts that contain code are syntactically correct. For e.g. to display HTML code, you should use the below presuming that you have already installed the codesnippet plugin correctly:
<code lang="html">
<link rel="shortcut icon" href="/favicon.ico" />
</code>
Let me know if anything!
Cheers!
Vishal //