app-manifest-webpack-plugin

App Manifest Webpack Plugin (Fork of favicons-webpack-plugin)

Allows to use the favicons generator with webpack Forked jantimon/favicons-webpack-plugin

Installation

You must be running webpack (version ^2.x) on node (version ^6.x)

Install:

npm install --save-dev app-manifest-webpack-plugin

Install with yarn:

yarn add -D app-manifest-webpack-plugin

Basic Usage

Add the plugin to your webpack config as follows:

const AppManifestWebpackPlugin = require('app-manifest-webpack-plugin')

...

plugins: [
  new AppManifestWebpackPlugin({
    logo: 'my-logo.png',
  })
]

This basic configuration will generate 37 different icons for iOS devices, Android devices and the Desktop browser out of your my-logo.png file.

It can optionally also generate a JSON file with all information about the icons for you.

If you are using with html-webpack-plugin it will also inject the necessary html for you:

  <link rel="apple-touch-icon" sizes="57x57" href="icons-366a3768de05f9e78c392fa62b8fbb80/apple-touch-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="icons-366a3768de05f9e78c392fa62b8fbb80/apple-touch-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="icons-366a3768de05f9e78c392fa62b8fbb80/apple-touch-icon-72x72.png">
  ...
  ...
  <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="icons-366a3768de05f9e78c392fa62b8fbb80/apple-touch-startup-image-1536x2008.png">

Advanced Usage

plugins: [
  new AppManifestWebpackPlugin({
    // Your source logo
    logo: 'my-logo.png',
    // The prefix for all image files (might be a folder or a name). May be empty
    prefix: 'icons-[hash]/',
    // Emit all stats of the generated icons
    emitStats: false,
    // The name of the json containing all favicon information
    statsFilename: 'iconstats-[hash].json',
    // Generate a cache file with control hashes and
    // don't rebuild the favicons until those hashes change
    persistentCache: true,
    // Inject the html into the html-webpack-plugin
    inject: true,
    // favicons configuration object. Support all keys of favicons (see https://github.com/haydenbleasel/favicons)
    config: {
      appName: 'Webpack App', // Your application's name. `string`
      appDescription: null, // Your application's description. `string`
      developerName: null, // Your (or your developer's) name. `string`
      developerURL: null, // Your (or your developer's) URL. `string`
      display: 'standalone', // Android display: "browser" or "standalone". `string`
      start_url: '/', // Android start application's URL. `string`
      orientation: 'portrait',
      background: '#fff',
      theme_color: '#333',
      icons: {
        android: true,
        appleIcon: true,
        appleStartup: true,
        coast: false,
        favicons: true,
        firefox: true,
        opengraph: false,
        twitter: true,
        yandex: true,
        windows: true,
      },
    }
  })
]

Changelog

Take a look at the CHANGELOG.md.

Contribution

You're free to contribute to this project by submitting issues and/or pull requests. This project is test-driven, so keep in mind that every change and new feature should be covered by tests. This project uses the semistandard code style.

License

This project is licensed under MIT.

Changelog

0.1.2

• Cleanup code, refactoring
• webpack 4 support with backwards compatibility