Favicon: Difference between revisions
Content deleted Content added
remove single see also that is linked in first couple sentences |
Speck-Made (talk | contribs) mNo edit summary |
||
| Line 6: | Line 6: | ||
A '''favicon''' (short for 'favorites icon'), also known as a '''website icon''', a '''page icon''' or an '''urlicon''', is an [[icon (computing)|icon]] associated with a particular [[website]] or [[webpage]]. A web designer can create such an icon, and many recent [[web browser]]s can then make use of them. Browsers that support favicons may display them in the browser's [[URL bar]], next to the site's name in lists of [[Bookmark (computers)|bookmarks]], and next to the page's title in a [[tabbed document interface]]. |
A '''favicon''' (short for 'favorites icon'), also known as a '''website icon''', a '''page icon''' or an '''urlicon''', is an [[icon (computing)|icon]] associated with a particular [[website]] or [[webpage]]. A web designer can create such an icon, and many recent [[web browser]]s can then make use of them. Browsers that support favicons may display them in the browser's [[URL bar]], next to the site's name in lists of [[Bookmark (computers)|bookmarks]], and next to the page's title in a [[tabbed document interface]]. |
||
The original means of defining a favicon was by placing a [[computer file|file]] called ''favicon.ico'' in the [[root directory]] of a [[webserver]]. This would then automatically be used in Internet Explorer's ''favorites'' (bookmarks) display. Later, however, a more flexible system was created, using [[HTML]] to indicate the location of an icon for any given page. This is achieved by adding two link elements in the <code><head></code> section of the document as detailed below. In this way, any appropriately sized (16×16 [[pixel]]s or larger) image can be used, and although many still use the [[ICO (icon image file format)|ICO]] format, other [[browser]]s now also support the animated [[GIF]] and [[PNG]] image formats. |
The original means of defining a favicon was by placing a [[computer file|file]] called ''favicon.ico'' in the [[root directory]] of a [[webserver]]. This would then automatically be used in Internet Explorer's ''favorites'' (bookmarks) display. Later, however, a more flexible system was created, using [[HTML]] to indicate the location of an icon for any given page. This is achieved by adding two link elements in the <code><head></code> section of the document as detailed below. In this way, any appropriately sized (16×16 [[pixel]]s or larger) image can be used, and although many still use the [[ICO (icon image file format)|ICO]] format, other [[browser]]s now also support the animated [[Graphics Interchange Format|GIF]] and [[PNG]] image formats. |
||
Most modern browsers implement both methods. Because of this, [[web server]]s receive many requests for the file "favicon.ico" even if it doesn't exist. This may annoy [[web server]] administrators by creating many server log entries, and unnecessarily loading the disk, [[CPU]], and network. Another common problem is that the favicons may disappear if the browser's [[cache]] is emptied. |
Most modern browsers implement both methods. Because of this, [[web server]]s receive many requests for the file "favicon.ico" even if it doesn't exist. This may annoy [[web server]] administrators by creating many server log entries, and unnecessarily loading the disk, [[CPU]], and network. Another common problem is that the favicons may disappear if the browser's [[cache]] is emptied. |
||
| Line 17: | Line 17: | ||
Another '''limitation''' of the code below is that it associates a favicon with a specific HTML or XHTML document. To avoid this, the favicon.ico file should be placed in the root directory. Most browsers will automatically detect and use the favicon.ico file. |
Another '''limitation''' of the code below is that it associates a favicon with a specific HTML or XHTML document. To avoid this, the favicon.ico file should be placed in the root directory. Most browsers will automatically detect and use the favicon.ico file. |
||
*It had been suggested that both of the following HTML lines should be included: |
* It had been suggested that both of the following HTML lines should be included: |
||
:<code><link rel="shortcut icon" href="<nowiki>http://example.com/favicon.ico</nowiki>" type="image/vnd.microsoft.icon"></code> |
: <code><link rel="shortcut icon" href="<nowiki>http://example.com/favicon.ico</nowiki>" type="image/vnd.microsoft.icon"></code> |
||
:<code><nowiki><link rel="icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon"></nowiki></code> |
: <code><nowiki><link rel="icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon"></nowiki></code> |
||
:However, only the former is necessary, as 'shortcut icon' will be treated as a list of possibilities by standards-compliant browsers (with "shortcut" being ignored, and "icon" used); while [[Internet Explorer]] will treat it as a single name ("shortcut icon"). The result is that all browsers understand the code. It is only necessary to include a second piece of code if one desires to offer an alternative image to modern browsers (e.g. an animated GIF). |
: However, only the former is necessary, as 'shortcut icon' will be treated as a list of possibilities by standards-compliant browsers (with "shortcut" being ignored, and "icon" used); while [[Internet Explorer]] will treat it as a single name ("shortcut icon"). The result is that all browsers understand the code. It is only necessary to include a second piece of code if one desires to offer an alternative image to modern browsers (e.g. an animated GIF). |
||
* The <code>link</code> elements must be inside the <code>head</code> element (between <code><head></code> and <code></head></code>) in the HTML. |
* The <code>link</code> elements must be inside the <code>head</code> element (between <code><head></code> and <code></head></code>) in the HTML. |
||
* For [[XHTML]], the link element must be terminated by "<code> /></code>" instead of "<code>></code>". |
* For [[XHTML]], the link element must be terminated by "<code> /></code>" instead of "<code>></code>". |
||
| Line 31: | Line 31: | ||
** GIF files <code>image/gif</code> |
** GIF files <code>image/gif</code> |
||
** PNG files <code>image/png</code> |
** PNG files <code>image/png</code> |
||
*Use the appropriate resolution and color depth. |
* Use the appropriate resolution and color depth. |
||
** ICO: include multiple resolutions (the most commonly used being 16×16 and 32×32, with 64×64 and 128×128 sometimes used by [[Mac OS X]]) and bit-depths (most common being 4, 8, 24 bpp—i.e. 16, 256 and 16 million colors) in the file. |
** ICO: include multiple resolutions (the most commonly used being 16×16 and 32×32, with 64×64 and 128×128 sometimes used by [[Mac OS X]]) and bit-depths (most common being 4, 8, 24 bpp—i.e. 16, 256 and 16 million colors) in the file. |
||
** GIF: use 16×16 in 256 colors. |
** GIF: use 16×16 in 256 colors. |
||
| Line 38: | Line 38: | ||
'''Note''': <code>favicon.ico</code> when located in the document root directory, will also be found by some browsers that do not process the <code>link</code> elements, even if it is not linked from anywhere on your site. |
'''Note''': <code>favicon.ico</code> when located in the document root directory, will also be found by some browsers that do not process the <code>link</code> elements, even if it is not linked from anywhere on your site. |
||
==Standardization== |
== Standardization == |
||
The original favicon feature was created by Microsoft, and Microsoft's Internet Explorer web browser would request a favicon from a set URL (/favicon.ico) on every website. Microsoft's supported format for the link tag did not conform to the [[World Wide Web Consortium]] (W3C) [[HTML]] recommendation[http://www.w3.org/2005/10/howto-favicon] because: |
The original favicon feature was created by Microsoft, and Microsoft's Internet Explorer web browser would request a favicon from a set URL (/favicon.ico) on every website. Microsoft's supported format for the link tag did not conform to the [[World Wide Web Consortium]] (W3C) [[HTML]] recommendation[http://www.w3.org/2005/10/howto-favicon] because: |
||
* The <code>rel</code> attribute must contain a space-[[delimited]] list of link types, so a two-word link type would not be understood correctly by conforming web browsers. |
* The <code>rel</code> attribute must contain a space-[[delimited]] list of link types, so a two-word link type would not be understood correctly by conforming web browsers. |
||
| Line 47: | Line 47: | ||
[[Image:Favicon iedisplay.png|right|frame|In [[Internet Explorer]] 6, favicons are displayed in the [[Favorites]] menu and the [[address bar]].]] |
[[Image:Favicon iedisplay.png|right|frame|In [[Internet Explorer]] 6, favicons are displayed in the [[Favorites]] menu and the [[address bar]].]] |
||
==Wikipedia favicon example (XHTML)== |
== Wikipedia favicon example (XHTML) == |
||
<link rel="shortcut icon" href="/favicon.ico" /> |
<link rel="shortcut icon" href="/favicon.ico" /> |
||
==External links== |
== External links == |
||
*[http://www.w3.org/2005/10/howto-favicon Proposals with the W3C web standards organisation on how to add a Favicon] |
*[http://www.w3.org/2005/10/howto-favicon Proposals with the W3C web standards organisation on how to add a Favicon] |
||
*[http://www.controlstyle.com/articles/programming/text/php-favicon/ Working with favicons in PHP]. |
*[http://www.controlstyle.com/articles/programming/text/php-favicon/ Working with favicons in PHP]. |
||
Revision as of 00:55, 4 September 2007
A favicon (short for 'favorites icon'), also known as a website icon, a page icon or an urlicon, is an icon associated with a particular website or webpage. A web designer can create such an icon, and many recent web browsers can then make use of them. Browsers that support favicons may display them in the browser's URL bar, next to the site's name in lists of bookmarks, and next to the page's title in a tabbed document interface.
The original means of defining a favicon was by placing a file called favicon.ico in the root directory of a webserver. This would then automatically be used in Internet Explorer's favorites (bookmarks) display. Later, however, a more flexible system was created, using HTML to indicate the location of an icon for any given page. This is achieved by adding two link elements in the <head> section of the document as detailed below. In this way, any appropriately sized (16×16 pixels or larger) image can be used, and although many still use the ICO format, other browsers now also support the animated GIF and PNG image formats.
Most modern browsers implement both methods. Because of this, web servers receive many requests for the file "favicon.ico" even if it doesn't exist. This may annoy web server administrators by creating many server log entries, and unnecessarily loading the disk, CPU, and network. Another common problem is that the favicons may disappear if the browser's cache is emptied.
Originally, Internet Explorer only used favicons for bookmarks (for instance MSIE 6.0), which created a minor privacy concern in that a site owner could tell how many people had bookmarked their site by checking the access logs to see how many people downloaded the favicon.ico file. However, since newer versions of Internet Explorer (e.g. 7.0) and most other browsers also display the favicon in the address bar on every visit, this is becoming less of an issue.
Guidelines
In the past, to ensure that the favicon did indeed appear, various measures were taken by web designers and developers. There is no known guarantee that favicons will appear on all computers, even on same browsers with the same versions.
Another limitation of the code below is that it associates a favicon with a specific HTML or XHTML document. To avoid this, the favicon.ico file should be placed in the root directory. Most browsers will automatically detect and use the favicon.ico file.
- It had been suggested that both of the following HTML lines should be included:
<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon"><link rel="icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon">
- However, only the former is necessary, as 'shortcut icon' will be treated as a list of possibilities by standards-compliant browsers (with "shortcut" being ignored, and "icon" used); while Internet Explorer will treat it as a single name ("shortcut icon"). The result is that all browsers understand the code. It is only necessary to include a second piece of code if one desires to offer an alternative image to modern browsers (e.g. an animated GIF).
- The
linkelements must be inside theheadelement (between<head>and</head>) in the HTML. - For XHTML, the link element must be terminated by "
/>" instead of ">". - The
hrefcan, but need not, point to the location/favicon.ico. It could point to any URL. - The image can usually be in any image format supported by the web browser.
- The
.icofile format will be read correctly by all browsers that can display favicons. - Configure the webserver to send the correct MIME identifier:
- ICO files
image/vnd.microsoft.icon(Alternatively,image/x-iconcan be used instead, for compatibility reasons. However, it is preferable to use the IANA-registered MIME type, as most major browsers now support it.) - GIF files
image/gif - PNG files
image/png
- ICO files
- Use the appropriate resolution and color depth.
- ICO: include multiple resolutions (the most commonly used being 16×16 and 32×32, with 64×64 and 128×128 sometimes used by Mac OS X) and bit-depths (most common being 4, 8, 24 bpp—i.e. 16, 256 and 16 million colors) in the file.
- GIF: use 16×16 in 256 colors.
- PNG: use 16×16 in either 256 colors or 24-bit.
Note: favicon.ico when located in the document root directory, will also be found by some browsers that do not process the link elements, even if it is not linked from anywhere on your site.
Standardization
The original favicon feature was created by Microsoft, and Microsoft's Internet Explorer web browser would request a favicon from a set URL (/favicon.ico) on every website. Microsoft's supported format for the link tag did not conform to the World Wide Web Consortium (W3C) HTML recommendation[1] because:
- The
relattribute must contain a space-delimited list of link types, so a two-word link type would not be understood correctly by conforming web browsers. - The ".ico" file format (a raster format used for icons on Microsoft Windows) did not have a registered MIME type, and wasn't likely to be automatically understood by most web browsers. In 2003, however, the format was registered with the Internet Assigned Numbers Authority (IANA) under the MIME type image/vnd.microsoft.icon, eliminating the first part of this problem.
- The use of a reserved location on a website conflicts with the Architecture of the World Wide Web, and is known as link squatting or URI squatting.
The Mozilla web browser added support for favicons in a way that conformed to web standards through the use of rel="icon" and letting web designers add favicons in any supported graphics format. e.g. <link rel="icon" type="image/png" href="/path/image.png">. Most web browsers have since added support for this feature, which should be used for all new content.
Wikipedia favicon example (XHTML)
<link rel="shortcut icon" href="/favicon.ico" />
External links
- Proposals with the W3C web standards organisation on how to add a Favicon
- Working with favicons in PHP.
- MSDN Library: Icons in Win32, Icons in XP
- Favicon support chart- Detailed favicon behaviour and functionality by browser, version and platform
- Template:Dmoz
- Smashing Magazine's 50 remarkable Favicons