The Icon
You can make and add an icon to your site that appears beside your entry if someone bookmarks your site with IE 5+. You've probably seen a lot of sites that do this. This icon will appear in your Favorites list as well as in the address bar beside your URL in the viewer's browser.
This has the advantage of making your Favorites entry easier to find than if the browser just assigned you a generic icon. Along with a descriptive <title>, your site will really stand out in anyone's Favorites list.
To begin with you need to get or make a 16x16 pixel icon. There are a lot of free icons available and most drawing programs support the icon extension (.ico). Make sure it's a 16x16 pixel icon.
One trick my graphics staff (Linda) taught me about drawing icons is to draw the original icon as 32x32 and the resize it to 16x16. The bigger drawing area is easier to work with. Just make sure that the final file is 16x16 pixels.
Naming The Icon
One of the big keys to making the site icon work is to give it a specific name that IE understands. That name is "favicon.ico". Make sure to use "favicon" for the final filename and use the ".ico" extension.
The <link> Tag
To apply the icon to a page add the <link> tag below in the <head> of your page:
<head>
<link rel="SHORTCUT ICON" href="URL to favicon.ico">
...
</head>
Don't forget to upload your "favicon.ico", and make sure the HREF in the <link> tag is accurate.
You can add this <link> tag to any page you want to apply the icon to. Your main page should always be included. You may want to apply this to all of your pages.
This site only applies the site icon to the main page. Go there and view the source code to see my icon <link>.
Limitations
There are two major limitations to using a site icon. First, IE is the only browser that offers full support. Your icon will be shown in the Favorites listing as well as the address bar. Netscape and Opera will only use it in the address bar, not the viewer's bookmarks. I susupect this support will be added to both browsers soon.
Also, the icon disappears when the veiwer empties his browser cache. They must re-bookmark your site to get the icon back. This doesn't effect the address bar on Opera and Netscape, but totally removes the icon from IE.
There aren't any good methods avoiding the problems above, but the site icon is still a good way to get your site recoginized as a slick, modern site. Add them to your current page(s).
To Next Advanced HTML Lesson
Back To Advanced HTML Index
|