favicon for Browser Address Bars

4. March 2009
Comments (0)

The icon displayed to the left of a browser address bar URL is called a favicon(.ico). This is usually a 16x16 pixel size ICO icon file that is usually rendered into the address bar.

We’ve already spotted two caveats in our first sentence! Here goes:

  1. Not all browsers render the favicon automatically. Firefox 3 does, IE7 & Flock don’t seem to, neither does Google’s Chrome browser.
  2. Not all web-servers render the favicon without adding a some code into your HTML <head> section. See note* below.
  3. The 16x16 px icon size refers only to the icon displayed in the address bar. If you provide a larger icon or multiple resolutions including 32x32 px, this is substituted when doing other operations with a URL – such as dragging a URL to desktop or to another application.
  4. When you’ve added a favicon to your site, you may not see it. Unless you really want to delete local browser history and files, you’re best to check with a different browser or a different PC.

 

1962

Just for the curious here are the various favicons that Google have tried out on us, the most recent being the Google ‘g’.

google-favicon-iterations

*HTML head section code:

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

References for this article:

  • How to create and install a favicon.ico
  • Here is a neat website which can generate a favicon from an existing image, also including a collection of favicons for download. These are distributed under a Creative Commons license.
  • Another free favicon library here.

Nick Harrington
team Ambay Software

General