Creating Favicons

What is that little image next to the URL, and how do you get one?

When Internet users visit certain websites, they might see a favicon in their browser address bar. Favicons, also known as favorites icons, are often modified versions of a company logo, most often appearing in the URL bar of a browser.

Simply an image that the website designer/developer tells the browser to display, favicons are not just limited to a user's address bar - they also can be made available to users when bookmarking your site for later viewing or to access your site quickly using a tabbed document browser interface.

From the User Perspective
Favicons act as a branded icon and provide visual cues that visitors can use to identify your website or a specific site address. The appeal is in the extension of a website's brand. Not only will your site look a little more professional, but users equate your favicon to your business - theoretically getting your site noticed much faster than a site without an icon.

How Favicons Work
When a user bookmarks a website or even a Web page, the browser will request a favicon.ico file from the directory of the website. If such a file exists, then the site will return the favicon file to the browser. When a site has not created a favicon, browsers will display a default icon - in the case of Internet Explorer, the IE logo, in the case of Firefox, a blank sheet of paper. Now, wouldn't you rather have your own personalized image appearing?

From a Design Perspective
In days past, to get your favicon to appear in a browser window you had to place it in the root directory of a site. Internet Explorer - still the predominant browser - would automatically use it for a favorites or bookmarks display. Now all that is required are the favicon image and two lines of code within the head section of your pages.





It is important that the image used for a favicon meets some specific requirements. While the .ICO file format is understood by most browsers, those creating favicons can also use .GIF or .PNG files. Favicons are usually created at a size of 16x16 pixels but many using the .ICO format create larger-sized favicons (32x32, 64x64 and 128x128) with more substantial bit depths (bpp) to increase the image quality.

Universal Acceptance
Most current browsers support favicons, including Internet Explorer 5/6+, Firefox 1+, Mozilla 1+, Netscape 7+, Opera 7+, Konqueror 3+ and Safari. If a particular browser does not have support for the favicon feature, it will simply ignore it, but the presence of a favicon won't negatively affect that browser. Either way you decide to do it, favicons can give your site a more professional look and could help gain a little more mindshare with your consumers.