Add a Custom Icon to Your Web Site
Written by
Gregory Scot Collins
Monday, 26 February 2007, 5:34 PM
This article has been tested to work with the following products and versions. No guarantee of compatibility, with or without modification, is offered for products or versions other than those listed.
- Internet Explorer 7.0 and 6.0 (Microsoft)
- FireFox 2.0 and 1.5 (Mozilla)
- Opera 9.0 (Opera Software)
- HTML 4.01 (W3C)
IN THIS ARTICLE:
Perhaps you've been impressed by Web sites that have their logo appear in the browser next to the page title and want to do the same thing for your own site. It's actually quite simple to do. This custom icon is known as a "favicon" (a concatenation of the words favorites and icon), the name originating from Microsoft Internet Explorer displaying these icons in the list of favorites.
Modern browsers automatically look for a file named favicon.ico located in the root folder of a Web site. If the file exists, the browser will display the icon next to the page title in the address bar, tab, and favorites/bookmarks listing, as shown in Screenshot 1. Some older browsers have the capability to display the icon, but need to be notified that there is one and where it is located. This can be done by adding specific link tags to the head section of your web pages, as shown in Listing 1:
While use of the link tags is optional, it is best practice to use these link tags instead of relying on the automatic favicon detection features of a browser. Both link tags should be used in order to support multiple browsers, including older browsers are capable of displaying the favicon. Each page that should display the icon should contain these tags. When present, modern browsers will use the link tags instead of auto detecting whether the favicon.ico file is present.
Create your custom favicon
Favicons typically depict a company logo, or another identifiable associated trademark or some subset thereof. If you do not have your own icon, you can download or purchase icon editing software to create one. Or, instead of an .ico file, you can also use a .png (type="/image/png") or .gif (type="/image/gif") file. Some browsers even support animated .gif files. These alternate image formats have the advantage of not requiring any specialized software for creating icon files. However, they have the disadvantage of not being able to support multiple image sizes. Whichever format you choose, your image should be sized at 16x16 pixels or 32x32 pixels. If you choose to use an .ico file, your favicon file can contain multiple images of varying size and color depth, as shown in Screenshot 2.
Handle multiple Web sites on a single shared hosting service
Using the link tags, you can specify the name and location of your favicon file. When hosting multiple Web sites on a single shared hosting service, this is important so that each site can have its own icon. Otherwise, all sites would be left to use the same icon. For example, Listing 3 shows the tags as one site might specify them:
While Listing 1 shows the tags as a second site might specify them:
Copyright ©2007
Braintrove. All rights reserved. This material may not be copied, published, broadcast, rewritten
or redistributed. You may, however, use the techniques, along with any associated code and files in
your development. This material is provided "AS IS" without warranty of any kind. You accept full
responsibility and liability for any and all results associated with use of this material.
Stumble It!
Digg It!
del.icio.us
