Favicon

Lars Jönsson 2021-02-19

Background

In the beginning, favicons where rather easy to create. They were only used by web browsers to view a small icon, based on the current web page. Usage of icons has evolved and are heavily utilized on all devices. Each platform has its own way of using icons. To be able to have a favicon on a web site that can be used on all devices, multiple icons, html tags and files needs to be used. This document describes how support differents devices. More information can be found in:

Overview

Specific favicons for Windows and Android are not really needed. The following is sufficient for modern versions of Windows, Android and iOS:

<link type="image/png" sizes="16x16" rel="icon" href=".../favicon-16x16.png">
<link type="image/png" sizes="32x32" rel="icon" href=".../favicon-32x32.png">
<link type="image/png" sizes="96x96" rel="icon" href=".../favicon-96x96.png">
<link rel="apple-touch-icon" sizes="180x180" href=".../iphone-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href=".../ipad-167x167.png">

An example of the corresponding icons is shown below:

There are a number of web pages that creates everything needed to create favicons, but the tags above is normally all you need. One web page is Favicon Generator. For real. and another is RedKetchup, which also have support for editing icons.

Web browsers

These icons are used by the web browser. The smaller ones are used for presenting the web page on tabs, favorite bar, etc. The largest are used when creating shortcuts. At least in Windows and Android.

<link type="image/png" sizes="16x16" rel="icon" href=".../favicon-16x16.png">
<link type="image/png" sizes="32x32" rel="icon" href=".../favicon-32x32.png">
<link type="image/png" sizes="96x96" rel="icon" href=".../favicon-96x96.png">

Windows

Windows has some specific html meta tags called msapplication. They were introduced some time ago and were mainly used by Internet Explorer (IE). Microsoft has abandoned IE and today Windows makes use of png based icons for web page shortcuts. A 96x96px icon is sufficient.

Windows shortcuts

Shortcuts for web pages with can be put on the desktop directly from the web browser. If the URL is a file path, you need to create the shortcut directly in Windows. Some parts have to be set manually to get the same functionality as "real" URLs:

Update the name of the shortcut, if applicable
In the properties of the shortcut:
- Select an icon of your choice
- To enable the possibility to pin the shortcut to start meny and taskbar, add explorer, including a trailing space, in front of the current target entry

More information is available at Windows 10: How To Pin Shortcut To Taskbar When There’s No “Pin To Taskbar” Option.

Android

Similar to Windows, Android will also work just fine with a 96x96px icon. It will be somewhat modified, when put on the start screen. To have more control of the icons, a manifest file can be specified in the html head section:

<link rel="manifest" href=".../site.webmanifest">

The site.webmanifest specifies how the shortcut will be viewed on the start screen, as shown in this example:

{
    "name": "",
    "short_name": "",
    "icons": [
        {
            "src": ".../android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": ".../android-chrome-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

iOS

Safari in iOS uses its own set of icons. If they are not present, the shortcuts will just be an "empty" icon. iPad and iPhone are optimized for different resolutions.iPad uses 167x167px and iPhone 180x180px. To support both, the following code should specified in the html head section:

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

Mac OS

Not covered in this guide.