---
title: The new web application manifest
description: Thanks to the manifest.json file, the gap in terms of functionality with the native platform is narrowed.
url: https://www.felixsanz.dev/articles/the-new-web-application-manifest
language: en
published: 2015-04-09
updated: 2016-07-02
tags:
  - development
alternate-es: https://www.felixsanz.dev/es/articulos/el-nuevo-manifiesto-de-aplicaciones-web
---

# The new web application manifest

## Introduction

The [manifest for web applications](https://w3c.github.io/manifest) is a **W3C standard** to define, via a JSON file (usually `manifest.json`), how our web site behaves when acting as a **web application**.

Until now our option was to rely on the `<title>` tag for the application title and a bunch of `<link>` and `<meta>` (`apple-touch-icon`, `icon`, `msapplication`, etc.) tags to manage icons at different resolutions. When a user added our website to the home screen of their mobile phone, it appeared using this title and icons depending on the platform the user had. This technique was not very developer friendly and **did not offer flexibility** or ease of maintenance of these guidelines.

The W3C got to work and now we can make use of the manifest for web applications.

## Creating the manifest

To create our manifest we will use a `.json` file, which can be called whatever we want (usually `manifest.json`). More or less a basic example would be the following:

```json
{
  "short_name": "felixsanz",
  "name": "Félix Sanz | Blog",
  "icons": [
    {
      "src": "launcher-icon-2x.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "orientation": "landscape"
}
```

These properties come to say the following:

`short_name`

This is the short name of the application and will be used by default.

`name`

The long version of the name.

`icons`

Specifies a list of images to be used depending on the device.

`start_url`

Specifies the address to load when opening the web application.

`display`

The display mode that our application will get when opened. It can be `fullscreen`, `standalone`, `minimal-ui` or `browser`. This also allows us to make use of `display-mode` in our `@media` to apply CSS styles depending on the display.

`orientation`

The orientation that our application acquires when opened. It can be `portrait` or `landscape`.

You can check the rest of the properties in the [official standard](https://w3c.github.io/manifest/).

## Using the manifest

To use the manifest just include a reference in the header of our HTML code:

```html
<link rel="manifest" href="/manifest.json" copy="true">
```

And that's it, by making use of functions such as "[Add to home screen](https://developer.chrome.com/multidevice/android/installtohomescreen)" of the Chrome browser for Android, users will use our website as if it were a native application.