HTML Favicon: How to Add a Favicon to Your Web Pages

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, programiz.com might have something like this in their code,

<head>
    <title>Programiz: Learn to Code for Free!</title>
    <link rel="shortcut icon" href="favicon.png">
</head>

Favicon of programiz.com 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 programiz.com in a bookmark

 

On the History Page

Favicon of programiz.com in user's browsing history

In mobile search results

 

Favicon of programiz.com in search results

 


Supported File Formats

The following formats are supported across all the major browsers.

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

#html 

HTML Favicon: How to Add a Favicon to Your Web Pages
1.00 GEEK