Life of Christ: Favorites icons for webmasters

	Life • History • Teachings
		Favorites icon How did they do that? If you've bookmarked a website with Internet Explorer 5.0 (IE5) you've probably asked this question after viewing your favorites list. An icon, like the one above, may appear next to the website listing. Note, this is a digression from the normal subject matter for LifeofChrist.com, but may be of interest to website developers. Explanation There is a new feature for IE5 called the "Favorites Icon." This article will show you how easy it is to add a favorites icon to your own website. In addition, I've included a tip that will help you avoid a mistake I made when creating the favorites icon for this site. Bookmark this page now If you create websites, you will be glad you bookmarked this page. Go ahead, do it now - we'll wait. If you use IE5, check your favorites list after bookmarking the page. You should see an icon with 3 crosses next to the listing for this page, like the screen shot below. Screenshot This is how a favorites icon will appear in your browser. Notice that the default explorer icon appears next to the link for Infoseek. But the links for LifeofChrist.com and Yahoo have custom icons. In addition, the LifeofChrist.com icon appears in the address field of the browser. These are favorites icons. Requirements These 2 items are required to view, create, and deploy a favorites icon. 1. Internet Explorer 5.0 Only visitors with IE5 will be able to view a favorites icon. Consequently, you will need to have IE5 yourself to test the icon (you do test your site, right?). If you don't know what version of Internet Explorer you have, simply select Help/ About Internet Explorer/ and the version will appear. If it's not version 5.0, then download IE5 for free at Microsoft's website. If you tell visitors that you've added a favorites icon, be considerate and indicate that they must have IE5 to view your new creation. At this site's home page I've created a .gif image to show all of my visitors the picture. 2. Favicon.ico image Your picture will need to be saved in an icon format, with a ".ico" file extension. Name the image "favicon.ico". Read on for instructions on creating a favicon.ico image. Domain Names There are two methods of adding a favorites icon, depending on whether your site has a domain name. With a Domain Name If you have a domain name, just follow the steps below. If you would like to purchase a domain name, visit Network Solutions. No Domain Name If you do not have a domain name, you can still add a favorites icon by using IE5s new shortcut icon link in the heading of your web page. Add the following link between the <head> </head> tags of your document: <link rel="shortcut icon" href="dirname/iconname.ico"> In the HREF property, "dirname" refers to the directory where the icon is saved. This is an optional field. With this method, the icon can have any name, but must be saved in the .ico format. Max Spicer, webmaster for University of York Christis, was kind enough to share this tip. How to create a favicon.ico image You will need an icon editor. At present, most image editors do not recognize the favicon.ico image format. So to begin, you will need to obtain an editor that does. You can download an icon editor, or visit Favicon to create one online. ZDNet has reviewed several downloadable icon editors. Some of the icon editors will allow you to convert images from .gif or .bmp to .ico formats. So if you are like me and have a favorite image editor; you can create your icon in that program first, then import it to an icon editor. And no, you cannot save a file as image.gif and rename it as image.ico. I tried, and it doesn't work. Icon image limitations The favorites icon must adhere to 3 restrictions: 1. The image must be exactly 16x16 pixels in size. 2. The image is limited to a 16 color palatte. 3. You must name it "favicon.ico" to be recognized. Color restrictions The picture below shows the only colors that may be used in a favorites icon. Color palatte I originally made the mistake of thinking the 16 color limit applied to the color depth, and not the color palatte. Consequently, the first image I created looked like this. The picture is supposed to be the face of Jesus. I created it as a .gif in Paint Shop Pro. It has only 16 colors. However, it quickly became apparent that this picture would not work when I placed it in a program that converts .gif files to .ico files. When the picture converted, it looked like this. As a result, I started over, and created the following icon which uses the restricted colors. It's actually a better icon because the symbols communicate quickly without explanation. So, don't make the mistake I did and use colors outside the restricted palatte above. And if the previous rant about .gif and .ico doesn't make sense, just remember that you can only use the colors shown in the 4x4 grid above. Save as favicon.ico Your icon must be named "favicon.ico" to be recognized by Internet Explorer 5.0. One bonus is that you can track how many times your site is bookmarked with IE5. View your site hit statistics and look under file requests for "favicon.ico". Right now, this file probably appears under the 404 File Not Found section of your hit statistics. Every one of these hits represents a visitor who bookmarked your site. Upload favicon.ico to root directory After you name the icon, simply upload it as an image to the root directory of your website. Place the icon in the same directory as your index.html file. Thats it! Your new icon should now appear in the favorites list when someone bookmarks your site! Test your favorites icon Now is the moment of truth to test your icon with IE5. (You do test your website, right?) If you have already added the site to your favorites list, you may need to delete the existing bookmark first. To do so, follow these steps: 1. In the Favorites menu, select Organize Favorites. 2. Highlight your bookmark and select Delete. (And if you haven't bookmarked your own site - well, shame on you!) 3. You will be prompted to Confirm File Delete with the ever-familiar message "Are you sure you want to send X to the recycle bin?" Simply choose Yes at that point. 4. I suggest you close IE5 then reopen it before adding the new bookmark. In some cases it may not appear without doing this first. That's it! If you've done everything correctly, the icon should now appear in your favorites list when you bookmark it. More information Below are some helpful links for more information on favorite icons. (Didn't I say you would want to bookmark this page?) ZDNet - Reviews and links to download icon editors. ForeverWeb - The favicon.ico mystery solved. WDVL - Artistic tips on how to create your icon logo. Favicon - A free online Java icon creation tool. Bitmap to Icon - A free downloadable icon conversion tool.
Site Map Legal		Home

Updated 26 August 2000