A favicon is a custom icon associated with a webpage or website that appears next to the http address in the URL window of a browser. It will also occupy open tabs in tab-enabled browsers, and will display next to bookmarked links. The term combines the words "favorites" and "icon." Microsoft Internet Explorer version 5.0 introduced the ability to display favicons, followed by other major browsers. Firefox, Netscape, Opera, Safari and Konquerer are among the many browsers that support this feature.
A favicon is so small that it is measured in pixels. A pixel is the smallest unit of measurement on a computer screen. Pixels, which resemble tiny blocks, are clearly visible when viewing a display screen through a magnifying glass. A favicon is just 16x16 pixels, 32x32, or, in the case of Macintosh computers, sometimes 64x64 or larger.
Designing a logo for such a tiny canvas is no easy task, so it's easier to start with a larger canvas and then re-size the image down. Since reducing an image can cause it to loose clarity, it's best to start with a canvas size about 64x64 pixels.
These icons can be designed in monochrome, 16 colors, 256 colors, or more, using almost any graphics program. Once the design is reduced and saved, it can be converted to an icon file. Not all graphics programs save files as .ico files, but there are many graphics programs available online that are specific to .ico file creation and conversion. By opening a .bmp, .jpg, .gif, or other image file in one of these programs and choosing "Save as," you can convert the image to the proper .ico format and name the file favicon.ico.
The icon can now be uploaded to the root directory of your website. Browsers will look for this file and display it if found. Aside from uploading it to the website, two lines of simple code should be added into the <head></head> section of the webpage as shown below. Change "website.com" to your actual website name:
<link rel="icon" href="http://website.com/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://website.com/favicon.ico" type="image/x-icon" />
If a website is bookmarked in Internet Explorer before it has a favicon, a new one might not display. Delete the bookmark, flush the browser's cache, and restart the browser. Now manually surf to the website and you should see the favicon. Bookmark the site to add it to favorites.
While Internet Explorer requires that the favicon be an .ico file, Firefox, Netscape, and other popular browsers can also display .gif, .jpg, and .png files. If using an image file type other than .ico, the code should be changed to reflect the correct image type. For example, if using favicon.png the code would read: type="image/png" /> rather than type="image/x-icon" />.
Associating a favicon with a website creates visual branding that can help a surfer recall your website and its content with a simple glance at his or her bookmarks. Whether a mini logo or original design, your image will ideally reflect something of the site's content, character, or name. There are several online companies that will design a favicon for you, if desired. However, for those with basic computer skills, creating one is a simple and enjoyable task that can take anywhere from a few short minutes to an afternoon or evening.
