A Favicon is a small image displayed on the left of the page title in the browser tab.
![Programiz Favicon Favicon image from programiz](/sites/tutorial2program/files/html-favicon-example.png)
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 example Favicon of programiz.com in the tab](/sites/tutorial2program/files/html-favicon-example-2.png)
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 iconhref
- 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 in Bookmarks Favicon of programiz.com in a bookmark](/sites/tutorial2program/files/html-favicon-bookmarks.png)
On the History Page
![Favicon in Browsing History Favicon of programiz.com in user's browsing history](/sites/tutorial2program/files/html-favicon-history.png)
In mobile search results
![Favicon in Movile search results Favicon of programiz.com in search results](/sites/tutorial2program/files/html-favicon-search-results.png)
Supported File Formats
The following formats are supported across all the major browsers.
- .ico
- .png
- .gif
- .jpg
- .svg