« Create an RSS Feed for Your Web Site | Main | Add a Counter to Your Web Page »

Display Your Site Logo in the Address Bar

How do you display your web site logo in the address bar? Use favicon, a bit of code and this tutorial.

What is favicon? Favicon is a custom site logo that can be added to your web site. This logo shows up in the address bar and can add a professional look to your site. See image below. note - some browsers do not support favicon.

gbradhopkins.com favicon in Netscape 7

Adding favicon to your site is a fairly simple, two step process.

Create the file : First, you must create the favicon file. This file has to be a .ico (windows icon) file with dimensions of 16 x 16 pixels. I used Graphic Converter (Mac) to create my .ico file but there are many programs available that will do the job (search for .ico at download.com).

Implementing : Option 1) If you have root access then you can simply put the .ico file in the root level of your web site. This is the easiest way and will ensure that every page in your site will have the icon. When using this method, the file must be named favicon.ico.

Option 2) If you do not have root access, then you can add a small snippet of code to each page that you would like the icon to be displayed on.

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

Add this code between the <HEAD> and </HEAD> tags of your page, replacing /~your_directory/logo.ico, with the location and name of your .ico file. Using this method, you can name the file anything you like and can use different files for different sections of your site.

Posted by gBrad on November 8, 2004 01:59 PM | Permalink

Social Bookmarking

Add to: Linkarena Add to: Digg Add to: Del.icio.us Add to: Reddit Add to: Simpy Add to: StumbleUpon Add to: Slashdot Add to: Netscape Add to: Furl Add to: Yahoo Add to: Google Add to: Blinklist Add to: Blogmarks Add to: Technorati Add to: Newsvine Add to: Ma.Gnolia Add to: Netvouz Information

Comments

In this day of "bad guys" constantly screwing up computers. I do not appreciate someone changing my address bar logo; it looks like I have been invaded by a computer snatcher.

Posted by: Ed Cherry | March 25, 2005 10:57 AM

The favicon thing doesn't work for me no matter which way I do it. Also I see on other sites which have an icon in the address bar, that there is no .ico in the html. What is going on?

Posted by: Tom Durbin | April 13, 2005 01:41 PM

As I indicated in the tutorial, if you have root access to your webserver, you can simply drop the favicon.ico file into the root of the webserver. If that is how you were to do it then there would be no reference to it in the html.

One other thing to consider is that just because you can't see it, doesn't mean that others can't. I recently reset my browser and I cannot see my own favicon but I know its working for others.

Posted by: G. Brad Hopkins | April 14, 2005 10:43 AM

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)