web manifest: Line: 1, column: 1, Syntax error

Question

I have react + webpack app

My manifest.webmanifest

{
  "name": "x",
  "short_name": "x",
  "start_url": "./index.html",
  "display": "fullscreen",
  "background_color": "white",
  "theme_color": "white",
  "icons": [
    {
      "src": "favicon-16x16.png",
      "type": "image/png",
      "sizes": "16x16"
    },
    {
      "src": "favicon-32x32.png",
      "type": "image/png",
      "sizes": "32x32"
    }
  ]
}

Index.html

<link crossorigin="use-credentials" rel="manifest" href="manifest.webmanifest" />

I tried different combination but always get error in Chorome (at localhost):

Line: 1, column: 1, Syntax error;

1. In which folder should manifest.webmanifest be? (src, public, public/img ????) index.html is in src folder

2. What to write in href in index.html? (href="manifest.webmanifest", href="./manifest.webmanifest" ???)

3. What to write in 'start_url' in manifest.webmanifest?

4. Where to store favicon-16x16.png and favicon-32x32.png (src, public ???)

5. What to write in icons src in manifest.webmanifest

"icons": [
    {
      "src": ?????????,
      "type": "image/png",
      "sizes": "16x16"
    },

6. Do I need to write something additional in the settings of Webpack?

Answer 1

I found the answer!))

The problem was that Webpack does not include manifest.webmanifest and icons img in result bundle. We need do it manually, writing the necessary paths in Webpack config:

add const CopyWebpackPlugin = require('copy-webpack-plugin'); at webpack.config.js

...
plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'src/manifest.webmanifest'),
          to: path.resolve(__dirname, 'build'),
        },
        {
          from: path.resolve(__dirname, 'public/img/icons/'),
          to: path.resolve(__dirname, 'build/icons/'),
        },
      ],
    }),
...

now all images and manifest.webmanifest are in result build folder!