What is a Favicon?
 |
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. The favicon will also occupy open tabs in tab-enabled browsers, and will display next to bookmarked links. Favicon 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 favicons.
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.
A favicon 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 favicon 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 favicon 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 the favicon 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 as favicons. 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 favicon 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 a favicon is a simple and enjoyable task that can take anywhere from a few short minutes to an afternoon or evening.
|
Related wiseGEEK articles
Category
|
|
copyright © 2003 - 2008
conjecture corporation
