Modify @ vue / cli project to build the default icon icon

Used today @ vue / cli build a project, and then want to change it icon icon pages. But replacing icons in the public folder directly, does not change the icon icons web pages.

Folder Contents are as follows:

replacing the original icon file icon with the project logo, project or restart vue default icon.

Solution:

The first step: replacing the original icon with the project logo.
Step Two: Create a new file vue.config.js in the project root directory.

The third step: The following code is written in the file vue.config.js:

module.exports = {
    pwa: {
        iconPaths: {
            favicon32: 'favicon.ico',
            favicon16: 'favicon.ico',
            appleTouchIcon: 'favicon.ico',
            maskIcon: 'favicon.ico',
            msTileImage: 'favicon.ico'
        }
    }
}

Step four: Restart project. Then you can see the icon into your web page logo of the project.

the reason:

There are details on its GitHub.
@ vue / cli-plugin-pwa