Handling a few different image files as favicon and touch icon

[Ievgen-Lebediev]

Is your feature request related to a problem? Please describe.

My application needs to handle two different *.png files (two different images not only different sizes) for favicon and for touch icons. I did not find the solution for my issue based on the api mentioned at the github pages (both on favicons-webpack-plugin and favicons repos).

Current configuration

new faviconsWebpackPlugin({
    logo: "./src/images/favicon.png",
    cache: true,
    inject: true,
    favicons: {
      appleStatusBarStyle: 'default',
      icons: {
        "android": [
          "./src/images/logo.png",
        ],
        "appleIcon": [
          "./src/images/logo.png",
        ],
        "favicon": [
          "./src/images/favicon.png",
        ]
      }
    }
})

Output

All icons are derived from one source logo: "./src/images/favicon.png" without taking into account sources identified in the icon property.

Describe the solution you'd like

Is there some way to handle a few differnet images as favicons and touch icons?

[andy128k]

There is no way to specify different sources per platform. A documentation says "an array of sources" but actually it means "output files". The purpose of this parameter is to opt-in to specific sizes of output files. It has nothing to do with inputs.

Probably your best option is to try to use a plug-in twice with different inputs and options.

[Ievgen-Lebediev]

@andy128k Thank you for your feedback. Could you please tell me if it possible somehow to run this webpack plugin multiple times per build with different configurations for different image sources?

[andy128k]

@Ievgen-Lebediev see https://github.com/jantimon/favicons-webpack-plugin/tree/main/example/multiple