I'd like to manually specify the name, short-name, start URL, theme color, background-color, orientation, etc. How can this be achieved? The documentation within the readme only offers "some" information, and doesn't even mention "background-color" for example.

It is important however, that those options aren't only set/configurable for manifest.json, but also for the related entries like:

<meta name="msapplication-TileColor" content="#fff">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="#fff">

Aside from that: Excellent idea and project! Keep up the great work!

The dependency favicons was updated from 5.1.1 to 5.2.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

favicons is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

Hello again boys, thank you all for the assistance so far. I have another small problem and I hope you guys can point me to a direction.

        new WebappWebpackPlugin({
            logo: "./src/assets/example.png",
            prefix: "icons-[hash]/",
            cache: false,
            inject: "force",
        })

Why is the plugin adding a reference to the root folder in /icons-214bffbdb7514553954e6113cebd4aa1/favicon-16x16.png when the prefix uses a relative path?

Thx.

<link rel="icon" type="image/png" sizes="16x16" href="/icons-214bffbdb7514553954e6113cebd4aa1/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icons-214bffbdb7514553954e6113cebd4aa1/favicon-32x32.png">
<link rel="shortcut icon" href="/icons-214bffbdb7514553954e6113cebd4aa1/favicon.ico">

I have project with nuxt where i set publicPath during build based on env variable.

     extend: function(config, ctx) {
      if (!ctx.isDev) {
        const awsS3AssetsBucketName = `blabla-${
          process.env.STAGE
        }`
        config.output.publicPath = `https://s3.${
          process.env.AWS_REGION
        }.amazonaws.com/${awsS3AssetsBucketName}/`
      }
 }
 }

Even if i change env variable ( so the publicPath changed) webapp-webpack-plugin still output old path until i clean its cache folder.

Coming from favicons-webpack-plugin, the prefix configuration key allowed us to prepend the filename with a file hash. This let us, from a glance, determine if the favicons were properly cachebusted, but it also allowed us to dump multiple versions of a favicon into the same S3 assets directory. The application I'm building is multi-tenant, so these versions may differ drastically. Is there any desire to support an extra key or an ability to hash filenames on export?

favicons-webpack-plugin
dist/assets/abc123-favicon.png
dist/assets/xyz456-favicon.png

webapp-webpack-plugin
dist/assets/xyz456/favicon.png
dist/assets/abc123/favicon.png

I just wanted to send you a quick note and say thank-you for the work you have done on this project.

It has made my life 💯 easier.

Can we have a way to add the content hash as query string for the generated files?

Right now I can set:

prefix: '[hash]/

which does the job, but creates lengthy and ugly URLs, that later make it difficult to review cache reports and similar, whereas if the hash was in a query string, it's often ignored or can be easily hidden in reports.

Ideally, I'd love the output to be similar to:

<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png?791c3814a0650f9555ddd744b3e2fe77">

While href attributes are rewritten according to assets prefix content attributes that link to assets are not.

imported from jantimon/favicons-webpack-plugin#84 thanks @beavis07

It's still not out quite yet, but I'm using html-webpack-plugin 4.0.0-alpha.2 for performance reasons. I can't seem to get this plugin working with it, so I'm guessing it's not supported. The integration API has changed considerably:

jantimon/html-webpack-plugin#953

If you could support both versions, that would be much appreciated.

Cheers!

Hi guys, thanks u for such a great lib!
This is kinda duplicate of
itgalaxy/favicons#253
as far as this issue is still opened there from 1 Jan 2019 , is it possible to rollback dependency of this package and lock it no last working version?

I have your fantastic plugin up and working with html-webpack-plugin@next, thank you! The only issue I'm having is I'd like to be able to extra the raw HTML output for the links.

Currently, if I specific outputTemplate: '' in the html-webpack-plugin nothing gets injected at all; it looks like it's specifically looking for the <head></head> tags for the injection.

Even if I set inject: 'force', it won't inject anything unless there is a <head></head> tag pair present, which unfortunately for my use-case is problematic.

Consider using find-cache-dir to locate the default cache directory. This is what babel-loader and eslint-loader are already doing, so it shouldn't surprise the user. I'm personally interested in this because I don't like unnecessary configuration (changing plugin options), .gitignore / .eslintignore / .prettierignore / .dockerignore / .*ignore bloat, and longer directory listings.

One thing to look out for is that yarn wipes out node_modules/.cache on every install, apparently, but no big deal, this is just a cache.

Using [email protected], adding webapp-webpack-plugin to my build causes me to get a different chunkhash each build, even when they're identical in content. I'm also finding this to be true with favicons-webpack-plugin, so I think this is something Webpack has changed about the way it calculates the hash. However, maybe there's something that can be changed about the way the plugin works to fix this.

Im trying to use it with nuxt ( edge) which is uses webpack 4. And while the plugin triggered and the code here executes fine
https://github.com/brunocodutra/webapp-webpack-plugin/blob/master/src/index.js#L53
the resulting page doesnt contain any favicon code that was added here.
Original plugin works fine and favicon html exist, except a error with double tap -> jantimon/favicons-webpack-plugin#126 (comment)

So as i understand a bit different api should be used for webpack 4 like in original plugin?

I currently have two separate HtmlWebpackPlugin configurations, that generates two similar but different index.html files (one for each theme, and in the future could be more). Is it possible to configure WebApp WebPack plugin so I can also have two instances, each one tied to one of the HtmlWebPack plugins?

The idea is basically to generate different favicons for different index.html's as each one has it's own theme and css.

This plugin no longer works with Webpack 4. Any plans to update?

Hey! Any intent of supporting Safari mask icons? Happy to put together a PR :)

<link rel="mask-icon" href="path/to/favicon.svg" color="#ff00ff">

Appear this error when using this plugin with Webpack4. I dont know how to debug plugins very well, so if you need something please tell me or show me how to start with 😄.

× ｢wdm｣: Error: Cannot find module 'core-js/modules/es6.array.sort'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:548:15)
    at Function.Module._load (internal/modules/cjs/loader.js:475:25)
    at Module.require (internal/modules/cjs/loader.js:598:17)
    at require (internal/modules/cjs/helpers.js:11:18)
    at Object.<anonymous> (C:\Projects\my-project\node_modules\favicons\dist\index.js:9:1)
    at Module._compile (internal/modules/cjs/loader.js:654:30)
    at Module._extensions..js (internal/modules/cjs/loader.js:665:10)
    at Object.require.extensions.(anonymous function) [as .js] (C:\Projects\my-project\node_modules\babel-register\lib\node.js:152:7)
    at Module.load (internal/modules/cjs/loader.js:566:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:506:12)

Firstly, thanks so much for a fantastic plugin. Huge time saver!

I can see that the larger resolution images are not being generated and hence I get no splash screen on the iPhone XS max or X. Here is a list of what is being generated:

apple-touch-icon-1024x1024.png
apple-touch-icon-114x114.png
apple-touch-icon-120x120.png
apple-touch-icon-144x144.png
apple-touch-icon-152x152.png
apple-touch-icon-167x167.png
apple-touch-icon-180x180.png
apple-touch-icon-57x57.png
apple-touch-icon-60x60.png
apple-touch-icon-72x72.png
apple-touch-icon-76x76.png
apple-touch-icon-precomposed.png
apple-touch-icon.png
apple-touch-startup-image-1182x2208.png
apple-touch-startup-image-1242x2148.png
apple-touch-startup-image-1496x2048.png
apple-touch-startup-image-1536x2008.png
apple-touch-startup-image-320x460.png
apple-touch-startup-image-640x1096.png
apple-touch-startup-image-640x920.png
apple-touch-startup-image-748x1024.png
apple-touch-startup-image-750x1294.png
apple-touch-startup-image-768x1004.png

It looks like I am missing:

1668x2224
2048x2732

Appreciate any guidance. My config:

new WebappWebpackPlugin({
      logo: resolve(__dirname, '../src/client/assets/large-icon.png'),
      favicons: {
        appName: 'foo',
        appDescription:
          'bar',
        developerName: null,
        developerURL: null, // prevent retrieving from the nearest package.json
        background: '#00bbd4',
        theme_color: '#00bbd4',
        icons: {
          // Platform Options:
          // - offset - offset in percentage
          // - background:
          //   * false - use default
          //   * true - force use default, e.g. set background for Android icons
          //   * color - set background for the specified icons
          //   * mask - apply mask in order to create circle icon (applied by default for firefox). `boolean`
          //   * overlayGlow - apply glow effect after mask has been applied (applied by default for firefox). `boolean`
          //   * overlayShadow - apply drop shadow after mask has been applied .`boolean`
          //
          android: true, // Create Android homescreen icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
          appleIcon: true, // Create Apple touch icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
          appleStartup: true, // Create Apple startup images. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
          coast: false, // Create Opera Coast icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
          favicons: true, // Create regular favicons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
          firefox: true, // Create Firefox OS icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
          windows: true, // Create Windows 8 tile icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
          yandex: false
        }
      }
    }),
...

The dependency favicons was updated from 5.2.0 to 5.3.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

favicons is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

How to generate a source json stats? I want use in react-helmet)))

So, this plugin works well with html-webpack-plugin, but for server side rendering with react i needed to get generated markup directly. Something like this:

import favicons from './path/to/favicon';

It is manageable to create module rule for handling this using available hook and custom loader. But it doesn't feel convenient enough.

I propose addition to the plugin: an instance method rule which generates relevant module rule. So that in a config you can write this to get access to tags by requiring favicon source:

let plugin = new WebappWebpackPlugin(...);
config.plugins.push( plugin );
config.module.rules.push( plugin.rule() );

Here is my working implementation (used with webpack 4, should work with 3 too).

There two issues:

1. To get absolute path of a favicon source for rule.include from options.logo i used path.resolve, which does not really match webpack's path resolution mentioned in readme.

2. I have not added tests.

What do you think?

Currently invalid options are silently ignored, which is not particularly user friendly.

The options schema should be validated and produce informative error messages in case of failure.

Since this is forked from favicons-webpack-plugin and does support webpack 4 (while favicons-webpack-plugin is working on supporting it), I'm wondering what this plugin offers that the original does not offer.

If it's just increased performance/general maintenance, that's of course also good, but it would be nice to know!

Is it or would it be possible to add hash to files name ?

I found a workaround of using prefix: '[hash]' but this use the hash of the logo file for everything, changing a manifest value without the logo won't change be updated.

Is it possible to hash individual files?
The case why:

There is an issue itgalaxy/favicons#253

With different favicons version, the same source file is processed differently. If we hash only by source file we have a situation with a stale cache on a client.

Or icons-[hash] should also depend on exact favicons version.

Hi, my name is Ksenia. I'm a graphic designer and I'd like to collaborate on your open source project and propose free logo/icon design for your app. If it's something you're interested in, please, let me know!

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

I have multiple html plugins in config, they are actually intended for different kind of apps, so some may not need favicons at all, so is it possible to exclude particular html instance?

Version 4.17.3 of webpack was just published.

This version is covered by your current version range and after updating it in your project the build failed.

webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Hello,

since the latest iOS update my webapp only shows a white status bar in iOS.

is there an option to create a black status bar instead of black-translucent?

< meta name="apple-mobile-web-app-status-bar-style" content="black" >

regards
Tristan

I'm using the following snippet to create the icons I need, but the proper HTML is not being injected into the index.html page. Am I doing something wrong? Similar config works with Favicons Webpack Plugin.

// webpack

const path = require("path");

const CleanWebpackPlugin = require("clean-webpack-plugin");
const WebappWebpackPlugin = require("webapp-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: {
        vendor: "./src/vendor.js",
        app: "./src/app.js"
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "js/[name].[chunkhash].js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: [
                    "style-loader",
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader"
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin("dist", {}),
        new WebappWebpackPlugin({
            logo: "./src/assets/example.png",
            prefix: "icons-[hash]/",
            cache: false,
            inject: true,
            favicons: {
                background: "#ddd",
                theme_color: "#333",
                icons: {
                    android: false,
                    appleIcon: false,
                    appleStartup: false,
                    coast: false,
                    favicons: true,
                    firefox: false,
                    opengraph: false,
                    twitter: false,
                    yandex: false,
                    windows: false
                }
            }
        }),
        new MiniCssExtractPlugin({
            filename: "css/app.[contenthash].css"
        }),
        new HtmlWebpackPlugin({
            inject: false,
            hash: true,
            template: "./src/html/index.html",
            filename: "index.html"
        })
    ]
};

The dependency cache-loader was updated from 1.2.3 to 1.2.4.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

cache-loader is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

Do you think it would be worthwhile to try to make the plugin work with mini-html-webpack-plugin? I'm curious what it would take on that side to integrate. We should just 1. generate files 2. write references. I could possibly add some hook.

▶ yarn webpack --mode production
yarn run v1.12.3
$ /Users/lopopolo/dev/repos/hyperbola/node_modules/.bin/webpack --mode production
Error: Cannot find module 'html-webpack-plugin'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
    at Function.Module._load (internal/modules/cjs/loader.js:529:25)
    at Module.require (internal/modules/cjs/loader.js:657:17)
    at require (/Users/lopopolo/dev/repos/hyperbola/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at module.exports.tapHtml (/Users/lopopolo/dev/repos/hyperbola/node_modules/webapp-webpack-plugin/src/compat.js:18:29)
    at child.run.then.tags (/Users/lopopolo/dev/repos/hyperbola/node_modules/webapp-webpack-plugin/src/index.js:46:13)
    at process.internalTickCallback (internal/process/next_tick.js:77:7)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Setting inject: false in webpack.config.js works around the failure. If html-webpack-plugin is a required peer dependency, can package.json flag it as such?

When using webpack 4 and the latest version of this library, I am getting this error, although the logo.png file does exist in that directory.

EntryModuleNotFoundError: Entry module not found: Error: Can't resolve 'logo.png' in '/Users/connorelsea/Projects/remixplatform'

This is the webpack config I am using. https://gist.github.com/Connorelsea/6b7ed5e7fd0e4ab83d839e3e8c698701

Hi,

Thank you for make this plugin!
I try to this with html-webpack-plugin . following results. Icon path is incorrect.

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="title">
  <meta name="author">
  <meta name="description">
  <meta property="og:title">
  <meta property="og:description">
  <meta property="og:type">
  <meta property="og:image">
  <meta property="og:url">
  <meta property="og:site_name">
  <link rel="apple-touch-icon" sizes="114x114" href="/assets//apple-touch-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/assets//apple-touch-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/assets//apple-touch-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/assets//apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/assets//apple-touch-icon-180x180.png">
  <link rel="apple-touch-icon" sizes="57x57" href="/assets//apple-touch-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/assets//apple-touch-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/assets//apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/assets//apple-touch-icon-76x76.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/assets//favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/assets//favicon-32x32.png">
  <link rel="manifest" href="/assets//manifest.json">
  <link rel="shortcut icon" href="/assets/favicon.ico">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="blog.sugarshin.net">
  <meta name="application-name" content="blog.sugarshin.net">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="msapplication-TileColor" content="#fff">
  <meta name="msapplication-TileImage" content="/mstile-144x144.png">
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="theme-color" content="#fff">
  <link href="/assets/vendor-6bf879f5d556d65add330eeaac6d483d.css" rel="stylesheet">
  <link href="/assets/app-22e2dbacc5a7e8abcf73518a523be7e3.css" rel="stylesheet">
</head>

webpack.config.js

{
  output: {
    path: path.resolve(__dirname, '..', buildDir),
    publicPath: '/',
    ...
  },
  plugins: [
    new HtmlPlugin(),
    new WebappPlugin({
      logo: './src/images/p.jpg',
      prefix: 'assets/',
      cache: false,
      favicons: configuration,
    }),
    ...
  ],
  ...
}

dir

.
├── assets
│   ├── app-22e2dbacc5a7e8abcf73518a523be7e3.css
│   ├── app-30c6104a4d8c1e4465e9.js
│   ├── fonts
│   ├── images
│   ├── vendor-656de7e8ef127b850672.js
│   ├── vendor-6bf879f5d556d65add330eeaac6d483d.css
│   ├── android-chrome-144x144.png
│   ├── android-chrome-192x192.png
│   ├── android-chrome-256x256.png
│   ├── android-chrome-36x36.png
│   ├── android-chrome-384x384.png
│   ├── android-chrome-48x48.png
│   ├── android-chrome-512x512.png
│   ├── android-chrome-72x72.png
│   ├── android-chrome-96x96.png
│   ├── apple-touch-icon-114x114.png
│   ├── apple-touch-icon-120x120.png
│   ├── apple-touch-icon-144x144.png
│   ├── apple-touch-icon-152x152.png
│   ├── apple-touch-icon-167x167.png
│   ├── apple-touch-icon-180x180.png
│   ├── apple-touch-icon-57x57.png
│   ├── apple-touch-icon-60x60.png
│   ├── apple-touch-icon-72x72.png
│   ├── apple-touch-icon-76x76.png
│   ├── apple-touch-icon-precomposed.png
│   ├── apple-touch-icon.png
│   ├── browserconfig.xml
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon.ico
│   ├── manifest.json
│   ├── mstile-144x144.png
│   ├── mstile-150x150.png
│   ├── mstile-310x150.png
│   ├── mstile-310x310.png
│   └── mstile-70x70.png
└── index.html

Thank you.

Using something like this configuration below makes the build crash.

new WebAppWebpackPlugin({
    logo: 'image.png',
    favicons: {
        appName: 'Application!',
    },
});

Part of the error:

Error: Can't resolve '","developerName":null,"appDescription":"Description","version":"0.0.1"},"path":"/"}' in 'F:\IdeaProjects\Project\client'

....

using description file: F:\IdeaProjects\Project\package.json (relative path: ./node_modules/","developerName":null,"appDescription":"Description","version":"0.0.1"},"path":"/"})
            no extension
              F:\IdeaProjects\Project\node_modules\","developerName":null,"appDescription":"Description","version":"0.0.1"},"path":"\"} doesn't exist

Somehow the exclamation mark triggers a file path search within the itgalaxy/favicons package. Using this package directly does not give the error. Seems like the configuration is passed as a JSON string or something and somehow the favicons package cannot handle that. This also bugs on the appDescription property, so it seems to be unrelated to which property it is put on.

It seems that webapp-webpack-plugin doesn't consider xhtml flag set in html-webpack-plugin.
This is very important for xhtml pages that need to have all tags closed.

The third argument of SingleEntryPlugin constructor is missing:

See also jantimon/html-webpack-plugin#895 and jantimon/html-webpack-plugin@26dcb98

Imported from jantimon/favicons-webpack-plugin#110

An empty prefix setting (i.e.: install all icons into the document root)
was treated by loaderUtils.interpolateName() as '[hash].[ext]'.
While this may be a useful default in other contexts, it is wrong here
where a directory template gets interpolated. So handle the empty string
specially.

The favicons library seems to support an input array of sources. As far as I have read this is pretty useful for generating different icons for different sizes. E.g. to have a slightly different logo when resized to 16x16 and a more detailed one above 100x100 for example.

source = 'test/logo.png',                     // Source image(s). `string`, `buffer` or array of `string`

favicons(source, configuration, callback);

The old caching functionality was removed because it was hard to maintain and too complex.

On the other hand generating favicons can take several seconds and since they rarely change, caching them does make a lot of sense.

We should investigate alternative ways to provide caching, like cache-loader for example.

Hi! Thanks for your amazing work!

I already tried to using inject: 'force' and using the v4 branch, but I keep getting no favicons :(

To reproduce the issue:

• Clone https://github.com/woitechen/tysark.git
• Run yarn && yarn build
• Look at dist/index.html

I think it would be useful to have access to icons path in html plugin, for example for such case to be able to use generated images in generated html:

<img src="<title><%= htmlWebpackPlugin.options.webapp.prefix %>/android-chrome-256x256.png</title>">

Came across this funny error when using your package (thanks btw! Webpack 4 support woohoo)

TypeError: expected author to be a string

In our package.json, we have author as an object, with name, url and email keys. Looking at the spec, this seems to be valid. But it dies when trying to guess the developer names from the package.json.

If I get some time I can submit a PR, or if this is already on your radar, then I wont :)

Anyway, thanks for the plugin! 👍

I'd like to use a round shadowed icon on Android (like this: https://abs.twimg.com/responsive-web/web/ltr/icon-default.882fa4ccf6539401.png). On iOS, I'd like to use a normal one with the full white background (like https://abs.twimg.com/responsive-web/web/ltr/icon-ios.a9cd885bccbcaf2f.png). Do you know if this is possible to do? I have not found any documentation how to change 'favicon' config to produce that.

Hello there,
first of all thank you for this great plugin.

I'm trying to use it alongside imagemin-webpack but the generated favicon are placed outside of the assets folder.
This is unexpected, as shown also here.

Here is a snippet of my configuration file, if it can help:

const ImageminPlugin = require('imagemin-webpack')
const imageminGiflossy = require('imagemin-giflossy')
const imageminMozJpeg = require('imagemin-mozjpeg')
const imageminPngquant = require('imagemin-pngquant')
const imageminSvgo = require('imagemin-svgo')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const WebappWebpackPlugin = require('webapp-webpack-plugin')

and in plugins array:

[
        new ImageminPlugin({
          bail: false, // Ignore errors on corrupted images
          cache: false,
          imageminOptions: {
            plugins: [
              imageminGiflossy({
                interlaced: true,
                optimizationLevel: 3,
              }),
              imageminMozJpeg({
                quality: 70,
                progressive: true,
              }),
              imageminPngquant({
                speed: 1,
                quality: [0.85, 1], //lossy settings
                optimizationLevel: 5,
                strip: true,
              }),
              imageminSvgo({
                removeViewBox: true,
              }),
            ],
          },
        }),
        new HtmlWebpackPlugin(),
        new WebappWebpackPlugin({
          logo: './public/favicon.png',
          // This is going to create a custom manifest.json
          // Refer to this documentation for more information : https://github.com/itgalaxy/favicons#usage
          favicons: {
            appName: 'React Advanced Boilerplate - PostCSS support, i18next and much more',
            appShortName: 'React Advanced Boilerplate',
            theme_color: '#0d47a1',
            lang: 'it-IT',
            start_url: './',
          },
        }),
]

Any help is much appreciated.

Thank you in advance and keep up the good work!