/All what you need to know about favicons
Favicon is an icon for your website. Favicon comes in different dimensions for different devices. Below we describe several kinds of favicons. They satisfy 99% of your needs.
Base favicon
Each HTML page should have 16x16 pixels favicon.ico file at the root of the website. This icon is the standard icon. It has been used since the Internet became popular.
You can create this file from the PNG picture by using the service http://icoconvert.com/.
We recommend to place another one Favicon in addition to the default file. To do this, place this tag in the <head> section:
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
We recommend the size of 48x48 pixels. So you will be sure that your favicon looks fine on the retina screens in the browser window.
Favicon for apple
Apple products require an extended set of icons for their devices. For example, the user can place a quick link to your site on the home screen of his iPhone. In this case, 48x48 size icon will be too small.
We recommend to add 180x180 pixel size favicon for your website. To do this, place this tag in the <head> section:
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">.
Also, upload the image with the name apple-touch-icon-precomposed.png in 48x48 pixels size to the root of the website. This file is used by an apple device by default like favicon.ico. For more details, please, check out this link: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
Manifest.json
Manifest.json is the universal standard of favicons, which is used in a wide range of devices and browsers such as Android devices, Chrome and Mozilla browsers.
Place this tag in the <head> section:
<link rel="manifest" href="/manifest.json">
Then you need to upload the manifest.json file to the root of your website with the following content:
{
"Icons": [
{
"src": "/iconImage48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "images/touch/homescreen144.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "images/touch/homescreen144.png",
"sizes": "192x192",
"type": "image/png"
},{
"src": "/iconImage512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
We recommend you to upload at least 4 images with the following sizes: 48x48, 96x96, 192x192 and 512x512 pixels. In this way you will always be sure that the icon of your website will be beautiful in any program. To get more information about this file refer the link: https://developer.mozilla.org/en-US/docs/Web/Manifest
Browserconfg.xml
Also, Microsoft has its own file format to describe the site. You need to add the following tag to the website header:
<meta name="msapplication-confg" content="/browserconfg.xml" />
This tag indicates that the required file is located in /browserconfg.xml.
This is the minimal contents of browserconfg.xml:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/mstile-70x70.png"/>
<square150x150logo src="/mstile-150x150.png"/>
<square310x310logo src="/mstile-310x310.png"/>
<wide310x150logo src="/mstile-310x150.png"/>
</tile>
</msapplication>
</browserconfig>
We recommend that you to prepare favicons with 70x70, 150x150, 310x310 and 310x150 resolution to show them in Microsoft devices and in Windows start panel. To get more information about this file refer the link: https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/dn455106(v=vs.85)
The attention to details is the way to the development of value added. Favicon is very important detail. Spend the time to it and you your website will look more expensive for more users.