Prabhakar Kasi's Raptor.in

Interesting News Naturally Interests Everyone

How to Display Your Website Logo on the Address Bar?

Posted by admin On March - 10 - 2009

There are 2 things that needs to be done.

  1. Creating Icons in the Correct Size and Format
  2. Associating the Shortcut Icon with Your Web Page

1. Creating Icons in the Correct Size and Format

An icon be square in size, and at least 16 x 16 pixels. Consider creating both a 16 x 16-pixel icon as well as a 32 x 32-pixel icon (and larger, bandwidth permitting), since on high-DPI displays, Browser may stretch the icon to fit the available space.

To create the icon, use an icon editor, I used IcoFX which is a freeware. Visit http://www.icofx.ro to download. One of the main feature of this software is that it can Convert Macintosh icons to Windows icons. Try spending time and get used to basic stuffs. Once done open the jpg format of you logo and save it as icon [ .ico file format (convert - jpg2ico)].

The filename should be “favicon.ico”

2. Associating the Shortcut Icon with Your Web Page

After creating the icon, you must associate it with your Web page. There are two methods for doing this.

The first method is to save the icon with the default file name of favicon.ico to the root directory of your domain—for example, www.raptor.in/favicon.ico. The first time a user visits your Web page, Broswer automatically searches for this file and places the icon in the address bar, next to all favorites linking to your site, and on page tabs. In Internet Explorer 5 and Internet Explorer 6, the icon will appears only after a user adds the site to the Favorites menu.

The second method for associating a shortcut icon with your Web page is to add a line of HTML code to the page’s head element. The line of code includes a link tag that specifies the location and name of the icon file. You can include this link tag on a per-page basis. First, save the icon with a file name other than favicon.ico, and then add the following code to the head element of your page.

<head>
<link rel=”SHORTCUT ICON” href=”http://www.mydomain.com/myicon.ico”/>
<title>My Title</title>
</head>

Note: Clear all you history cache and files and then reload your website. Your logo will now appear on the address bar. In Google Chrome it will appear over the tab.

pixelstats trackingpixel

Popularity: 4% [?]

Be Sociable, Share!

3 Responses to “How to Display Your Website Logo on the Address Bar?”

  1. [...] more about How to Display Your Website Logo on the Address Bar? AKPC_IDS += "561,";Popularity: unranked [?] Share and [...]

  2. shree madhan says:

    it”s realllllyyyyy super mama…………..

Leave a Reply