Favicon tool benchmarks: converting a PNG image to an ICO favicon

Many tools claim to convert favicons from one image format to another. A number of such favicon tools are recommended or suggested by a variety of sources on the web. I asked several of these tools to carry out just one, very specific task: given a PNG image with such and such properties, return an ICO image that IE can display. The screenshot below compares how well a number of these tools performed this task of converting a 32-bit PNG image with transparency into an icon image suitable for IE browsers. As you can see, some tools do rather better at this task while others do, well, rather worse.

I did not ask any more of these tools than a quick, straightforward conversion of a PNG image into an ICO image. I did not edit any resulting images. I did not try to master any tool. If a tool did not offer up its magic key for PNG-to-ICO conversion within a minute or so, I moved on to another tool.

This screenshot shows the ICO images produced by these tools. The window background is light gray to reveal opaque images. For ease of comparison, the original PNG image is shown at the left on each line. To the right on each line is the ICO image generated by a tool. Properties of the original PNG image are at the bottom.

Groups of these tools appear to use a common algorithm for image conversion. These tool groups are graded together in the next table. Images are shown at 32x32 pixels to reveal detail.

grade	icon image	tool/vendor	observation
A		towofu’s SOFT: @icon sushi; Impact Sofware: Microangelo Creation; Icon Empire: IconoMaker; aha-soft: IconXP; TheAlas.com: IconMasterXP; Oy Frontbase: Image to Icon	high fidelity
B+		Dynamic Drive: FavIcon Generator	clean, but some scale distortion
C		Axialis Software: IconWorkshop	some scale and noise distortion; spiky balls
C-		favicon.ru IconWorkshop	scale & noise distortion
D		Benkmann: png2ico; DeGraeve: Favicon Editor; HTML-Kit: FavIcon from Pics	considerable distortion
F		graphicsguru: Favicon Generator; IrfanView; Newera Software: IconCool Editor; kgreene: Favicon Creator;	considerable distortion and opaque
F		ImageMagick Studio: ImageMagick	failure
F		Favicon Generator	failure
F		Program4Pc: Icon Converter Plus	failure

Notes:

• IconXP and IconoMaker appear to be cloned products; both have the same user interface as well as the same apparent output.


• Oy Frontbase’s Image to Icon trial version watermarks images. So does Program4Pc’s Icon Converter Plus.
  
• I have not provided links to tools; all are easily googled.

Other tools:

tool/vendor	observation
CursorArts: IconForge	Does not appear to convert PNG to ICO.
Conware Software: IconArt	Does not appear to recognize PNG.
AxiomX: PixelToolbox	Does not appear to recognize ICO.
Kozhinov: IconEdit2	Trial version would not save ICO file.

Website favicons of MIME type image/png

By convention, the name of a website favicon image file must be favicon.ico. This name strongly implies that the MIME type of this file should be image/vnd.microsoft.icon. Indeed, IE does make this assumption: IE will only render website favicons in its own icon format.

Fortunately, neither Opera nor Firefox assumes that a favicon.ico file contains an image in Microsoft’s icon format. Firefox examines the content of an image file to discover the actual format of an image; this applies as well to favicon images. If Firefox recognizes the format as one it can render, Firefox cheerfully obliges. Opera’s behavior appears similar. Both Firefox and Opera will correctly render a website favicon prepared as a PNG image but saved as a favicon.ico file.

Note that Firefox will load website favicons and webpage favicons that are PNG images with 32-bit transparency. However, Firefox will save a favicon as a bookmark favicon only if the image size is less than 16K. This means that not all PNG website favicons or webpage favicons can be saved as bookmark favicons. For example, Macromedia Fireworks 8 will save a PNG file as either a Fireworks PNG or a Flattened PNG. Both image files are created with the extension .png. For a 16x16 pixel image, the size of the Fireworks PNG file may be 30K while the size of the Flattened PNG may be only 1K. Firefox will display webpage and website favicons provided in either PNG format. However, Firefox will not save a Fireworks PNG image as a bookmark favicon; instead, Firefox will substitute its default favicon for the intended bookmark favicon.

Although Opera and Firefox will accept additional website favicon image formats, they do not support other names for a website favicon file. They adhere to the favicon.ico convention. They will not request favicon files with different extensions (e.g., favicon.png).

IE problems with multiple favicon links

Only one webpage favicon can be displayed for a page. If a series of favicon links is presented to a user agent, you might reasonably expect only the last favicon link to be used. Firefox appears to gracefully handle multiple favicon links.

Unfortunately, multiple favicon links will frequently confuse IE. IE appears to assume that one and only one favicon link will be presented for a page. IE appears to process sequential favicon links as though each link is the only one. This apparently leads to corrupt favicon pointers: IE seems to lose track of its favicons.

Among other perverse behaviors, IE may then:

• refuse to obtain any more webpage favicons


• "lock" an inappropriate icon into the address bar, displaying the locked icon for every page


• display the webpage favicon of a deleted favorite

Because IE does not process favicon links with rel values of "icon", favicon links recognized by other browsers do not contribute to this problem.

Website favicons in the Firefox viewport

A website favicon loaded into the Firefox viewport by entering its URL in the address bar will also be displayed in the tab and the address. In this case, Firefox does not load the tab and address icon from the web domain’s root folder — these icon images are loaded from the browser viewport.

Firefox does this for all images rendered in its viewport as stand-alone images rather than as image elements within a rendered page. To see this behavior, right click any image in a rendered page and select View Image.

Favicon caching in Firefox

Should you google favicons, you will find statements like: when a browser first visits a site, the browser will request the file favicon.ico from a site's root folder. It's a bit more involved than this for Firefox. Firefox allows both webpage favicons for individual pages and a site favicon for all pages within a web domain. Firefox favicon processing looks like this for pages with content type text/html:

if a page has a favicon link then
  if the requested webpage favicon is not cached then 
    try:
      request the webpage favicon from the web server 
      if the webpage favicon is served then
        cache the webpage favicon
      else
        webpage favicon = default favicon
    catch:
       webpage favicon = default favicon
  else
     webpage favicon = cached webpage favicon

  try:
    load the webpage favicon
  catch: 
    load the default favicon

else 
  if the website favicon is not cached then
    try:
      request the website favicon from the web server
      if the website favicon is served then
        cache the website favicon  
      else 
        cache the default favicon as the website favicon
    catch:
      cache the default favicon as the website favicon
 
  try:
    load the cached website favicon
  catch:
    cache the default favicon as the website favicon
    load the cached website favicon

Note: I used the nifty Firefox extension Tamper Data to look at communications between Firefox and an IIS 5.1 server. Tamper Data is much more convenient than inspecting browser requests in server logs.

Observations

• Firefox caches webpage favicons and website favicons in the same cache that is reached by Tools»Options»Privacy»Cache. Firefox appears also to keep a copy of its default favicon in this cache. (Bookmark favicons are saved with the bookmarks themselves in a file named bookmarks.html, which is kept separately for each user.)



• A webpage favicon and a website favicon are mutually exlusive for any given page. If a favicon link is present in a page, no attempt will be made to obtain or load a website favicon.



• A first visit to a web domain is signalled by the absence of a cached website favicon. A page containing a favicon link causes a webpage favicon to be cached, but has no effect on the presence or absence of a cached website favicon. Thus Firefox will continue to look forward to its first visit to a domain while rendering any number of pages with favicon links retrieved from that site. Firefox seeks a website favicon only when (1) it receives a page that does not have a favicon link and (2) discovers no cached website favicon for the web domain of that page. Given a cleared cache, this dual state will be reached exactly once for any web domain.



• The only way to cause Firefox to change a website favicon is to clear this cache. Once a website favicon is cached, whether one actually obtained from a server or a copy of the default favicon, Firefox will not request that website favicon again.



• Firefox keeps every successfully-loaded webpage favicon in the cache. More than one webpage favicon may be cached for a page. More than one page may be associated with any webpage favicon in the cache.



• In contrast to website favicons, default favicons are not cached as webpage favicons. Firefox will continue to request a webpage favicon each time a page is served until the requested webpage favicon is successfully loaded. Thus, an initial default webpage favicon may change to a specified webpage favicon. Once a specified webpage favicon has been cached, Firefox will not request that webpage favicon again, and a successfully-loaded webpage favicon can not be reverted to the default favicon.



• The webpage favicon for a page can be changed by specifying a different favicon image file in the page's favicon link before the page is rendered again. However, the content of a specified webpage favicon can not be changed once it is cached. The cache must be cleared to change the content of any cached webpage favicon.



• Firefox will not bypass the cache for favicons.
  
  
  • Note that this contrasts sharply with the way Firefox treats images rendered in pages (i.e., in the viewport). When a page is reloaded, Firefox will ask whether an image has been changed and if it has changed, Firefox will load the updated image from the server rather than load the locally cached image. Bypassing the cache will force Firefox to replace cached viewport images with new images from the server.
  
  
  • Due to this difference in handling favicon images and viewport images, it is possible for Firefox to display a different image for a favicon than it does for a viewport image rendered from ostensibly the same image file. In this case, the favicon image will be previous version of the content of the image file.
    



• Firefox’ browsing history is not at all involved in this.