Search code examples
htmlvue.jsfaviconvue-cli

How to edit auto injected favicon tags inside header of a Vue Cli genereated WPA project?

If you use @vue/cli 4.1.1 to create a new project with the feature (x) Progressive Web App (PWA) Support enabled, your generated project structure looks like this:

enter image description here

As you can see there are several icons generated, they are automatically injected inside the html head:

  • Index.html:
  <title>wproj</title>
</head>
  • Rendered Index.html:
  <title>wproj</title>
  <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="wproj">
  <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>

Question: Where are these automatically injected properties are defined? How to edit them (e.g. remove one)?

There is no manifest.json file.

Solution

  • The paths are configured by @vue/cli-plugin-pwa. In the documentation you can find pwa.iconPaths in the configuration. As you can see, the default value for iconPaths is 

    {
   favicon32: 'img/icons/favicon-32x32.png',
   favicon16: 'img/icons/favicon-16x16.png',
   appleTouchIcon: 'img/icons/apple-touch-icon-152x152.png',
   maskIcon: 'img/icons/safari-pinned-tab.svg',
   msTileImage: 'img/icons/msapplication-icon-144x144.png'
}

    which corresponds to the files that are injected into your index.html.

    The configuration can be changed with a vue.config.js file. For example this content 

    module.exports = {
  pwa: {
    iconPaths: {
      favicon32: "TEST"
    }
  }
};

    in the config file causes the output for favicon32 to be

    <link rel=icon type=image/png sizes=32x32 href=/TEST>