Favicon

Missing image
Favicon-in-firefox102.png
In Mozilla Firefox, favicons are displayed in all available tabs, the bookmark toolbar/menu and the location bar.

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.

Missing image
Favicon_iedisplay.png
In Internet Explorer 6, favicons are displayed in the Favorites menu and the address bar.

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 LINK elements must be inside the HEAD element (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 LINK elements.
  • 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 rel 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 ".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

fr:Favicon nl:Favicon

Navigation

  • Art and Cultures
    • Art (https://academickids.com/encyclopedia/index.php/Art)
    • Architecture (https://academickids.com/encyclopedia/index.php/Architecture)
    • Cultures (https://www.academickids.com/encyclopedia/index.php/Cultures)
    • Music (https://www.academickids.com/encyclopedia/index.php/Music)
    • Musical Instruments (http://academickids.com/encyclopedia/index.php/List_of_musical_instruments)
  • Biographies (http://www.academickids.com/encyclopedia/index.php/Biographies)
  • Clipart (http://www.academickids.com/encyclopedia/index.php/Clipart)
  • Geography (http://www.academickids.com/encyclopedia/index.php/Geography)
    • Countries of the World (http://www.academickids.com/encyclopedia/index.php/Countries)
    • Maps (http://www.academickids.com/encyclopedia/index.php/Maps)
    • Flags (http://www.academickids.com/encyclopedia/index.php/Flags)
    • Continents (http://www.academickids.com/encyclopedia/index.php/Continents)
  • History (http://www.academickids.com/encyclopedia/index.php/History)
    • Ancient Civilizations (http://www.academickids.com/encyclopedia/index.php/Ancient_Civilizations)
    • Industrial Revolution (http://www.academickids.com/encyclopedia/index.php/Industrial_Revolution)
    • Middle Ages (http://www.academickids.com/encyclopedia/index.php/Middle_Ages)
    • Prehistory (http://www.academickids.com/encyclopedia/index.php/Prehistory)
    • Renaissance (http://www.academickids.com/encyclopedia/index.php/Renaissance)
    • Timelines (http://www.academickids.com/encyclopedia/index.php/Timelines)
    • United States (http://www.academickids.com/encyclopedia/index.php/United_States)
    • Wars (http://www.academickids.com/encyclopedia/index.php/Wars)
    • World History (http://www.academickids.com/encyclopedia/index.php/History_of_the_world)
  • Human Body (http://www.academickids.com/encyclopedia/index.php/Human_Body)
  • Mathematics (http://www.academickids.com/encyclopedia/index.php/Mathematics)
  • Reference (http://www.academickids.com/encyclopedia/index.php/Reference)
  • Science (http://www.academickids.com/encyclopedia/index.php/Science)
    • Animals (http://www.academickids.com/encyclopedia/index.php/Animals)
    • Aviation (http://www.academickids.com/encyclopedia/index.php/Aviation)
    • Dinosaurs (http://www.academickids.com/encyclopedia/index.php/Dinosaurs)
    • Earth (http://www.academickids.com/encyclopedia/index.php/Earth)
    • Inventions (http://www.academickids.com/encyclopedia/index.php/Inventions)
    • Physical Science (http://www.academickids.com/encyclopedia/index.php/Physical_Science)
    • Plants (http://www.academickids.com/encyclopedia/index.php/Plants)
    • Scientists (http://www.academickids.com/encyclopedia/index.php/Scientists)
  • Social Studies (http://www.academickids.com/encyclopedia/index.php/Social_Studies)
    • Anthropology (http://www.academickids.com/encyclopedia/index.php/Anthropology)
    • Economics (http://www.academickids.com/encyclopedia/index.php/Economics)
    • Government (http://www.academickids.com/encyclopedia/index.php/Government)
    • Religion (http://www.academickids.com/encyclopedia/index.php/Religion)
    • Holidays (http://www.academickids.com/encyclopedia/index.php/Holidays)
  • Space and Astronomy
    • Solar System (http://www.academickids.com/encyclopedia/index.php/Solar_System)
    • Planets (http://www.academickids.com/encyclopedia/index.php/Planets)
  • Sports (http://www.academickids.com/encyclopedia/index.php/Sports)
  • Timelines (http://www.academickids.com/encyclopedia/index.php/Timelines)
  • Weather (http://www.academickids.com/encyclopedia/index.php/Weather)
  • US States (http://www.academickids.com/encyclopedia/index.php/US_States)

Information

  • Home Page (http://academickids.com/encyclopedia/index.php)
  • Contact Us (http://www.academickids.com/encyclopedia/index.php/Contactus)

  • Clip Art (http://classroomclipart.com)
Toolbox
Personal tools