Is it allowed to use relative path for manifest.json and place it outside of the root?

Question

We are using a manifest.json file like the one below:

 {
  "name": "Our app",
  "description": "Our app description",
  "short_name": "our-app",
  "icons": [
    {
      "src": "/content/favicons/android-chrome-36x36.png",
      "sizes": "36x36",
      "type": "image/png",
      "density": 0.75
    },
    {
      "src": "/content/favicons/android-chrome-48x48.png",
      "sizes": "48x48",
      "type": "image/png",
      "density": 1
    },
    {
      "src": "/content/favicons/android-chrome-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "density": 1.5
    },
    {
      "src": "/content/favicons/android-chrome-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "density": 2
    },
    {
      "src": "/content/favicons/android-chrome-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "density": 3
    },
    {
      "src": "/content/favicons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "density": 4
    }
  ]
}

Together with the icons it's located in: /content/favicons/manifest.json. So we referenced it like this: <link rel="manifest" href="/content/favicons/manifest.json">

I did a lot of research on manifest.json files and all the content on the web only explains how to handle it when all your files are in the root folder, which is something we don't want. We need to keep it clean, so we introduced a new folder for all favicon related things.

The question is if this is allowed and if the src path (e.g. "src": "/content/favicons/android-chrome-48x48.png") needs to be relative or absolute. So what should the src path be in this setup?

Answer 1

TL; DR Relative and absolute paths both work

Suppose you have the following files:

• /content/favicon/android-chrome-192x192.png
• /content/favicon/manifest.json, which references android-chrome-192x192.png
• /index.html, which references manifest.json with <link rel="manifest" href="/content/favicon/manifest.json">

Then the corresponding src attribute of manifest.json can be set to:

• /content/favicon/android-chrome-192x192.png (ie. absolute path). This is what you can test with the favicon compatibility test of RFG (full disclosure: I'm the author of this site).
• android-chrome-192x192.png (ie. relative path). I've just tested this with Android Chrome 51. However, this option should be checked again as more browsers support the web app manifest.

Answer 2

Just to add some specific info., MDN says about the src attribute:

If src is a relative URL, the base URL will be the URL of the manifest.

C.f. https://developer.mozilla.org/en-US/docs/Web/Manifest/icons