Menu
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?
519
Using manifest. json , you specify basic metadata about your extension such as the name and version, and can also specify aspects of your extension's functionality (such as background scripts, content scripts, and browser actions).
First check if manifest. json is applied in the browser. For that open developer window by pressing shortcut F12. In Application tab, click Manifest option and see if it displays information that you have set.
A relative path refers to a location that is relative to a current directory. Relative paths make use of two special symbols, a dot (.) and a double-dot (..), which translate into the current directory and the parent directory. Double dots are used for moving up in the hierarchy.
The start_url member is a string that represents the start URL of the web application — the preferred URL that should be loaded when the user launches the web application (e.g., when the user taps on the web application's icon from a device's application menu or homescreen).
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.
59
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
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
