HTML Favicon

A Favicon is a small image displayed on the left of the page title in the browser tab.

Favicon image from programiz

Here, the small image before the title of the webpage is the favicon.

Add Favicon

We use the HTML <link> tag to attach a favicon to the document. For example,

<link rel="shortcut icon" href="/images/favicon.ico">

Let us look at how this would look on a real site. For example, might have something like this in their code,

    <title>Programiz: Learn to Code for Free!</title>
    <link rel="shortcut icon" href="favicon.png">
Favicon of in the tab

Here the favicon.png is being displayed from the <link> tag in the program site where:

  • rel - defines the type of document linked, i.e. a shortcut icon
  • href - defines the URL for the icon

Note: You can use almost any image for the favicon. However, a simple, easy-to-recognize, small (usually 16px X 16px) image is recommended. Most websites use their logo or a smaller version of the logo as the favicon.

Favicons outside the title bar

Favicons also show up in other places like:

Bookmarks of Browser

Favicon of in a bookmark

On the History Page

Favicon of in user's browsing history

In mobile search results

Favicon of in search results

Supported File Formats

The following formats are supported across all the major browsers.

  • .ico
  • .png
  • .gif
  • .jpg
  • .svg