Displaying A Logo in IE's Address Bar and Favorites List

Hi! Thanks for returning for another week of the beloved HTML
newsletter. This week I have a quick and easy way to enhance your Web
site and the way it's displayed in Internet Explorer. This week I'll
tell you how you can make IE display your logo or any small image in the
address bar and next to your Web site name in the favorites menu.

From time to time while surfing around the net (using Internet Explorer)
I've noticed that when some sites load into my browser a small logo is
also displayed to the left of the URL in the address bar. I also noticed
how, when these sites are chosen as favorites in IE, the same logo
appears next to the site name in the favorites list. I always thought
that this was a neat trick - a relatively non-obtrusive way to add a
little extra sparkle to your site. As I found out, it doesn't really
take all that much effort and anyone can add this effect to their Web
site with relative ease.

Before doing this lesson you'll need to download a small application.
Sorry, Mac users, this weeks' lesson is strictly PC - but I promise to
make it up to you by talking about a Mac specific issue in the future.
If anyone has a suggestion for a Mac related issue, please email me at
paulvmiller@yahoo.com and I'll pick a topic from the suggestions.

As I mentioned, you'll need to download a small application - a Windows
icon editor. A good, easy example of this kind of program is called Icon
Editor and is available for free trial download from Herman Compute,
http://www.hermancompute.com/ -- and if you choose to buy it it's only
$30 - a pretty good deal.

So, download a trial copy and make an icon for yourself. Most icons are
around 16 pixels wide by 16 pixels high, which is pretty small as
graphics go. Keep in mind that you have a very limited amount of space
to deal with! Once you have your icon file (it will have a .ico at the
end of it) we can move on to actually putting it on the Web, which is
really quite easy.

There are two ways to display your icon file. The first way is the
easiest way, but it only works if you have access to the root directory
in your Web site. If you have a free Web site or a Web space provided
with an Internet connection, then you're less likely to have root
access, and this method won't apply. No matter, there's a way to work
around that. But if you do have root access, then all you have to do is
the following:

Upload your icon to the root directory (if the domain name of your Web
page is realestateisgroovy.com then the root directory is the directory
people go to when typing www.realestateisgroovy.com into their Web
browser. Put your icon file here.) Here's the catch - you MUST name it
"favicon.ico" for this to work! And that's all it should take--your icon
should appear when people go to your Web site.

If you don't have root access to your server (especially if you're
getting a free Web site or free Web space) then you'll need to put your
icon file wherever you have your index.htm file stored. In this case,
it's not necessary to name it favicon.ico - you can name it anything you
want...but there's some code to add to your page. You have to tell the
browser were to find your icon file, and what it's named. If your icon
is named "my_icon.ico" and you upload files to the directory
"my_directory" then the following code should go in the HEAD of your
HTML document:

You may have to mess around with this to get it to work. In one
instance, I had to try a few different variations of the directory
hierarchy till I got the right one. Once you do get it right, though,
just go to your site on the Internet and add it as a favorite. If you
already have it added as a favorite, IE will ask you if you want to
overwrite it. Say yes, and you should see your logo appear before your
site name. Neat, right?

Give it a try and see what happens. That's all for this week. Thanks for
tuning in and come back next week for more HTML newsletter. See you
then!