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?

Brewery

are you using vue pwa template by default? – Letty

I guess, it is coming from manifest file. can you check that? – Marengo

Check your vue.config.js . there may be entries from pwa iconPaths – Letty

@varit05 My manifest.json: { "name": "client", "short_name": "client" ], "start_url": "./index.html", "display": "standalone", "background_color": "#000000", "theme_color": "#4DBA87" } – Brewery

@Letty my vue.config.js: module.exports = { devServer: { host: '0.0.0.0', disableHostCheck: true }, pluginOptions: { i18n: { locale: 'en', fallbackLocale: 'en', localeDir: 'locales', enableInSFC: true } } } – Brewery

Doesn't vue cli 3 by default make a index.html file in a public folder that contains at least 1 favicon entry? If no favicons are defined at all, it uses the last one it cached. – Recruitment

@Recruitment As I said in my first post, I removed all favicon entries from index.html and cleaned the cache – Brewery

The showing of a different favicon than you expect could still be caching (e.g. my browser tends to display favicons from the last project that had favicons, even though I have caching explicitly disabled; viewing in a different browser would show no favicon instead). The inclusion of several lines that actually define those favicons are probably not. If you do not have those lines in your index.html, nor in your manifest.json, the next likely culprit is something you have in your vue.config.js. – Recruitment

@Recruitment I just figured out what it was! The default configuration for vue-pwa is the culprit! github.com/vuejs/vue-cli/tree/dev/packages/%40vue/… – Brewery

public/index.html has the place where you can change the default favicon to your selected favicon – Spunky

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)

Brewery

btw starting from vue-cli 4.3.0, if the value of an item in iconPaths is null it won't be included in the build. – Squireen