Add Icon to Website

October 1st, 2006 | Print This Post/Page | E-Mail This Post/Page

Todays topic will interest aspiring web masters (website owners). Many of us will have noticed a small icon next to urls in address bar of Internet Explorer or Mozilla Firefox. And when you add the link to favorites, you see the icon in the favorites menu as well.

Indian flag icon

You might have wondered how you can do this with your own website or even your blog on blogspot.com. Well, it’s not that difficult.

There are two ways to do add your favorite icon to your website or webpage. It depends on if you own your own domain name or have a personal webpage or blog hosted on sites like Yahoo! Geocities or blogspot.com.

Before you start, you need a Icon image which you intend to display besides url. Create a icon image of size – 16 x 16 pixels with extension .ico. Please note that the icon images size should be 16 x 16, otherwise most browsers will ignore the icon. Okay, so assuming you’ve your icon file ready, let’s proceed to next step.

Method 1 - Let’s take the case when you own your own domain for e.g. www.rohitblog.com –When you purchase a domain from web hosting provider like www.serversea.com or www.startlogic.com, you’re given a username and password to upload the webpages on the domain. You just need to upload the icon image file you’ve created to root of the domain name (e.g., www.rohitblog.com/favicon.ico). Please note that the name of the icon image should be favicon. This is because browsers by default look for a icon image file with name – favicon.ico.

Method 2 - The second method is when you have a personal webpage or blog hosted at sites like Yahoo! Geocities or blogspot.com. Here, you won’t have rights o upload your favicon.ico file to the root i.e. www.blogspot.com/favicon.ico. So, you’ll have to copy the icon image file to your webpage subdirectory. For e.g., if you have address like www.blogspot.com/users/rohitagrawal, then you can load the icon image file to www.blogspot.com/users/rohitagrawal/myicon.ico. Now you need to add the following code in each of your web page where you want to show the icon with the website url.

and BLAMMO! the icon appears besides the your website URL! - Rohit Agrawal

2 Votes | Average: 5 out of 52 Votes | Average: 5 out of 52 Votes | Average: 5 out of 52 Votes | Average: 5 out of 52 Votes | Average: 5 out of 5 (2 votes, average: 5 out of 5)
Loading ... Loading ...