How to display an icon of your webpage in the address bar, tabs and in favorites


Method 1

This is the easiest method to implement and it will work regardless of the particular page on your site users choose to add to their favorites list. Don’t worry if you don’t have access to your web site root; take a look at the next method.

If you have access to the root of your web site, simply save your icon file as “favicon.ico” there. For example, if your web site is “www.imak47.wordpress.com”, your icon file should be available at “www.imak47.wordpress.com/favicon.ico”. The web browser will look for favicon.ico whenever your site is added to the favorites list and if it is found at the root of your web site, the icon will appear next to the link to your site.

Method 2

If you don’t have access to the root of your web site, you have to add the following tag to your web page so that the browser will know where to look for your icon. Unlike before, this time you can save the icon under any name ending with “.ico” We’ll use the name “logo.ico” and assume that your web site is under the directory “~your_directory”.

<LINK REL=”SHORTCUT ICON”
HREF=”/~your_directory/logo.ico”>

Above tag should be inserted in-between the <HEAD> and </HEAD> tags.

By the way, you can specify multiple logos for multiple pages using the second method. Simply save your icons using unique names, such as logo1.ico, logo2.ico, logo3.ico for example, and replace “logo.ico” in the above HTML code with the name of the icon you want to use for any particular page.

Advertisements

Author: Imran Akram

A .NET/SharePoint Consultant and a political enthusiast who believes in putting the feet of the elected and/or unelected officials to fire in order to get good governance.

6 thoughts on “How to display an icon of your webpage in the address bar, tabs and in favorites”

    1. Hi, I think its because of a faulty path to the icon. Make sure the path is correct, you can also try by using a full URL in href too

  1. Hello ! I ve done the first method, it works for the tab icon, but I still have the earth as an icon in my address bar 😦 Any clue !? Thanks !!!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s