How to Add a Favicon to your Site

Status of this Document

Draft in development; may change radically at any time.

A favicon is a graphic image (icon) associated with a particular Web page and/or Web site. Many recent user agents (such as graphical browsers and newsreaders) display them as a visual reminder of the Web site identity in the address bar or in tabs. The wikipedia includes an article about favicons [FAVICON-WIKIPEDIA].

To add a favicon to your Web site, you'll need both an image and a method for specifying that the image is to be used as a favicon. This document explains the method preferred by W3C for specifying the favicon. There is another common method that is illustrated below, with an explanation of why that method is inconsistent with some principles of Web architecture. Both methods only apply to HTML and XHTML, one of the limitations discussed below.

This document does not discuss in detail how to create a favicon image. However, the format for the image you have chosen must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors. The format of the image must be one of PNG (a W3C standard), GIF, or ICO.

Method 1 (Preferred): Use of a `rel` attribute value defined in a profile

The first approach for specifying a favicon is to use the rel attribute value "icon" and to define what the value means via a profile; profiles are discussed in more detail below. In this HTML 4.01 example, the favicon identified via the URI http://example.com/myicon.png as being a favicon:

<!DOCTYPE html 
      PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
[…]
</head>
[…]
</html>

The XHTML 1.0 version looks very similar:

<!DOCTYPE html 
      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
      xmlns="http://www.w3.org/1999/xhtml" 
      xml:lang="en-US"
      lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" 
      type="image/png" 
      href="/somewhere/myicon.png" />
[…]
</head>
[…]
</html>

Method 2 (Discouraged): Putting the favicon at a predefined URI

A second method for specifying a favicon relies on using a predefined URI to identify the image: "/favicon", which is relative to the server root. This method works because some browsers have been programmed to look for favicons using that URI. This approach is inconsistent with some principles of Web architecture and is being discussed by W3C's Technical Architecture Group (TAG) as their issue siteData-36. To summarize the issue: The Web architecture authorizes site managers to manage their URI space (for a given domain name) as they see fit. Conventions that do not represent community agreement and that reduce the options available to a site manager do not scale and may lead to conflict (since there is no well-known list of these predefined URIs). One practical consideration illustrates the problem: many users have Web sites even though they do not have their own domain name. These users cannot specify favicons using the second method if they cannot write to the server root. However, they can use method one to specify a favicon since it is more flexible and does not constrain the site manager to use a single favicon at a single place on the site.

There are a few other well-known encroachments on URI space, including the "robots.txt" file and the location of a P3P privacy policy. The Technical Architecture Group is exploring alternatives that do not impinge on URI space without license.

Use of Profiles to Define Terms Such as "icon"

Loosely speaking, a profile is a definition of set of terms. Ideally, a profile includes both machine-readable information and human-readable information. In HTML 4.01 and XHTML 1.0, a few attributes such as the rel attribute do not have a predefined set of values. Instead, the author can provide values according to need, and then use a profile to explain what the values mean. In our case, we have recommend that authors use the value "icon" and a profile that explains that "when we say icon, we mean 'this is a favicon.'"

In Method 1 above, we use the rel attribute with the LINK element and choose a profile with the profile attribute on the HEAD element.

We defined a profile which you can freely use for your own sites.

Limitations

There are several limitations to the approaches described above, including the preferred method (which is why the TAG continues to work on the question):

The approaches only work in HTML or XHTML
The preferred approach associates a favicon with an HTML document, not a collection of documents (i.e., a site)
The proposed profile for defining the "icon" value is not a recognized standard, which means there may be interoperability issues in practice.
There is no standard (at least defined by HTML 4.01) for machine-readable profiles that would allow a browser to know "this means an image is a favicon." Thus, a browser has to be programmed in advance to recognize this particular value of rel. For more information on the use of profiles in HTML and XHTML, see GRDDL [GRDDL].

References

FAVICON-WIKIPEDIA: Favicon, Wikipedia, Available at http://en.wikipedia.org/wiki/Favicon .
GRDDL: Gleaning Resource Descriptions from Dialects of Languages, D. Hazaël-Massieux, D. Connolly, Editors, W3C Team Submission, 16 May 2005, http://www.w3.org/TeamSubmission/2005/SUBM-grddl-20050516/ . Latest version available at http://www.w3.org/TeamSubmission/grddl/ .
HTML401: HTML 4.01 Specification, D. Raggett, A. Le Hors, I. Jacobs, Editors, W3C Recommendation, 24 December 1999, http://www.w3.org/TR/1999/REC-html401-19991224 . Latest version available at http://www.w3.org/TR/html401 .
SITEDATA-36: Web site metadata improving on robots.txt, w3c/p3p and favicon etc., TAG, Available at http://www.w3.org/2001/tag/issues.html#siteData-36 .
XHTML1: XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition), S. Pemberton, Editor, W3C Recommendation, 1 August 2002, http://www.w3.org/TR/2002/REC-xhtml1-20020801 . Latest version available at http://www.w3.org/TR/xhtml1 .

Acknowledgements

The following QA Interest Group participants and W3C staff have contributed significantly to the content of this document: Dominique Hazaël-Massieux (W3C), Chris Lilley (W3C), and Olivier Théreaux (W3C).