A favicon is a small image that appears to the left of the webpage title in the browser tab. We can use any image for favicon, the only condition is that the image must be of high quality. In this post we will learn how to add favicon in HTML.


How To Add Favicon in HTML ?


Add Favicon in HTML

To add a favicon in an html document, we use the link tag. While for internet explorer we use meta tag. The favicon works correctly in all types of browsers and devices, so we add favicon of different sizes. These sizes are as follows: 16x16, 32x32, 57x57, 76x76, 96x96, 120x120, 128x128, 152x152, 180x180, 192x192, 196x196, 228x228 etc. 

According to the code shown below, you can easily add  favicon icons to any HTML document:


<!DOCTYPE html>
<html>
<head>
<title>How To Add Favicon in HTML ?</title>

<!-- generics -->
<link rel="icon" href="favicon-32.png" sizes="32x32">
<link rel="icon" href="favicon-57.png" sizes="57x57">
<link rel="icon" href="favicon-76.png" sizes="76x76">
<link rel="icon" href="favicon-96.png" sizes="96x96">
<link rel="icon" href="favicon-128.png" sizes="128x128">
<link rel="icon" href="favicon-192.png" sizes="192x192">
<link rel="icon" href="favicon-228.png" sizes="228x228">

<!-- Android -->
<link rel="shortcut icon" href=“favicon-196.png" sizes="196x196">

<!-- iOS -->
<link rel="apple-touch-icon" href="favicon-120.png" sizes="120x120">
<link rel="apple-touch-icon" href="favicon-152.png" sizes="152x152">
<link rel="apple-touch-icon" href="favicon-180.png" sizes="180x180">

<!-- Windows 8 IE 10-->
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="favicon-144.png">

<!— Windows 8.1 + IE11 and above —>
<meta name="msapplication-config" content="/path/to/browserconfig.xml" />

</head>
<body>
<p>This is an example paragraph.</p>
</body>
</html> code-box

Summary

In this post we learn how to add favicon in HTML. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post