Issues with relative icon-paths

Hi! First, thanks for this truly awesome plugin! It simplifies a lot 😃

The problem

If a webapp is deployed in a relative, unknown directory a few problems pop up with the url of each icon in the manifest.json file. Let’s consider the following dir-structure, ? being an unknown parent-url.

/?/index.html
/?/assets/manifest.json
/?/assets/icon.ico

The manifest contains, considering publicPath: '.' and prefix: './assets', now url such as

"src": "assets/android-chrome-36x36.png"

Since assets/ is a relative url the location of the maifest is used:

The path to the image file. If src is a relative URL, the base URL will be the URL of the manifest.

That means the url to each icon is not longer valid (resolved url):

assets/assets/android-chrome-36x36.png

The first assets is the location of the manifest.json whereby the second assets was used to define a sub-directory in the build-directory.

A solution is to set prefix to ./, but this causes all assets to be moved into the root-folder. The urls in the HTML-Header itself are always valid as the current index.html url is used as reference.

Used packages

I’m using

• webpack v4.42.0
• favicons-webpack-plugin v3.0.1
• html-webpack-plugin v4.0.0-beta.14

Steps to reproduce

It might be related to #162

Relevant FaviconsWebpackPlugin config, I’m referring to webpack in production mode:

    publicPath: '.',
    prefix: './assets',
    favicons: {start_url: './?homescreen=1'}

Build the dist-files, serve the parent-folder and manually navigate into the dist-folder. In my case these are the related requests and the last one which fails:

OK: http://localhost:5000/dist/index.html (Entry)
OK: http://localhost:5000/dist/assets/favicon.ico
OK: http://localhost:5000/dist/assets/manifest.json (The location of manifest.json is /assets!)
ERR: http://localhost:5000/dist/assets/assets/android-chrome-144x144.png (404)

A possible fix would be to remove the prefix from each icon in the manifest entirely as long as they’re in the same location as manifest.json and publicPath is relative. index.html requires the assets/ -> index.html used as reference manifest.json not as icons are in the same location and the manifest itself is used as reference.

[e-melnichenko]

I used manifestRelativePaths: true in my case.

new FaviconsWebpackPlugin({
   logo: './src/img/favicon-512x512.png',
   publicPath: '',
   favicons: {
    manifestRelativePaths: true,
   }
 })

[Simonwep]

@e-melnichenko Nice. Wasted like 20h trying to fix that.