Everything you need to know about Favicons /Alarm website

Everything you need to know about Favicons

Updated Mar 26, 2023

A favicon is an icon for your website. It usually contains a logo. Various devices and programs require images of a certain size. Below we will describe all the popular Favicon formats. They will cover 99% of use cases.

Content

Basic Favicon

Favicon for Apple devices

Android devices and other programs

Microsoft Products

Basic Favicon

This is the base Favicon. Its size is 16x16 pixels.

Each site must contain a 16x16 pixel favicon file. It should be available at /favicon.ico. That is, to be in the root section of the site. This file was used by the first browsers and still has not lost its relevance.

You can make such an image from a PNG image using the service [http://icoconvert.com /](http://icoconvert.com / “Online favicon generator”).

Since modern devices have a high resolution, you need to place an additional Favicon file with a size of 48x48 pixels. Mark up the next tag in the <head> section and specify the correct path to the image in the href attribute.

<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />

SVG favicon will look good on any device.

<link rel="icon" type="image/svg+xml" sizes="any" href="favicon.svg" >

We recommend a size of 48x48 pixels. So you will be sure that the Favicon looks good on large monitors.

Favicon for Apple devices

Apple products require an extended set of Favicon images. For example, a user can place a quick link to your website on the Home Screen of their device. In this case, the 48x48 image will be too small.

On the Safari browser home page you can see links to popular and favorite sites. To look good on it, you need to have a 180x180 pixel Favicon.

Depending on the device and location, different favicon images may be used. But it is enough to upload only a 180x180 pixel image. Smaller images will be created from this file. Place the following tag in the <head> section and specify the correct path to the file in the href attribute.

<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png" />

Also upload an icon called /apple-touch-icon-precomposed.png with a size of 48x48 pixels to the root of the site. This file is downloaded by Apple programs by default. You can find more information on https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html.

Android devices and other programs

If a user adds a link to your site to the desktop of his mobile device, it is better to prepare an image of a suitable size for him.

The Manifest file.json is a universal standard for specifying favicon images. In addition to Android devices and various programs, it is used by Chrome and Mozilla browsers.

Place the following tag in the section:

<link rel="manifest" href="/manifest.json" />

Then upload the manifest file to the root of the site.json 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 that you specify at least 4 images with the following dimensions: 48x48, 96x96, 192x192 and 512x512 pixels. In this case, you can be sure that your site will look good in all programs. More details about manifest.you can read the json here https://developer.mozilla.org/en-US/docs/Web/Manifest .

Microsoft Products

The data for specifying the Favicon of images for Microsoft products is specified in the file browserconfg.xml . To report its presence, add the following code to the <head> section:

<meta name="msapplication-config" content="/browserconfg.xml" />

Then in the root of the site, upload the file /browserconfg.xml with the following content:

<?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 specify at least 4 images with the following dimensions: 70x70, 150x150, 310x310 and 310x150 pixels. Link to official documentation [https://msdn.microsoft.com/library/dn320426(v=vs.85).aspx](https://msdn.microsoft.com/library/dn320426(v=vs.85). aspx “Documentation about favicons for Microsoft devices”)

The favicon image is a very important detail. Take the time to make your site look attractive in all programs and devices.