Favicon

itskarelleh's avatar
itskarelleh's avatar
itskarelleh
Published Jan 30, 2023Updated Sep 15, 2023
Contribute to Docs

A favicon (short for “favorite icon”) is an icon that is displayed in the browser’s address bar and tab title for a website. It is used to help users quickly identify the website and distinguish it from other tabs or bookmarks.

Codecademy's favicon

Syntax

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

Favicons originate as small images (usually 16 x 16 pixels) that are added to a <link> element, which is included in the <head> of the HTML document.

The following attributes are used in the <link> element for favicons:

  • The rel attribute tells the browser that the linked resource is a favicon; setting to "shortcut icon" should accommodate most versions of the major browsers.
  • The type attribute specifies the format of the linked resource (i.e., "image/x-icon" for favicons).
  • The href attribute specifies the file path of the favicon file.

Note: The most common file format for favicons are files with the .ico extension. However, other image formats may be supported depending on the browser (e.g., .png, .gif, and .jpeg). An .ico file can be created using an image editor or online converter tool.

With the favicon file and the link element in the HTML, the favicon should be displayed in the browser’s tab title for the website.

All contributors

Contribute to Docs

Learn HTML on Codecademy