Search code examples
asp.netmanifestfavicon

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


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?


Solution

  • 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.