How to display website icon/logo in the address bar or bookmarks list

The Simple but Slick Web Site Icon

Have you ever wanted to make your web site stick out in the favorites list or crowded address bar list by displaying a small logo before your URL, but didn’t know how? You are about to learn how one tiny little image can set you apart from the other guys.

Okay Let’s Do This 2 Simple Steps!

In about five minutes, you will be displaying any logo you choose next to your address bar URL and favorites icons. But first, here are some things you need to know:

•  The image must be 16 pixels x 16 pixels.
•  The image must be in Windows icon format (.ico)
•  You will need access to the HTML source code of the page you wish to attach the image to, or you will need access to the base folder of your domain name.
•  The favorites icon is not yet available on HubPages, but I have faith that the feature will be available in the future.

Step 1 of 2: Making the Logo

Now the fun begins. You need a logo. A square logo. A very small, square logo.

This may seem like a chore at first, but you can do this. Perhaps you have one already. If so, proceed to Step 2. If not, here are some options:

• Use an image editor to convert an image file to a 16 x 16 logo in .ico format and save it somewhere hnady.
• A much easier, quicker, and 100% free option is to go online and have your image converted for free. The best tool I have found for this action is a small, but effective tool on html-kit.com. Here is the link to this wonderful tool. Simply go there, feed it your image, and your web site icon will be available in moments.

When you have your .ico file saved, proceed to Step 2.

Step 2 of 2: Linking the Logo

Now that we have the logo/icon, we have to make it available. There are two means of doing this:

• The first way to link your logo is by simply placing it in the core directory of your web site with the file name “favicon.ico”. For example, if your site is ‘www.ilovehubpages.com’, your logo/icon should be at ‘www.ilovehubpages.com/favicon.ico’. Web browsers will look for favicon.ico whenever your site is added to a favorites list or is displayed in the address bar. If found, it will automatically appear next to your URL.
• For those of you that do not have access to the core directory of your web site, there is another means to add this logo/icon to your URL: by pointing right at it through the HTML source code. In this case, you can save your logo/icon with any .ico filename you choose, but make note of the location (either the full URL path, or relative path from the document you are linking). All that needs to be done now is placing some code between the and tags of your HTML source code.

Example One:
<link rel=”SHORTCUT ICON” href=”A_Directory/logo.ico”>

Example Two:
<link rel=”SHORTCUT ICON” href=”../A_Different_Directory/logo.ico”>

Example Th<link rel=”SHORTCUT ICON” <link rel=”SHORTCUT ICON” href=”http://www.yoursite.com/logo.ico”>

Take note that both full and relative pathing works for this HTML snippet.

Some Closing Links

Now that we are done, here are some useful links related to this topic:

Favicon on Wikipedia

Working with favicons in PHP

Favicon support chart

Image Generation: Favicons