Favicon

In many web browsers, favicons are displayed in the tabs, in the address bar next to the URL, or in the list of favorites .

A favicon is a small, 16 × 16 or 32 × 32 pixels measuring icon , symbol or logo of web browsers to use a site marked on recognizable way. It appears among others in the list of bookmarks (favorites), on all tabs (tabs) and Windows when saving a page. The introduction goes back to the computer company Microsoft , whose Internet Explorer 5 was the first time favicons in 1999.

The term is a portmanteau or suitcase word from English. It consists of the components favorite and icon , which can be roughly translated as a favorite symbol.

Integration into an HTML page

Today there are two ways to include a favicon in a page:

Filing under the fixed name "favicon.ico" in the base directory of the domain , such as for https://de.wikipedia.org/favicon.ico. Files with the name favicon.ico in other directories are ignored by browsers. No formats other than the ico format should be used here. In addition, this is not supported by all browsers and may be. a. expressly not recommended by the W3C.
Referencing via an HTML element that is integrated into the header data ( <head>) of an HTML page. According to the HTML standard, the name for this is icon , but Internet Explorer requires the name shortcut icon. Other formats than .ico can be used here.

<link rel="icon" href="/favicon.ico" type="image/x-icon">

If you use XHTML instead of HTML, you have to put a final slash at the end of the tag , because this is an empty XML element. Only the href=attribute is mandatory; the type=attribute is recommended if formats other than .ico are used. The following codes must be used for the following formats:

For ICO : image/x-iconless commonimage/vnd.microsoft.icon
For GIF :image/gif
For PNG :image/png
For SVG :image/svg+xml

Standard sizes and color depths:

For .ICO: 16 × 16 or 32 × 32 and 16 to 16.7 million colors
For .GIF and .PNG: 16 × 16 and 256 colors

File format

The ico file format is a container for image data. It can record many images in different resolutions, which are stored uncompressed as a bitmap (or from Windows Vista from a resolution of 256 × 256 pixels as PNG ).

Interactive favicons

As a demonstration, the French web developer and designer Mathieu Henri developed a game called "Defender of the favicon", which uses the favicon as a display area. The small remake of the arcade game Defender is written in JavaScript. The code generates every frame of the game in the favicon size (16 × 16 pixels). It is then converted into a PNG.

literature

Oliver Bendel : Pixel by pixel: favicons are conquering the web. In: Manfred Blohm (ed.): Texts on media art (= media - art - pedagogy . Volume 1). Flensburg University Press, Flensburg 2009, ISBN 978-3-939858-09-6 , pp. 9-18.
Steve Caplin: Icon design: professional design of computer icons. (= Design directors ). Stiebner, Munich 2010, ISBN 978-3-8307-1269-5 .
Sven Blankenberger: Effects of icon design on human-computer interaction. Marburg 1987, OCLC 174714544 (diploma thesis University of Marburg 1987).

Web links

Wiktionary: Favicon - explanations of meanings, word origins, synonyms, translations

Favicon in SelfHTML -Wiki

Individual evidence

↑ How to Add a Favicon to your Site. W3C , accessed August 14, 2009 .
↑ Graphics / favicon. selfhtml, accessed August 10, 2017 .
^ Karl Dubost: How to add a favicon to your Web site? Retrieved April 17, 2017 .
↑ Defender favicon game

[1] How to Add a Favicon to your Site. W3C , accessed August 14, 2009 .

[2] Graphics / favicon. selfhtml, accessed August 10, 2017 .

[3] Karl Dubost: How to add a favicon to your Web site? Retrieved April 17, 2017 .

[4] Defender favicon game