Custom Icon for Browser Favorites List
When Microsoft introduced what they called the Shortcut
Icon for IE5's favorites list, many articles appeared
on the Internet about how to create them and use them.
Now, not much is heard about them, although information
is still to be found on the Internet — provided one knows
what to search for.
How To Implement It
The icon is created with icon image software, saved as a
file named favicon.ico, and uploaded to the document root
directory (where web page files are located) of the server.
That's it. The next time someone bookmarks a page using
one of the latest popular browsers, the icon image will
be in the bookmarks/favorites list next to the web page
title. Some browsers also put the icon in the browser's
address bar when the page is viewed.
If you want to name the icon image file something other
than favicon.ico, or put it somewhere other than the
document root directory, you can do so. However, this tag
must then be put in the bookmark-able web page HEAD area:
<link
rel="shortcut icon"
href="http://example.com/somewhere/othername.ico">
The href URL must be the URL to your Shortcut Icon file.
The above method allows you to have unique icon images for
specific web pages.
The favicon.ico file in the document root directory would
be used for all web pages not containing the above tag.
The Image Specifications
Now that you know all about putting the icon on the server
so browsers can find it, I bet you would like to know how
you can get such an icon in the first place.
I'll provide URLs to software in a moment, but first the
Shortcut Icon specifications:
-
The icon must be a 16 x 16 pixels in size.
-
The icon color depth must must 24 bits per pixel.
(24 bit color).
So long as the icon image fits those specs, you can have
any image you want.
The Software
When I need to make or modify a Shortcut Icon,
I use IconoMaker (Windows software) from
http://www.aha-soft.com/iconomaker/
When Mari is ready to create a Shortcut Icon, she uses the
http://www.chami.com/html-kit/services/favicon/ "FavIcon
from Pics" web page. The page creates a Shortcut Icon file
from an image on your hard drive. Then you can download
your new favicon file.
Potential Frustrations
After you've uploaded the Shortcut Icon file to your server,
the icon might not appear immediately in your browser,
depending on which browser you're using.
If you happen to be an IE5 (Windows) user, understand that
the icon sometimes doesn't display right away, and that it
sometimes disappears from the favorites list only to
magically reappear later.
For both IE5 and IE6 (Windows), the icon will not appear in
the browser's address bar when a web page is first visited.
On revisits after bookmarking, the icon appears in the
address bar (with IE6).
We couldn't get IE5 (Mac) to display the icon anywhere, in
address bar or favorites.
Other browsers we've tested work okay:
Firefox (Mac and Windows) and Opera (Windows) both display
the image in the web page's tab and the browser's address
bar almost immediately after the web page has finished
loading, whether or not previously bookmarked.
Safari (Windows) displays the image in the the browser's
address bar almost immediately after the web page has
finished loading, whether or not previously bookmarked.
The Steps
-
Make a Shortcut Icon. Name the file favicon.ico
-
Upload it to your server's document root directory.
Note: The icon file may be named other than favicon.ico
and it may be uploaded into a different directory.
The <link...> tag will then be required in the
HEAD area of web pages that will use the icon.
-
Test (with non-IE to reduce frustration potential).
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©2005 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
