Favicon

Edit on GitHub

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.

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.

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.
Edit on GitHub

Learn HTML on Codecademy

Career path

Front-End Engineer

Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
Includes 34 Courses
With Professional Certification
Beginner Friendly
131 Lessons
Free course

Learn HTML

Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.
Beginner Friendly
6 Lessons
Edit on GitHub

Contributors