Novel Planetary Movement


    0.0.11 • Public • Published

    Favicons Webpack Plugin

    npm version Dependency Status Build status js-semistandard-style

    Allows to use the favicons generator with webpack


    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:

    let FaviconsWebpackPlugin = require('favicons-webpack-plugin')
    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 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 FaviconsWebpackPlugin({
        // Your source logo
        logo: 'my-logo.png',
        // The prefix for all image files (might be a folder or a name)
        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,
        // WebApp Manifest Configuration (see
        appName: null, // Inferred from package.json by default
        appDescription: null,
        developerName: null,
        developerURL: null,
        dir: 'auto',
        lang: 'en-US',
        background: '#fff',
        theme_color: '#fff',
        appleStatusBarStyle: 'black-translucent',
        display: 'standalone',
        orientation: 'any',
        start_url: '/?homescreen=1',
        version: '1.0',
        // which icons should be generated (see
        icons: {
          android: true,
          appleIcon: true,
          appleStartup: true,
          coast: false,
          favicons: true,
          firefox: true,
          opengraph: false,
          twitter: false,
          yandex: false,
          windows: false


    Take a look at the


    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.


    This project is licensed under MIT.


    npm i @redocly/favicons-webpack-plugin

    DownloadsWeekly Downloads






    Unpacked Size

    21.5 kB

    Total Files


    Last publish


    • oleksandr.saveliev
    • bohdan.petryshyn
    • and678
    • reoles
    • okachynskyy
    • viacheslavoprysk
    • romanhotsiy
    • alawar
    • adamaltman
    • marshevskyy