A favicon is a tiny image that appears next to the page title in the browser tab, as shown in the image below.
Note: The standard size for a favicon is 16x16 pixels, but you can start with 32x32 pixels to accommodate retina screens.
How To Add
You can use any image as your favicon. A common name for a favicon image is "favicon.ico".
To add a favicon to your website, you need to first upload it to the root, or any other directory on your web server.
Then, in your HTML file, after the <title> element, add a <link> element in the <head> section, as shown below
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
</body>
</html> Specify the path to favicon in the href attribute. Save the HTML file and then reload it in your browser. Your browser tab should now show your favicon image to the left of the page title.
Note: For the first time, you may need to clear your browser cache or hard reload it in the browser for the favicon to be displayed properly.
Please check below options for the links to our previous or next tutorial.