About favicons and Progressive Web Apps

Have you ever wondered how many favicons you need for your website and what each one is for? I’m pretty sure your answer is yes, so today we are going to learn about them.

Favicons have a lot to do with Progressive Web Apps, so please stay tuned.

How many favicons does my website need?

It depends in what devices you want to support. But we could say between 3 and 24.

WAIT?!?!?! 24??? HOW???

Relax, I know, that’s a lot for favicons, just let me explain it to you. At the time this article is being written, there is four major “categories”.

Apple: 10 favicons
Google & Chrome: 5 favicons
Internet Explorer: 1 favicon
Windows 8.1: 4 favicons

There is 5 missing favicons there, the classic favicon.ico, an optional favicon.svg and the remaining three are just an old web standard. Wait, did I just say 5? That is 25! Yep, thats because one of the Google & Chrome and Windows 8.1 favicons are the same size, so we can at least re-use them.

The favicons sizes

Previously we talked about the four favicons categories, now we are going to see all the sizes and what each one is for.

Standard:
- 16x16: All standard browsers
- 32x32: All standard browsers
- 64x64: Future use for most standard browsers
Apple:
- 57x57: iPod touch & iPhone up to 3G
- 60x60: iPhone touch up to iOS7
- 72x72: iPad touch up to iOS6
- 76x76: iPad touch with iOS7+
- 114x114: iPhone retina touch up to iOS6
- 120x120: Phone retina touch with iOS7+
- 144x144: iPad retina up to iOS6
- 152x152: iPad retina touch with iOS7+
- 167x167: iPad retina (newer models)
- 180x180: iPhone retina (newer models)
Google & Chrome:
- 96x96: GoogleTV
- 128x128: Chrome Web Store
- 196x196: Android Chrome
- 256x256: Desktop Chrome
- 384x384: Desktop+ Chrome
Internet Explorer:
- 24x24: Pinned site

Windows 8.1:

128x128: Small size Metro Tile
270x270: Medium size Metro Tile
558x558: Metro Tile
558x270: Wide Metro Tile

We also need a configuration file called browserconfig.xml located in the root of our project. It looks like this:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="favicon-128x128.png" />
            <square150x150logo src="favicon-270x270.png" />
            <wide310x150logo src="favicon-558x270.png" />
            <square310x310logo src="favicon-558x558.png" />
            <TileColor>#ffffff</TileColor>
        </tile>
    </msapplication>
</browserconfig>

You can put whatever hex color you want inside the TileColor property, it represents the Windows 8.1 Metro Tile background color.

Adding the favicons to your website

In your website’s HTML file head you will need to insert these link tags:

<!-- ... All your Apple favicons in ascending order of size -->
<link rel="apple-touch-icon" href="favicon-57x57.png" sizes="57x57" type="image/png">

<!-- ... All your favicons in ascending order of size -->
<link rel="icon" href="favicon-16x16.png" sizes="16x16" type="image/png" />

<!-- Your svg favicon in case you have one -->
<link rel="icon" href="favicon.svg" sizes="any" type="image/svg+xml" />

<!-- Your favicon.ico in case you have one -->
<link rel="icon" href="favicon.ico" sizes="16x16 32x32 64x64" type="image/x-icon" />

You must respect the order shown, that’s how browsers load the favicons in best use cases.

How to setup Progressive Web Apps

I’m really sorry, but you will need only 2 more favicons: 192x192 and 512x512.

Jokes aside, setting up a PWA can sound hard, but in this section I will prove that wrong.

First we need to create a file called manifest.webmanifest or manifest.json, both are valid. Next we have to consider the properties of this file, whose are:

name: used when the app is installed.
short_name: used on the user’s home screen, launcher, or other places where space is limited.
description: used to describe the purpose of your app, with a maximum of 300 characters.
theme_color: used to set the color of the tool bar, can be reflected in the app’s preview in task switchers.
background_color: used on the splash screen when the application launches on mobile for the first time.
display: used to select which browser UI is shown when the app is launched.
- fullscreen: opens the web app without any browser UI and takes up all of the available display area.
- standalone: opens the web app to look and feel like a standalone app. The app runs in its own window, separate from the browser, and hides standard browser UI elements such as the address bar.
- minimal-ui: This mode is similar to standalone, but provides the user with a minimal set of UI elements for controlling navigation, such the as back and reload buttons.
- browser: a standard browser experience.
icons: used to define a set of icons for the browser to use on the home screen, app launcher, task switcher, splash screen, and other places.

These properties are just for a minimal configuration, you can read more about this topic in web.dev’s article.

Hence our file would look something like this:

{
    "name": "Lorem ipsum: dolor sit amet",
    "short_name": "Lorem ipsum",
    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone",
    "icons": [
        // ... Your other favicons
        { "src": "favicon-192x192.png", "type": "image/png", "sizes": "192x192"},
        { "src": "favicon-512x512.png", "type": "image/png", "sizes": "512x512"}
    ]
}

A small recommendation

A while back, I had to deal with resizing my logo in over 20 sizes and manually creating the PWA manifest. It was a real hassle. So, I made a handy tool called favgen-cli that takes care of all that for you.

You can try it now using your preferred package manager such as npm, pnpm and bun. Just run npx favgen-cli | pnpm dlx favgen-cli | bunx favgen-cli.

Let me know if you found this article interesting, I’ll be waiting for your messages, take care.

About favicons and Progressive Web Apps

How many favicons does my website need?

The favicons sizes

Standard:

Apple:

Google & Chrome:

Internet Explorer:

Windows 8.1:

Adding the favicons to your website

How to setup Progressive Web Apps

A small recommendation