While nothing more than your bare-bones icon is necessary, sometimes a
bit of code can make all the difference between "trick" and "treat."
Normally, you would name the file "favicon.ico" and dump it into the main
directory of your site, as well as any other directories containing HTML
files that you think users might bookmark. That's all you need to do — if you put your .ico file in the root directory of your site, Explorer will automatically display your icon when a user bookmarks any HTML file that lives in the root directory.
Of course, there's more than one way to skin a cat, or, in this case, amp up your site's icon array. The
following are some examples of what you might want to do on some of your
pages to further customize the way the icons are served. If you need help
with HTML tags and syntax, check out our Intro to HTML.
If you want to give the user's browser a little help in grabbing your favorites icon, insert this code into the <head> portion of your HTML document:
<LINK REL="SHORTCUT ICON"
HREF="http://www.superbaum.com/favicon.ico">
If you'd like to use an icon with a name other than "favicon.ico" or put it in its very own directory — and who wouldn't, really? — simply let the browser know where the icon lives on the server by dropping this inside the <head> of the document:
<LINK REL="SHORTCUT ICON"
HREF="http://www.superbaum.com/wine/cheese.ico"
>
Don't forget that if you give the icon a different name, you have to keep
the file extension as .ico, otherwise the little guy just won't work. Now,
there are a few JavaScript tricks you can use to ensure that your icon gets
displayed properly (if you need to brush up on your scripting, give Thau's
JavaScript tutorial a once-over). Here's
some code for a fancy pre-loader in the <head> section of your HTML to
help your icon arrive on time
<SCRIPT language="JavaScript">
da_image = new Image();
da_image.src="favicon.ico";
</SCRIPT>
Alternatively, you can use JavaScript in the <body> of
your HTML to supply users with a simple way of adding your page to their
Favorites with one simple click.
Example 1:
This script writes a line in your page if the reader has a browser that can
see custom icons. They can then click the displayed link and confirm the
addition of your page to their favorites.
<SCRIPT language="JavaScript">
<!--
if ((navigator.appVersion.indexOf("MSIE") > 0)
&& (parseInt(navigator.appVersion) >= 4)) {
document.write("<a href='#' onclick='window.external.
AddFavorite(location.href, document.title);'>
Add this page to your favorites!</a>");
}
file://-->
</SCRIPT>
Example 2:
This script also writes a line in your page if the reader has a browser that
can see custom icons. But in case the reader does not have that kind of
browser, it will write a line that tells them they need to get with it, or
get lost (or just bookmark the page anyway).
<SCRIPT language="JavaScript">
<!--
if ((navigator.appVersion.indexOf("MSIE") > 0)
&& (parseInt(navigator.appVersion) >= 4)) {
document.write("<a href='#' onclick='window.external.
AddFavorite(location.href, document.title);'>
Add this page to your favorites!</a>");
}
else {
document.write("<b>Hey, you can <a href='#'
onclick='window.external.
AddFavorite(location.href, document.title);'>add us</a> to your
bookmarks, but you can't see our style. Man, it's time you got
the newest version of Explorer for Windows!</b>");
}
file://-->
</script>
Now that we've made the icon and loaded our pages up with the appropriate icon-friendly code, let's move on and upload our files to the Web via FTP.
next page»
