By using site services you agree to our Cookies Use. We and our partners operate globally and use cookies, including for analytics, personalisation, and ads.Accept
X

Favicon

Favicon is an icon for your site. Favicon comes in different sizes for different devices. Below is a description of the main favicon, which covers 99% of the cases.

Favicon base

All HTML pages should have a favicon.ico file at the root of the site with a size of 16x16 pixels. This icon is the standard icon and has been used since the time internet became popular.
You can create this file from the PNG picture using the service http://icoconvert.com/
In addition to this file by default, it is recommendable to place one more Favicon. To do this, place this tag in the <head> section:
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
We recommend a size of 48x48 pixels. This will make sure that your favicon will look good on the retina screens on the browser window.

Favicon apple

Apple products require an extended set of icons for their devices. For example, a user can place a quick link to your site on your iPhone's desktop. In this case, the icon 48x48 will be too small.


We recommend adding a 180x180 pixel 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, download the image with the name apple-touch-icon-precomposed.png in size 48x48 pixels to the root of the site. This apple device file is used by default like favicon.ico.
For more details, you can 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">


Next, you need to upload the manifest.json file to the root of your site with the following content:
{
"Icons": [{
"src": "/iconImage48.png",
"sizes": "48x48",
"type": "image/png"
},{
"src": "/iconImage512.png",
"sizes": "512x512",
"type": "image/png"
}]
}

We recommend that you download at least 2 images with the following sizes: 48x48 pixels and 512x512 pixels.
By so doing, you will always be sure that the icon of your site will be beautiful in any program.
To get more information about this file you can check out this 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 site header:
<meta name="msapplication-confg" content="/browserconfg.xml" />
This tag says that the required file is located here /browserconfg.xml.
Here are the minimal contents of browserconfg.xml:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square310x310logo src="/mstile-310x310.png"/>
            <wide310x150logo src="/mstile-310x150.png"/>
        </tile>
    </msapplication>
</browserconfig>

We recommend that you have favicons with a resolution of 310x310 and 310x150 pixels.
To get more information about this file you can check out this link: https://technet.microsoft.com/en-us/windows/dn320426(v=vs.60)