Creating Favicons

Posted on

  • email
  • twitter
  • facebook
  • share this

share this

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.

<link rel="icon" href="" type="image/x-icon">

<link rel="shortcut icon" href="" type="image/x-icon">

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.


Login To Comment

Become a Member

Not already a part of our community? Sign up to participate in the discussion. It's free and quick.

Sign Up

Be the first to comment on this article

999 E Touhy Ave
Des Plaines, IL 60018

Toll Free: 1.800.817.1518
International: 1.773.628.2779
Fax: 1.773.272.0920