Display Website Logo on the Address Bar

Have you seen a small icon in the address bar when you browse websites? And the icon definately attracts you and you want to know how the icon is in the address bar. I have seen lots of website including personal websites without icon. I know some of them are not very technical so they don't know how to add icon. I am writing how to display your website logo on the address bar for the non-technical website owner or the webmasters really have no idea to add icon in address bar.

For this, either you should own a website or you have the permission to upload the files of a website via ftp. If you have no idea to work on image editor then no problem you can take help from your friend. Also check whether you are able to save icon file with your image editor or not. The height and the width of the icon you see in the address bar should be 16 X 16. You have basic knowledge of html to add a meta tag in the page, if not then no problem, it is easy to learn. Here I am writing you very simple method to add icon. It can be uploaded in 2 ways. The easy way I am discussing here.

a) Create an image file, 16 X 16 (height=16 px and width=16 px) using image editor and save it as .ico file.
b) Upload icon file to the root or in the image folder. e.g http://www.mywebsite.com/mywebsitelogo.ico or http://www.mywebsite.com/images/mywebsitelogo.ico
c) Open html files one by one and insert the following code between and tags:

<LINK REL="SHORTCUT ICON" HREF="/images/mywebsitelogo.ico">

d) Upload the html files and check it in the browser.

display your web site logo on the address bar


2 comments:

Anonymous said...

I have seen lots of website including personal websites without icon. I know some of them are not very technical so they don't know how to add icon.

Anonymous said...

You can also use a 32x32 favicon, Which displays clearer on some sites that display information about a website such as feedjit. Still 16x16 is wat I use