Vue2 pwa adding strange favicons

Question

I have no idea how or why this is happening. In my vue.config.js file I have this setup:

pwa: {
  name: "Example",
  themeColor: "#081d4d",
  backgroundColor: "#FFFFFF",
  assetVersion: Date.now(),
  workboxOptions: {
    exclude: [
      /web\.config$/,
    ],
  },
  manifestOptions: {
    icons: [{
        src: "assets/icons/android-icon-36x36.png",
        sizes: "36x36",
        type: "image/png",
      },
      {
        src: "assets/icons/android-icon-48x48.png",
        sizes: "48x48",
        type: "image/png",
      },
      {
        src: "assets/icons/android-icon-72x72.png",
        sizes: "72x72",
        type: "image/png",
      },
      {
        src: "assets/icons/android-icon-96x96.png",
        sizes: "96x96",
        type: "image/png",
      },
      {
        src: "assets/icons/android-icon-144x144.png",
        sizes: "144x144",
        type: "image/png",
      },
      {
        src: "assets/icons/android-icon-192x192.png",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "assets/icons/apple-icon-57x57.png",
        sizes: "57x57",
        type: "image/png",
      },
      {
        src: "assets/icons/apple-icon-60x60.png",
        sizes: "60x60",
        type: "image/png",
      },
      {
        src: "assets/icons/apple-icon-72x72.png",
        sizes: "72x72",
        type: "image/png",
      },
      {
        src: "assets/icons/apple-icon-76x76.png",
        sizes: "76x76",
        type: "image/png",
      },
      {
        src: "assets/icons/apple-icon-114x114.png",
        sizes: "114x114",
        type: "image/png",
      },
      {
        src: "assets/icons/apple-icon-120x120.png",
        sizes: "120x120",
        type: "image/png",
      },
      {
        src: "assets/icons/apple-icon-144x144.png",
        sizes: "144x144",
        type: "image/png",
      },
      {
        src: "assets/icons/apple-icon-152x152.png",
        sizes: "152x152",
        type: "image/png",
      },
      {
        src: "assets/icons/apple-icon-180x180.png",
        sizes: "180x180",
        type: "image/png",
      },
      {
        src: "assets/icons/favicon-16x16.png",
        sizes: "16x16",
        type: "image/png",
      },
      {
        src: "assets/icons/favicon-32x32.png",
        sizes: "32x32",
        type: "image/png",
      },
      {
        src: "assets/icons/favicon-96x96.png",
        sizes: "96x96",
        type: "image/png",
      },
      {
        src: "assets/icons/favicon-512x512.png",
        sizes: "512x512",
        type: "image/png",
      },
      {
        src: "assets/icons/ms-icon-70x70.png",
        sizes: "70x70",
        type: "image/png",
      },
      {
        src: "assets/icons/ms-icon-144x144.png",
        sizes: "144x144",
        type: "image/png",
      },
      {
        src: "assets/icons/ms-icon-150x150.png",
        sizes: "150x150",
        type: "image/png",
      },
      {
        src: "assets/icons/ms-icon-310x310.png",
        sizes: "310x310",
        type: "image/png",
      },
    ],
  },
},

And my index.html only has this reference to favicon:

<link rel="icon" href="<%= BASE_URL %>favicon.ico?v=1519211809934">

But for some reason whenever I build my application I see this:

Does anyone know where they are coming from? I can't find anything anywhere talking about it :(

Answer 1

It's part of the pwa.iconPaths config. You can either put correctly sized icons at img/icons/favicon-32x32.png and img/icons/favicon-16x16.png or update your config to override the default.

pwa: {
  name: "Example",
  themeColor: "#081d4d",
  backgroundColor: "#FFFFFF",

  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'
}

Ideally you should implement all five icons so default icons are not used on other platforms unexpectedly.