HTML favicon is a brand logo that is used to represent the website or a blog. It is also known as a tab icon, website icon, URL icon, or a bookmark icon.
You can use any image you like as your favicon.
Favicons typically appear in places such as the browser’s tab, address bar, browser history, bookmarks bar, etc.
A favicon image is displayed to the left of the page title in the browser tab.
A common name for a favicon image is “favicon.ico”.
Use the HTML <link> element to insert a favicon.
How to insert the favicon in HTML file?
Use the following syntax to insert the favicon in the HTML file.
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
Place above code inside the <head> element (replace the image location with the location of the image to be used).
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Favicon Example</title>
<!-- HTML Favicon -->
<link rel="shortcut icon" href="https://eywiah.com/wp-content/uploads/2022/01/fevicon.jpg" type="image/x-icon">
</head>
<body>
<p>HTML Favicon Example - Notice that following logo will be shown in browser title bar.</p>
<img src="https://eywiah.com/wp-content/uploads/2022/01/fevicon.jpg">
</body>
</html>Favicons are a great way to distinguish your site from others — especially when users have many tabs open or they’re searching through their browser history or bookmarks bar.
If you don’t have a favicon for your website, users will usually just see a generic web page icon.
Favicons assist in the visibility of your brand, as users will learn to associate the favicon’s colors, fonts, etc with your brand as they use your website.
Favicons can be 16×16, 32×32, 48×48, or 64×64 pixels in size, and 8-bit, 24-bit, or 32-bit in color depth.