Favicon with webpack and vue-cli

Hey everyone so I have a predicament. index.html is created by webpack for my vue project. It's currently looking for favicons inside the the dist folder as shown below. However the icons folder does not even exist inside of the dist/img folder. I didn't configure webpack I am just managing the site and honestly don't know that much about it. I don't know how I would put those files in the dist folder and have it stick as it is in the .gitignore file and I am pretty sure they don't want me messing with that. How can I get those files in a place they will be picked up by webpack or edit webpack to look for the files in a different location?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Vue App</title>
    <link href="/bundle.js" rel="preload" as="script" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,user-scalable=no"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="/img/icons/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="/img/icons/favicon-16x16.png"
    />
    <link rel="manifest" href="/manifest.json" />
    <meta name="theme-color" content="#4DBA87" />
    <meta name="apple-mobile-web-app-capable" content="no" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="apple-mobile-web-app-title" content="creative-engine-spa" />
    <link
      rel="apple-touch-icon"
      href="/img/icons/apple-touch-icon-152x152.png"
    />
    <link
      rel="mask-icon"
      href="/img/icons/safari-pinned-tab.svg"
      color="#4DBA87"
    />
    <meta
      name="msapplication-TileImage"
      content="/img/icons/msapplication-icon-144x144.png"
    />
    <meta name="msapplication-TileColor" content="#000000" />
  </head>

  <body>
    <div id="app"></div>
    <script type="text/javascript" src="/bundle.js"></script>
  </body>
</html>

I don't know if this would help ya'all with my question but I also have this code in my vue.config.js file

const path = require("path");

module.exports = {
  chainWebpack: config => {
    config;
    config.plugin("html").tap(args => {
      args[0].meta = {
        viewport: "width=device-width,initial-scale=1,user-scalable=no"
      };

      return args;
    });
  },
  configureWebpack: {
    devtool: "cheap-source-map",
    output: {
      filename: "bundle.js"
    }
  }
};

Solution

I had to find my static folder. In my case it was the public folder and drop the files in there. In the folder structure I wanted to grab them in. Apparently your static folder gets built every time. In my case my folder structure looked like so public/img/favicon-32x32.png