HTML Favicon

A favicon is a small image displayed next to the page title in the browser tab. A favicon is a small file containing the one or more icons which are used to represent the website or a blog. It is also known as a tab icon, website icon, URL icon, or a bookmark icon. This icon is actually displayed on the address bar, browser’s tab, browser history, bookmark bar, etc. The image of a favicon is in .ico file format. There are various file formats, but .ico format is supported by all the browsers.

How to Create a Favicon

Following are the steps for creating the favicon:

  1. Click on the following URL, to create the favicon:
  2. Once the favicon is successfully created, we can download the favicon by clicking on the download favicon option.
  3. 3After the downloading, a favicon with the name favicon.ico is available in the file system drive.

How To Add a Favicon in HTML

You can use any image you like as your favicon. You can also create your own favicon on sites like

Tip: A favicon is a small image, so it should be a simple image with high contrast.

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

To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is “favicon.ico”.

Next, add a <link> element to your “index.html” file, after the <title> element, like this:


<!DOCTYPE html>
  <title>My Page Title</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>


Favicon File Format Support

The following table shows the file format support for a favicon image:


HTML Favicon
Show Buttons
Hide Buttons