A favicon is a small icon that identifies a website in a web browser. Most browsers display a website's favicon in the left side of the address bar, next to the URL. Some browsers may also display the favicon in the browser tab, next to the page title. Favicons are automatically saved along with bookmarks or "favorites" as well.
Favicons have been around since the early 2000s and are supported by all major web browsers. However, different browsers provide different implementations of the favicon. For example, Firefox, Internet Explorer, and Safari all display favicons in the address bar, but Google Chrome only displays them in the page tabs. Most browsers support favicons saved as .GIF, .PNG, or .JPG files, but Internet Explorer only displays favicons saved in the .ICO format.
The standard way to implement a favicon on a website is to upload a small 16x16 pixel image named favicon.ico to the root directory of the website. When a user loads a page from the website in a web browser, the browser looks for the favicon.ico file, and if it finds one saved in a supported format, it automatically displays the icon next to the URL or the page title. The favicon can also be specified in the HTML of a webpage as follows:
<link rel="shortcut icon" href="http://www.domain.com/myicon.ico">
The HTML method typically overrides the favicon saved in the root directory, which can be useful if you want to display a custom favicon for certain pages within a website.
NOTE: The standard size of a favicon is 16x16 pixels, though most browsers will recognize favicons saved as 32x32, 48x48, and 64x64 pixel images as well. Favicons larger than 16x16 pixels are typically scaled down to 16x16 so that they display in the browser correctly. However, browsers that support retina displays will display 32x32 pixel icons in their native resolution.
Updated: September 5, 2013