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.
  
  

Media type designations for favicons

This note supplements the Wikipedia article on favicons. My focus here is specifically on media type designations for ICO images and for PNG images and their intepretation when used as values of the type attribute of favicon links served to Firefox (specifically 1.5.0.7) and IE (specifically 6.0.29) browsers.

IANA is the source of record for terms used on the web for such things as media types and provides sources of reference for these terms. RFC2046, Multipurpose Internet Mail Extensions (MIME) Part Two: Media Types, specifies that MIME media types will be assigned and listed by IANA. The following IANA rules for naming MIME media types are particularly helpful for understanding the media type designations used for webpage favicons.

Experimental names

A media type designation beginning with the characters "x-" is considered an experimental media type name. RFC2046 tells us:

A media type value beginning with the characters "X-" is a private value, to be used by consenting systems by mutual agreement. Any format without a rigorous and public definition must be named with an "X-" prefix, and publicly specified values shall never begin with "X-".

Note: Publicly specified values are terms enrolled with IANA.

Proprietary names

RFC2048, Multipurpose Internet Mail Extensions (MIME) Part Four: Registration Procedures, tells us that a vendor may register a media type name:

…for media types associated with commercially available products … A registration may be placed … by anyone who has need to interchange files associated with [a] particular product. However, the registration formally belongs to the vendor or organization producing the software or file format. Changes to the specification will be made [only] at their request … Registrations [made by vendors] will be distinguished by the leading facet "vnd.". That may be followed, at the discretion of the registration, by either a media type name from a well-known producer (e.g., "vnd.mudpie") or by an IANA-approved designation of the producer’s name which is then followed by a media type or product designation (e.g., vnd.bigcompany.funnypictures).

ICO media type designations

Vendors are generally disposed to accomodate IANA terms but — as in this case — are not bound to them. Microsoft devised the ICO image format to allow one image file to bundle images of different sizes for the same icon; this format was intended for internal use by a commercially available product, the Windows operating system. Microsoft registered this format with IANA as image/vnd.microsoft.icon; this is the official name of this media type and this name is controlled by Microsoft.

Other makers of browsers accepted this image format to ensure their ability to render web pages written for IE browsers. However, one can imagine how galling it is for these vendors to see the name of their Microsoft competitor each time such an icon is specified. They would prefer to designate this format simply as image/icon, which would be consistent with IANA media type names for other common image formats. Unfortunately, Microsoft has registered the image/vnd.microsoft.icon name for this format. To form a competing, valid media type name that abides by IANA naming rules, other vendors converged on the alternate designation image/x-icon. In IANA’s terms, the image/x-icon designation is technically an unregistered experimental name: this name will not be found among IANA’s registered media type names but it will pass lexical and syntactic scrutiny because it conforms to IANA’s rules for constructing a valid media type name. The plain image/icon form is thus an informal designation, even though it is the only one of the three media type designations that is consistent in form with IANA names for other common image formats (e.g., image/cgm, image/gif, image/jpeg, image/png, image/tiff).

The last update of Microsoft’s registration of vnd.software.icon complains of a proliferation of alternate designations for Microsoft’s icon format: While "image/x-icon" is also used, this registration intends to finally clarify the media type for this file format. In spite of this complaint, IE allows other media type designations for this format. Indeed, default IIS 5.1 MIME map settings include image/x-icon but not image/vnd.microsoft.icon! Both IE and Firefox accept all media type designations listed in this table of webpage favicon media type designations:

media type	name status
type="image/vnd.microsoft.icon"	registered IANA name
type="image/x-icon"	experimental IANA name
type="image/icon"	informal designation
type="image/xcon"	imaginary designation

How Firefox and IE use media type names

I made up the image/xcon designation to test how Firefox and IE process favicon links. Both browsers accept this fictitious media type designation without comment. Both browsers also correctly render the webpage favicon image specified by the favicon link.

In fact, neither Firefox nor IE seem to mind if the entire type attribute is omitted from the link tag for a webpage favicon. Both browsers appear to ignore the type attribute altogether; they appear to pay attention only to the extension of the image file name. As it turns out, neither browser actually much cares about the image file name extension either.

Although Firefox does it one way and IE does it another, neither Firefox nor IE rely upon given file extensions or supplied MIME types to determine the actual MIME type of an image. For images loaded via <img src>, Mozilla’s image library will do content sniffing (never extension sniffing) to find out the real type of the image. In other words, Mozilla peeks into the image file itself to determine the appropriate image type. Firefox correctly displays a webpage favicon identified by <link rel="icon" href="images/favicon.icx" /> — that is, with an unknown file name extension and without a type attribute; we must then suspect that such content sniffing also occurs for images loaded as webpage favicons.

Something quite different occurs in IE given this flawed link tag. As this screen capture shows, IE correctly determines the true image type for the .icx file loaded via the link tag but is flummoxed by the invalid file extension when it is loaded via an <img> tag. This suggests that IE assumes that any file loaded via <link rel="shortcut icon" …/> must be an ICO image (i.e., of MIME type image/vnd.microsoft.icon).

Do other browsers or user agents care? Yes, they do. For one, Opera 9.02 will not load a webpage favicon with an unknown file name extension — but, like IE and Firefox, Opera does ignore the favicon link’s type attribute.

Discussion

Neither Firefox nor IE necessarily use either a webpage favicon image’s file name extension or its specified media type designation to determine an appropriate MIME type. In spite of this observation, a favicon link tag should be completely and correctly specified for several reasons:

• clarity: The favicon.ico naming convention exists and is well understood both by humans and user agents. To use a different file name for a webpage favicon is to invite unjustifiable confusion. (But see note below.)


• correctness: The type attribute should be specified because the default MIME type is text/plain. To omit the type attribute is to falsely assert that a webpage favicon image file contains plain text data.


• validity: The DTD for XHTML specifies:
  

  <!ENTITY % ContentType "CDATA">
      <!-- media type, as per [RFC2045] -- >

  
  (Even though strict XHMTL 1.0 validators — such as the W3C validator, the WDG validator, and Page Valet validator — do not presently complain about invalid or badly-formed IANA names, the XHTML DTD gives them every right to do so in the future.)


• risk mitigation: As we see with Opera, we cannot generalize from today’s behavior of two specific user agents to other user agents today or in the future. We mitigate risk by adhering to web standards and by making explicit our assumptions.

Note that this observation about clarity does not preclude extending the name favicon.ico using accepted domain naming conventions. By these conventions, terms in a name start with the most specific on the left and end with the most general on the right. Thus, the favicon.ico convention may be followed by extending this name to the left with increasingly specific terms. This table shows how such webpage favicon image file names might be constructed:

web page	favicon file
www.acme.com/about/directions.html	...acme\favicons\directions.about.favicon.ico
www.acme.com/assembly/directions.html	...acme\favicons\directions.assembly.favicon.ico
www.acme.com/jobs/apply/directions.html	...acme\favicons\directions.apply.jobs.favicon.ico

The real question is the choice of a valid IANA name for the media type designation: image/vnd.microsoft.icon or image/x-icon. Strict constructionists must use image/vnd.microsoft.icon. Further, should a separate link tag offer a PNG webpage favicon to reasonable browsers, image/vnd.microsoft.icon reminds a human reader that this webpage favicon is offered specifically to IE browsers.

PNG media type designations

Media type designation for PNG files is simple. IANA records image/png as the registered media type name for this image format.

media designation	name status
type="image/png"	registered IANA name
type="image/x-png"	experimental IANA name

Interestingly enough, Microsoft appears to recognize image/x-png as a MIME type but not image/png. However, neither image/png nor image/x-png is included in IIS 5.1’s default set of MIME types. In spite of the IANA registration of image/png, Microsoft apparently still considers the PNG image format to be experimental, which seems to be confirmed by IE’s continued problematic rendering of PNG images. (See the screenshot above: IE has rendered opaque a transparent PNG image.)

Recommendation

I recommend this approach, expressed in XHTML, to provide an ICO webpage favicon for IE while providing a PNG webpage favicon for other browsers:

<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="icon" href="favicon.png" type="image/png" />

The HTML 4.01 specification says: These link types are case-insensitive, i.e., "Alternate" has the same meaning as "alternate". However, XHTML 1.0 says that element names, attribute names, values from pre-defined sets are to be written in lower case. Therefore favicon links should be written in lower case to be compatible with both HTML and XHTML.

The first favicon link specifically targets IE while the second favicon link targets Firefox and other reasonable browsers. The order of these tags is important. As the Wikipedia article points out, IE incorrectly understands the rel value "shortcut icon" in the first tag as a single term instead of two terms separated by a space character. Because IE does not understand the value "icon", IE ignores the second tag.

In contrast, Firefox appears to correctly parse the rel value in the first tag into two separate terms. Not knowing what to do with the term shortcut, Firefox disregards it. Firefox does know what to do with "icon", so it requests the webpage favicon identified by the first favicon link. Firefox then requests the webpage favicon identified by the second favicon link.

Thus, IE ignores the second favicon link and loads only the favicon.ico file, while Firefox requests both files but only caches and loads the second one, favicon.png.

Additional note on webpage favicon link rel attribute values

Neither commonly used rel attribute value — "shortcut icon" or "icon" — is a standard value of the rel attribute of a link tag. The HTML 4.01 Specification says: Authors may wish to define additional link types not described in this specification. If they do so, they should use a profile to cite the conventions used to define the link types. Please see the profile attribute of the HEAD element for more details. I have not found any evidence that such a profile has been defined or used for favicon links. Such a profile reference would look something like this:

<head profile="http://www.acme.com/profiles/webpageFavicons">

Favicon terminology

Following the lead of the Wikipedia article on favicons, I define the term favicon to mean an icon displayed by a browser anywhere outside its viewport to signify a website or webpage. A browser’s viewport is the area of a browser window where the current page is rendered.

Favicon is a taxonomic term that sweeps together different kinds of images manipulated in different ways by different products. More specific terms are useful to distinguish different classes of favicon that may be characterized by mutually-exclusive properties. I have absconded with words from the Wikipedia definition to form the terms described in this table of Favicon Terms. A favicon link is an HTML link tag with with a rel attribute value of either "icon" or "shortcut icon".

favicon term	invoked by	applies to	source	image type see note	persistence	display context
webpage favicon	favicon link	specific page in a web domain	any URL	ICO GIF JPG PNG TIFF	cached	current page
website favicon	absence of favicon link	any page in a web domain without a webpage favicon	favicon.ico in a web domain's root folder	ICO	cached	current page
bookmark favicon	saving a webpage favicon or a website favicon	any page in a web domain	any URL	ICO GIF JPG PNG TIFF	saved	hyperlink

Note: The MIME type for a website favicon must be image/vnd.microsoft.icon or image/x-icon. The MIME type for a webpage favicon (a) may designate any image format native to a browser and (b) should be a well-formed IANA media type name, preferably a registered name.

Note: There may be other constraints on bookmark favicons, such as a limit on the physical size of the image file.

Note: I received 13,300,000 Google hits for favicon, 2,550,000 for page icon, 838,000 for site icon, 520,000 for bookmark icon, 95,500 for favorites icon, and 18,700 for domain icon. By this measure, favicon is the most widely used of these terms. In contrast, Google reported only 20 hits for webpage favicon, 617 for website favicon, and 438 for bookmark favicon, so I feel comfortable expropriating these terms.