Geek Answers Handbook

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

We use the manifest.json file as shown 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 is located at: /content/favicons/manifest.json . Therefore, we referred to this as follows: <link rel="manifest" href="/content/favicons/manifest.json">

I have researched manifest.json files a lot, and all the content on the Internet explains how to handle it when all your files are in the root folder, which we don’t want. We have to keep it clean, so we introduced a new folder for all favicon-related things.

The question is whether this is allowed, and if the src path (for example, "src": "/content/favicons/android-chrome-48x48.png" ) should be relative or absolute. So what should be in the src path in this setting?

+5
source share
1 answer

TL DR Relative and absolute paths work as

Suppose you have the following files:

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

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

  • /content/favicon/android-chrome-192x192.png (i.e. the absolute path). This is something you can check with favicon RFG compatibility check (full disclosure: I am the author of this site).
  • android-chrome-192x192.png (i.e. relative path). I just tested this with Android Chrome 51. However, this option should be checked again, since more browsers support the manifest of the web application.
+3
source

More articles:


All Articles