Package Exports

favicons-webpack-plugin

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (favicons-webpack-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Favicons Webpack Plugin

Allows to use the favicons generator with webpack

Installation

You must be running webpack on node 0.12.x or higher

Install the plugin with npm:

$ npm install --save-dev favicons-webpack-plugin

Basic Usage

Add the plugin to your webpack config as follows:

plugins: [
  new FaviconsWebpackPlugin('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 will also generate a JSON file with all information about the icons for you.

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

https://github.com/jantimon/favicons-webpack-plugin/blob/master/test/fixtures/expected/default-with-html/index.html

  <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 FaviconsWebpackPlugin({
    logo: 'my-logo.png',                // Your source logo
    prefix: 'icons-[hash]/',            // The prefix for all image files (might be a folder or a name)
    filename: 'iconstats-[hash].json',  // The name of the json containing all favicon information
    inject: true,                       // Inject the html into the html-webpack-plugin
    background: '#fff',                 // favicon background color (see https://github.com/haydenbleasel/favicons#usage)
    title: 'Webpack App',               // favicon app title (see https://github.com/haydenbleasel/favicons#usage)

    // which icons should be generated (see https://github.com/haydenbleasel/favicons#usage)
    icons: {
      android: true,
      appleIcon: true,
      appleStartup: true,
      coast: false,
      favicons: true,
      firefox: true,
      opengraph: false,
      twitter: false,
      yandex: false,
      windows: false
    }
  })
]

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.