Images must be square :)
HTML
Place the Following in the <head></head> of your HTML
<!-- generics -->
<link rel="icon" href="/path/to/favicon-32.png" sizes="32x32">
<link rel="icon" href="/path/to/favicon-57.png" sizes="57x57">
<link rel="icon" href="/path/to/favicon-76.png" sizes="76x76">
<link rel="icon" href="/path/to/favicon-96.png" sizes="96x96">
<link rel="icon" href="/path/to/favicon-128.png" sizes="128x128">
<link rel="icon" href="/path/to/favicon-192.png" sizes="192x192">
<link rel="icon" href="/path/to/favicon-228.png" sizes="228x228">
<!-- Android -->
<link rel="shortcut icon" sizes="196x196" href=“/path/to/favicon-196.png">
<!-- iOS -->
<link rel="apple-touch-icon" href="/path/to/favicon-120.png" sizes="120x120">
<link rel="apple-touch-icon" href="path/to/favicon-152.png" sizes="152x152">
<link rel="apple-touch-icon" href="path/to/favicon-180.png" sizes="180x180">
<!-- Windows 8 IE 10-->
<meta name="msapplication-TileColor" content="#">
<meta name="msapplication-TileImage" content="/path/to/favicon-144.png">
<!— Windows 8.1 + IE11 and above —>
<meta name="msapplication-config" content="/path/to/browserconfig.xml" />
browserconfig.xml
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src=“favicon-76.png”/>
<square150x150logo src="favicon-228.png"/>
<TileColor>#2b5797</TileColor>
</tile>
</msapplication>
</browserconfig> Favicons
Windows tile preview
 |
| Favicon HTML |
Favicons, a small but significant part of a website or app, are more important than ever before. They help establish brand identity, improve user experience, and increase recognition. With the rise of mobile devices and responsive design, favicons have become an essential component of any website. Therefore, it is crucial to include a favicon in your website’s HTML code to ensure your website looks complete and polished.
Favicon HTML
That's why it's no surprise that even something as seemingly insignificant as a favicon can make a big difference in the user's experience. A favicon, also known as a shortcut icon, tab icon, or website icon, is a small icon that represents a website or web page. When it's added to your HTML code, users can see it in their browser's tab when they have your page open, adding to the overall aesthetic appeal.
