Favicon
|
|
Favicon-in-firefox102.png
A favicon (short for "Favorites icon"), also known as a page icon, is an icon associated with a particular website or webpage. A web designer can create such an icon, and many graphical web browsers—such as recent versions of Internet Explorer, Firefox, Mozilla, Opera, Safari, and Konqueror—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 using the link element like: <link rel="shortcut icon" href="favicon.ico"> in the <head> section of the document. In this way, any appropriately sized (16×16 pixels or larger) image can be used, and although many still use the .ico format, others use GIF or PNG files.
Favicon_iedisplay.png
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. Another common problem is that the favicons may disappear if the browser's cache is emptied.
Originally IE only used favicon's for bookmarks, 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 modern browsers now use the favicon in the URL bar, that concern is no longer relevant.
| Contents |
Requirements
For optimal browser support, the following rules should be obeyed:
- Include both element types:
<link rel="shortcut icon" href="http://mysite.com/favicon.ico"><link rel="icon" href="http://mysite.com/favicon.ico"> - The
LINKelements must be inside theHEADelement (between<head>and</head>) in the HTML. - A file called favicon.ico and located in the document root directory will also be found by some browsers which do not process the
LINKelements. - The .ico file format will be read correctly by the most browsers.
- Configure the webserver to send the correct MIME identifier for .ico files.
- Include multiple resolutions (most commonly used being 16x16 and 32x32, with 64x64 and 128x128 sometimes used on Apple Macs) and bit-depths (most common being 4, 8, 24 bpp - i.e. 16, 256 and 16 million colours) in the file.
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 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 Mozilla web browser added support for favicons, including a version that conformed to web standards: The use of rel="icon" and optional mime-type (e.g., image/png) let web designers add favicons in any supported graphics format while conforming to W3C standards. e.g. <link rel="icon" type="image/png" href="/path/image.png"> Most web browsers have since added support for this feature.
Related concepts
- Favatars are the application of favicons as weblog avatars.
- Gravatars (Globally Recognized Avatars) are centralized square images representing commenters in weblogs.
- NotesBuddy is an experimental Lotus Notes application putting sender faces in email, among many other things
- Picons (Personal Icons) are icons representing email addresses and server names.
- Vismon was the Bell Labs system which put faces in email and inspired Picons
- X-Face is a standard mail header for sending 48 by 48 pixel images of senders
External links
- Favicon validator (http://www.html-kit.com/favicon/validator/) - (doesn't check all requirements)
- Big online favicon maker and favicon editor (http://favicon.ru/en/) - Make favicons and desktop icons from any types of images and edit them in semi-professional online editor
- FavIcon from Pics (http://www.chami.com/html-kit/services/favicon/) - Freeware picture to favicon converter.
- Favorites Icon tutorial (http://www.yourhtmlsource.com/promotion/favicon.html)
- Favicon Gallery (http://MpPierce66.home.comcast.net/web/fi/)
- Favicon search engine (http://peerbot.com)
- IconSurf Favicon search engine (http://iconsurf.com)
- Controlling Favicon 404 errors in your web logs (http://laffey.tv/favicon_error_logs.html)
- IANA MIME Media Type registration: image/vnd.microsoft.icon (http://www.iana.org/assignments/media-types/image/vnd.microsoft.icon)
- How Favicons Work (http://superiorwebmaster.com/articles/article.php?id=045)
- Favicon tutorial (http://www.photoshopsupport.com/tutorials/jennifer/favicon.html) - Create a favicon using Adobe Photoshop.de:Favicon