How to remove the hardcoded favicon in Vue?

Question

I have Vue CLI 3 installed with the PWA plugin as well as i18n.

I deleted all the Vue icon files in /public/ (including the PNGs in /public/img/icons), removed the logo.png file in /src/assets, removed the link(rel=icon) tag in /public/index.html, changed manifest.json to remove any reference to the existing Vue icon files, cleared my browser cache and yet when loading the page, I am still getting these hardcoded link tags in my DOM:

<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="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">

None of these files exist and none of them are referenced anywhere in my project. The weirdest thing about this is that the default Vue favicon is still being displayed in any browser I use, even after deleting ALL the files, so it's definitely not a client-side cache thing.

How can I remove these?

Answer 1

I just figured out that I needed to edit my vue.config.js and add something like:

    pwa: {
        name: 'Test',
        iconPaths: {
          favicon32: '(any icon file here)',
          favicon16: '(any icon file here)',
          appleTouchIcon: '(any icon file here)',
          maskIcon: '(any icon file here)',
          msTileImage: '(any icon file here)'
        }
    }

to override the default settings (see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa)