/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

This is a base Favicon. Its size is 16 to 16 pixels.

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.

In the Safari on the home screen you will see links with favorites and frequently visited sites. To look nice on this screen the favicon should be 180x180 pixels size.

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

"If the user adds a link to your website on the desktop of his mobile device, you need a larger favicon.

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.

Read also:

Deep mobile optimization.

Server configuration to speed up the site.

Try:

Page Checker

Powerfull tool to improve web page. Use to debug pages.