HTML	Lotech Solutions ( www.lotechsolutions.com)

I had some fun trying to get individual custom icons to display for each of my web pages on my site, you know, the icons which display in the favorites list in IE (after V5.1), and subsequently display in the address bar when a favorite link is used.

The matter was not that I couldn't get a custom icon to display, but that I couldn't get the icon I wanted to display. I ended up creating several coloured different versions of the same icon and placing them everywhere to help determine where IE was getting the displayed icon from.

Microsoft details how to create and place an icon for display in IE at:
http://msdn.microsoft.com/dhtml/workshop/author/dhtml/howto/shortcuticon.htm
however, it fails to discuss the consequences of following both methods it describes. It turns out that there is a hierarchy in play, and if you happen to follow the first method, it takes precedent over all others. The trick is, to only follow one or the other of the methods, not both at the same time.

The first method is to create an icon named "favicon.ico" and place it in the root of your web. You need do no more, and every web page in your site will have this icon associated with it automatically by IE whenever one of your pages is saved to the user's favorite folder in IE. Microsoft don't explain if this works with other brand browsers.

The second method is to associate a particular icon with a web page by adding a link to the HTML head section of the page using the line:

<LINK REL="SHORTCUT ICON" 
  HREF="http://www.YourDomainName/YourPathStructure/YourIconName.ico">

Where:

• YourDomainName is the name of your domain; for example "LotechSolutions.com";

• YourPathStructure is the full path from your web root to the folder holding the icon; and

• YourIconName is the actual name of your icon you wish to associate with this page.

The benefit of method two is that you can associate a different icon with each subweb, or even individual page within a sub web should you wish to do so. The disadvantage is that you have to add the link to every page in the web to have it associate with an icon.

You can of course associate any number of pages with the same icon, and you can store the icons anywhere you like on the web. They don't even have to be on the same website.

 Note

Method two will have no affect if you also follow method one.

I chose to use method two and add a link to every page, because I wanted the flexibility of having different icons for my different subwebs. Just as different icons are used in Windows Explorer to visually identify drives from folders from files, etc., I wanted to significantly separate my index page from my book reviews from my other site subjects.

How to create a custom icon

 

 

---

See Also

 Lotech Solutions' Tips, Tricks, and Procedures

---

 email webmaster

Copyright Lotech Solutions. All rights reserved.