Components menu
Fav icon
A favicon is a small 16×16 pixel icon that serves as branding for your website. Its main purpose is to help visitors locate your page easier when they have multiple tabs open.
Due to their tiny size, favicons work best as simple images or one-to-three characters of text. Favicons are not to be confused with logos but are sometimes the same. Due to its small size and resolution, the favicon may need to be an even smaller sizer or part of a company’s original logo.
Where can you see the favicon?
Favicons are found next to anything that identifies your website. This includes bookmarks, tabs, toolbar apps, history results, and search bars.
Why are favicons important?
Creating a favicon is a small but important step to setting up a business website. It adds legitimacy to your site and helps boost your online branding as well as trust from potential consumers.
They are an immediate visual marker for the website which enables easy and quick identification for web users as well as unifies all of the various browser components into a well-branded browsing experience.
HTML
<head>
<!-- FavIcon -->
<link rel="icon" type="image/png" sizes="192x192" href="images/favicon/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="images/favicon/android-chrome-512x512.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
<link rel="manifest" href="images/favicon/site.webmanifest">
</head>