A Favicon is a small image displayed on the left of the page title in the browser tab.
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, codemy.com might have something like this in their code,
<head>
<title>codemy: Learn to Code for Free!</title>
<link rel="shortcut icon" href="favicon.png">
</head>
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
On the History Page
In mobile search results
Supported File Formats
The following formats are supported across all the major browsers.
- .ico
- .png
- .gif
- .jpg
- .svg