Code Monkey home page Code Monkey logo

favicons-webpack-plugin's Introduction

Favicons Webpack Plugin

npm version CI js-semistandard-style

Leverages on favicons to automatically generate your favicons for you.

Installation

Install the plugin and favicons with npm:

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

Zero Config Usage

Add your base logo as logo.png file to you webpack context folder. (By default the context is the current working directory)

Add the plugin to your webpack config as follows:

const FaviconsWebpackPlugin = require('favicons-webpack-plugin')

plugins: [
  new FaviconsWebpackPlugin()
]

Basic Usage

Demo

Add the plugin to your webpack config as follows:

const FaviconsWebpackPlugin = require('favicons-webpack-plugin')

...

plugins: [
  new FaviconsWebpackPlugin('/path/to/logo.png') // svg works too!
]

The default configuration will automatically generate webapp manifest files along with 44 different icon formats as appropriate for iOS devices, Android devices, Windows Phone and various desktop browsers out of your single logo.png.

Tip: You might want to fine tune what vendors to support.

A Note on Path Resolution

Under the hood, Webpack resolves the path to logo according to the following rules:

  • If /path/to/logo is absolute, there is nothing to resolve and the path specified is used as is.

  • If ./path/to/logo is relative, it's resolved with respect to Webpack's context, which defaults to process.cwd().

  • If path/to/logo is neither explicitly relative nor absolute, Webpack attempts to resolve it according to resolve.modules, which defaults to modules: ["node_modules"].

HTML Injection

In combination with html-webpack-plugin it will also inject the necessary html for you:

<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="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="167x167" href="/assets/apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="1024x1024" href="/assets/apple-touch-icon-1024x1024.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="/assets/apple-touch-startup-image-320x460.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-640x920.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-640x1096.png">
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-750x1294.png">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="/assets/apple-touch-startup-image-1182x2208.png">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="/assets/apple-touch-startup-image-1242x2148.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="/assets/apple-touch-startup-image-748x1024.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-1496x2048.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="/assets/apple-touch-startup-image-768x1004.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="/assets/apple-touch-startup-image-1536x2008.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="icon" type="image/png" sizes="228x228" href="/assets/coast-228x228.png">
<link rel="manifest" href="/assets/manifest.webmanifest">
<link rel="shortcut icon" href="/assets/favicon.ico">
<link rel="yandex-tableau-widget" href="/assets/yandex-browser-manifest.json">
<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">
<meta name="application-name">
<meta name="mobile-web-app-capable" content="yes">
<meta name="msapplication-TileColor" content="#fff">
<meta name="msapplication-TileImage" content="/assets/mstile-144x144.png">
<meta name="msapplication-config" content="/assets/browserconfig.xml">
<meta name="theme-color" content="#fff">

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

Advanced Usage

plugins: [
  new FaviconsWebpackPlugin({
    // Your source logo (required)
    logo: './src/logo.png',
    // Your maskable source logo (optional)
    logoMaskable: './src/logo-maskable.png',
    // Allow caching the assets across webpack builds. By default this will use
    // webpack's cache configuration, but can be set to false to disable caching.
    // Note: disabling caching may increase build times considerably.
    // For more information, see: https://webpack.js.org/configuration/cache/
    cache: true,
    // Override the publicPath option usually read from webpack configuration
    publicPath: '/static',
    // The directory to output the assets relative to the webpack output dir.
    // Relative string paths are allowed here ie '../public/static'. If this
    // option is not set, `prefix` is used.
    outputPath: '/public/static',
    // Prefix path for generated assets
    prefix: 'assets/',
    // Inject html links/metadata (requires html-webpack-plugin).
    // This option accepts arguments of different types:
    //  * boolean
    //    `false`: disables injection
    //    `true`: enables injection if that is not disabled in html-webpack-plugin
    //  * function
    //    any predicate that takes an instance of html-webpack-plugin and returns either
    //    `true` or `false` to control the injection of html metadata for the html files
    //    generated by this instance.
    inject: true,

    // Favicons configuration options (see below)
    favicons: {
      ...
    }
  })
]

To fine tune what icons/metadata is generated, refer to favicons' documentation.

The options specified under favicons: are handed over as is to favicons, except that if appName, appDescription, version, developerName or developerURL are left undefined, they will be automatically inferred respectively from name, description, version, author.name and author.url as defined in the nearest package.json if available. To disable automatically retrieving metadata from package.json, simply set to null the properties you want to omit.

Examples

Basic

const FaviconsWebpackPlugin = require('favicons-webpack-plugin')

plugins: [
  new FaviconsWebpackPlugin({
    logo: './src/logo.png', // svg works too!
    mode: 'webapp', // optional can be 'webapp', 'light' or 'auto' - 'auto' by default
    devMode: 'webapp', // optional can be 'webapp' or 'light' - 'light' by default 
    favicons: {
      appName: 'my-app',
      appDescription: 'My awesome App',
      developerName: 'Me',
      developerURL: null, // prevent retrieving from the nearest package.json
      background: '#ddd',
      theme_color: '#333',
      icons: {
        coast: false,
        yandex: false
      }
    }
  })
]

To fine tune what icons/metadata is generated, refer to favicons' documentation.

Handling Multiple HTML Files

const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { basename } = require('path')

...

plugins: [
    new HtmlWebpackPlugin({
        template: 'a.html.tmpl',
        filename: 'a.html',
    }),
    new HtmlWebpackPlugin({
        template: 'b.html.tmpl',
        filename: 'b.html',
    }),
    new FaviconsWebpackPlugin({
        logo: 'logo.svg',
        inject: htmlPlugin => 
          basename(htmlPlugin.options.filename) === 'a.html',
    }),
],

Compilation Modes

Modes allow you to choose a very fast simplified favicon compilation or a production ready favicon compilation

By default or if the favicons mode option is set to auto the favicon compilation depends on the webpack mode:
If the webpack mode is set to development the favicons mode will use a quick light favicons build.
If the webpack mode is set to production the favicons mode will use a full webapp favicons build.

This behaviour can be adjusted by setting the favicons mode and devMode options.

Custom manifests

The manifest options allows to overwrite values of the generated manifest.webmanifest with own values

const FaviconsWebpackPlugin = require('favicons-webpack-plugin')

plugins: [
  new FaviconsWebpackPlugin({
    logo: './src/logo.png',
    mode: 'webapp',
    manifest: './src/manifest.webmanifest'
  })
]

Compatibility

favicons-webpack-plugin 2.x is compatible with html-webpack-plugin 3.x
favicons-webpack-plugin 3.x - 4.x is compatible with html-webpack-plugin 4.x
favicons-webpack-plugin 5.x - 6.x is compatible with html-webpack-plugin 5.x

Changelog

Take a look at the CHANGELOG.md.

Contribution

You're free to contribute to this project by submitting issues and/or pull requests.

Please keep in mind that every change and new feature should be covered by tests.

License

This project is licensed under MIT.

favicons-webpack-plugin's People

Contributors

a-mishra avatar aldarund avatar andy128k avatar aurel-l avatar benignmop avatar brunocodutra avatar carlhopf avatar chrispickford avatar dependabot[bot] avatar felixvictor avatar greenkeeper[bot] avatar jantimon avatar jaythomas avatar kajyr avatar khalwat avatar kronos93 avatar lucassus avatar michaeldietiker avatar mmaday avatar niandalu avatar nicolas-lescop avatar numical avatar okcoker avatar simon04 avatar simonwep avatar sugarshin avatar uwolfer avatar viamin avatar wclr avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

favicons-webpack-plugin's Issues

emitStats && statsFilename Options don`t work.

Hi.
My config:
new FaviconsWebpackPlugin({ logo: './static/favicon.png', prefix: 'icons-[hash]/', emitStats: false, statsFilename: 'iconstats-[hash].json', persistentCache: true, title: 'Domik', inject: false, icons: { android: true, appleIcon: true, appleStartup: true, coast: false, favicons: true, firefox: true, opengraph: false, twitter: false, yandex: false, windows: false } }),

And option "statsFilename" don`t generate any file.
Option "emitStats" down work and all stats is emitted.

Windows icons are generated but the path is incorrect

Icon mstile-144x144.png is generated under the icon-[hash] directory, however the meta tag inserted in html reads:
<meta name="msapplication-TileImage" content="mstile-144x144.png">

shouldn't the value of content attribute be 'icon-[hash]/mstile-144x144.png'

This is case with browserconfig.xml file as well

Not existing files are included

Seems there is a unnecessary tag includet - there is no file behind, not created. All other favicons work well.

Configuration:

icons: {
  android: false,
  appleIcon: false,
  appleStartup: false,
  coast: false,
  favicons: true,
  firefox: false,
  opengraph: false,
  twitter: false,
  yandex: false,
  windows: false
},

Wrong output?

<link rel="icon" type="image/png" sizes="192x192" href="img/icons-7d5aff4/android-chrome-192x192.png">

Generating multiple favicons

Is there any way to use this plugin to generate multiple favicons? In our case, a different favicon for each entry point is the example usecase (using webpack to generate bundles for a multi-tenant webapp).

A potential API could be something like this:

plugins: [
  new FaviconsWebpackPlugin({
    logo: '[name].png',
    prefix: '[name]/icons',
    ...
]

Is there any way to do this currently / is the additional functionality a possibility?

Installing my-logo.png...

I get the following error when I attempt to include a favicon. Any help or guidance as to what I am doing wrong would be much appreciated. Thanks, Adam Kriger

screen shot 2016-05-18 at 7 16 43 am

This is my webpack.config.js file

const path = require('path');
const merge = require('webpack-merge');
const webpack = require('webpack');
const NpmInstallPlugin = require('npm-install-webpack-plugin');
const TARGET = process.env.npm_lifecycle_event;
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
var favicons = require('favicons'),
    source = 'my-logo.png',           // Source image(s). `string`, `buffer` or array of `{ size: filepath }`
    configuration = {
        appName: null,                  // 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`
        background: "#fff",             // Background colour for flattened icons. `string`
        path: "/",                      // Path for overriding default icons path. `string`
        url: "/",                       // Absolute URL for OpenGraph image. `string`
        display: "standalone",          // Android display: "browser" or "standalone". `string`
        orientation: "portrait",        // Android orientation: "portrait" or "landscape". `string`
        version: "1.0",                 // Your application's version number. `number`
        logging: false,                 // Print logs to console? `boolean`
        online: false,                  // Use RealFaviconGenerator to create favicons? `boolean`
        icons: {
            android: true,              // Create Android homescreen icon. `boolean`
            appleIcon: true,            // Create Apple touch icons. `boolean`
            appleStartup: true,         // Create Apple startup images. `boolean`
            coast: true,                // Create Opera Coast icon. `boolean`
            favicons: true,             // Create regular favicons. `boolean`
            firefox: true,              // Create Firefox OS icons. `boolean`
            opengraph: true,            // Create Facebook OpenGraph image. `boolean`
            twitter: true,              // Create Twitter Summary Card image. `boolean`
            windows: true,              // Create Windows 8 tile icons. `boolean`
            yandex: true                // Create Yandex browser icon. `boolean`
        }
    },
    callback = function (error, response) {
        if (error) {
            console.log(error.status);  // HTTP error code (e.g. `200`) or `null`
            console.log(error.name);    // Error name e.g. "API Error"
            console.log(error.message); // Error description e.g. "An unknown error has occurred"
        }
        console.log(response.images);   // Array of { name: string, contents: <buffer> }
        console.log(response.files);    // Array of { name: string, contents: <string> }
        console.log(response.html);     // Array of strings (html elements)
    };

favicons(source, configuration, callback);
const pkg = require('./package.json');

const PATHS = {
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build')
};

process.env.BABEL_ENV = TARGET;

const common = {
  entry: {
    app: PATHS.app
  },
  // Add resolve.extensions
  // '' is needed to allow imports without an extension
  // note the .'s before the extension as it will fail to load without them
  resolve: {
    extensions: ['', '.js', '.jsx', '.json']
  },
  output: {
    path: PATHS.build,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        // Test expects a RegExp! Notethe slashes!
        test: /\.css$/,
        loaders: ['style', 'css'],
        //Include accepts either a path or an array of paths
        include: PATHS.app

      },
      //set up JSX. This accepts js too thanks to RegExp
      {
      test: /\.(js|jsx)$/,
      //enable caching for improved performance during development
      //It uses default OS directory by default. If you need something more custom,
      //pass a path to it. ie: babel?cacheDirectory=<path>
      loaders: [
        'babel?cacheDirectory,presets[]=es2015'
    ],
      //parse only app files Without this it will go thru the entire project.
      //beside being slow this will likely result in an error
      include: PATHS.app
      }
    ]
  }
};

// Default configuration. We will return this if
// Webpack is called outside of npm.
if(TARGET === 'start' || !TARGET){
  module.exports = merge(common, {
    devtool: 'eval-source-map',
    devServer: {
      contentBase: PATHS.build,

      //enable history API fallback so HTML5 HISTORY API based
      // routing works. This is a good default that will come in handy in more
      // complicated setups.
      historyApiFallback: true,
      hot: true,
      inline: true,
      progress: true,

      //display only errors to reduce output amount
      stats: 'errors only',

      //Parse host and port from env so this is easy to customize
      host: process.env.HOST,
      port: process.env.PORT

},

plugins: [
  new webpack.HotModuleReplacementPlugin(),
  new NpmInstallPlugin({
    save: true //--save
  }),
  new FaviconsWebpackPlugin('my-logo.png')

]
});
}

if(TARGET === 'build' || TARGET === 'stats') {
  module.exports = merge(common, {
    entry: {
      vendor: Object.keys(pkg.dependencies).filter(function(v) {
        return v !== 'alt-utils';
      }),
      style: PATHS.style
    },
    output: {
      path: PATHS.build,
      // Output using entry name
      filename: '[name].[chunkhash].js',
      chunkFilename: '[chunkhash].js'
    },
    module: {
      loaders: [
        // Extract CSS during build
        {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract('style', 'css'),
          include: PATHS.app
        }
      ]
    },
    plugins: [
      // Output extracted CSS to a file
      new ExtractTextPlugin('[name].[chunkhash].css'),
      // Extract vendor and manifest files
      new webpack.optimize.CommonsChunkPlugin({
        names: ['vendor', 'manifest']
      }),
      // Setting DefinePlugin affects React library size!
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': '"production"'
      }),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        }
      })
    ]
  });
}

This is my server.js file:

/* Global Requires */

const express    = require('express');
const logger     = require('morgan');
const bodyParser = require('body-parser');
const path       = require('path');
const app        = express();
const ReactDOM = require('react-dom')
var favicon = require('serve-favicon');


if(process.env.NODE_ENV === 'development') {
  console.log('in development.');
  require('dotenv').config();
} else {
  console.log('in production.');
}

/* App Config */
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, 'build')));
app.use(favicon(__dirname + '/public/favicon.ico'));

app.use(logger('dev'));

/* Server Initialization */
app.get('/', (req, res) => res.sendFile('index.html'));
var port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Server initialized on // ${new Date()}`));

//new configs//

This is my directory structure:

screen shot 2016-05-18 at 7 18 55 am

This is my npm-debug.log

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/6.0.0/bin/node',
1 verbose cli   '/usr/local/bin/npm',
1 verbose cli   'install',
1 verbose cli   'my-logo.png',
1 verbose cli   '--save' ]
2 info using [email protected]
3 info using [email protected]
4 silly loadCurrentTree Starting
5 silly install loadCurrentTree
6 silly install readLocalPackageData
7 silly fetchPackageMetaData my-logo.png
8 silly fetchOtherPackageData my-logo.png
9 silly cache add args [ 'my-logo.png', null ]
10 verbose cache add spec my-logo.png
11 silly cache add parsed spec Result {
11 silly cache add   raw: 'my-logo.png',
11 silly cache add   scope: null,
11 silly cache add   name: null,
11 silly cache add   rawSpec: 'my-logo.png',
11 silly cache add   spec: '/Users/Adam1/react_apps/personal_site/personal_site/my-logo.png',
11 silly cache add   type: 'local' }
12 silly addLocalTarball shasum (computed) 21d582715b3370828356e6c6f6d482b0d1cc340e
13 verbose addTmpTarball /Users/Adam1/react_apps/personal_site/personal_site/my-logo.png not in flight; adding
14 verbose correctMkdir /Users/Adam1/.npm correctMkdir not in flight; initializing
15 verbose addTmpTarball validating metadata from /Users/Adam1/react_apps/personal_site/personal_site/my-logo.png
16 verbose tar unpack /Users/Adam1/react_apps/personal_site/personal_site/my-logo.png
17 verbose tar unpacking to /var/folders/k8/k2_hk13j7v7f_9zl_myvs10h0000gp/T/npm-72014-fa7e1251/unpack-f399a6b0
18 silly gentlyRm /var/folders/k8/k2_hk13j7v7f_9zl_myvs10h0000gp/T/npm-72014-fa7e1251/unpack-f399a6b0 is being purged
19 verbose gentlyRm don't care about contents; nuking /var/folders/k8/k2_hk13j7v7f_9zl_myvs10h0000gp/T/npm-72014-fa7e1251/unpack-f399a6b0
20 silly gunzTarPerm modes [ '755', '644' ]
21 error not a package /Users/Adam1/react_apps/personal_site/personal_site/my-logo.png
22 error addLocal Could not install /Users/Adam1/react_apps/personal_site/personal_site/my-logo.png
23 silly fetchPackageMetaData Error: ENOENT: no such file or directory, open '/var/folders/k8/k2_hk13j7v7f_9zl_myvs10h0000gp/T/npm-72014-fa7e1251/unpack-f399a6b0/package.json'
23 silly fetchPackageMetaData     at Error (native)
23 silly fetchPackageMetaData  error for my-logo.png { Error: ENOENT: no such file or directory, open '/var/folders/k8/k2_hk13j7v7f_9zl_myvs10h0000gp/T/npm-72014-fa7e1251/unpack-f399a6b0/package.json'
23 silly fetchPackageMetaData     at Error (native)
23 silly fetchPackageMetaData   errno: -2,
23 silly fetchPackageMetaData   code: 'ENOENT',
23 silly fetchPackageMetaData   syscall: 'open',
23 silly fetchPackageMetaData   path: '/var/folders/k8/k2_hk13j7v7f_9zl_myvs10h0000gp/T/npm-72014-fa7e1251/unpack-f399a6b0/package.json' }
24 silly rollbackFailedOptional Starting
25 silly rollbackFailedOptional Finishing
26 silly runTopLevelLifecycles Starting
27 silly runTopLevelLifecycles Finishing
28 silly install printInstalled
29 verbose stack Error: ENOENT: no such file or directory, open '/var/folders/k8/k2_hk13j7v7f_9zl_myvs10h0000gp/T/npm-72014-fa7e1251/unpack-f399a6b0/package.json'
29 verbose stack     at Error (native)
30 verbose cwd /Users/Adam1/react_apps/personal_site/personal_site
31 error Darwin 15.4.0
32 error argv "/usr/local/Cellar/node/6.0.0/bin/node" "/usr/local/bin/npm" "install" "my-logo.png" "--save"
33 error node v6.0.0
34 error npm  v3.8.6
35 error path /var/folders/k8/k2_hk13j7v7f_9zl_myvs10h0000gp/T/npm-72014-fa7e1251/unpack-f399a6b0/package.json
36 error code ENOENT
37 error errno -2
38 error syscall open
39 error enoent ENOENT: no such file or directory, open '/var/folders/k8/k2_hk13j7v7f_9zl_myvs10h0000gp/T/npm-72014-fa7e1251/unpack-f399a6b0/package.json'
40 error enoent ENOENT: no such file or directory, open '/var/folders/k8/k2_hk13j7v7f_9zl_myvs10h0000gp/T/npm-72014-fa7e1251/unpack-f399a6b0/package.json'
40 error enoent This is most likely not a problem with npm itself
40 error enoent and is related to npm not being able to find a file.
41 verbose exit [ -2, true ]

Error: w and h must be numbers (at Jimp.throwError ?)

I'm getting this error trying to build with webpack. It seems to be happening sometime shortly after favicons-webpack-plugin/lib/loader.js:96 -> generateIcons() but I'm having trouble tracking it down.

Error: w and h must be numbers
    at Jimp.throwError (/Users/[user]/[project]/node_modules/jimp/index.js:82:43)
    at Jimp.contain (/Users/[user]/[project]/node_modules/jimp/index.js:1751:27)
    at Object.resize (/Users/[user]/[project]/node_modules/favicons/helpers-es5.js:221:27)
    at /Users/[user]/[project]/node_modules/favicons/es5.js:60:41
    at fn (/Users/[user]/[project]/node_modules/async/lib/async.js:746:34)
    at /Users/[user]/[project]/node_modules/async/lib/async.js:1213:16
    at /Users/[user]/[project]/node_modules/async/lib/async.js:166:37
    at /Users/[user]/[project]/node_modules/async/lib/async.js:706:43
    at /Users/[user]/[project]/node_modules/async/lib/async.js:167:37
    at Jimp.<anonymous> (/Users/[user]/[project]/node_modules/async/lib/async.js:1209:30)
    at /Users/[user]/[project]/node_modules/jimp/index.js:289:27
    at .<anonymous> (/Users/[user]/[project]/node_modules/pngjs/lib/png.js:74:7)
    at g (events.js:286:16)
    at emitOne (events.js:96:13)
    at emit (events.js:188:7)
    at .<anonymous> (/Users/[user]/[project]/node_modules/pngjs/lib/png.js:36:10)

Tried with nodejs 6.2 & 6.4.

My webpack config isn't doing anything crazy -

{
...
plugins: [
    new FaviconsWebpackPlugin(PATHS.favicon),
    new HtmlWebpackPlugin({
      title: "Project A"
    }),
  ]
...
}

Funny thing is I wrote this project on another machine (also a Macbook running same dev environment) and only having this problem when I tried building on my other Macbook. I can't identify any differences between the two that might be causing something like this to happen. I'm obviously missing something.

Any insight into what might be causing this? Thanks.

[hash] in publicPath does not get replaced

I have the following web pack config, since I am deploying to a CDN I want each new build to go in a new directory named with the build hash. when I create a new build I end up with the following path for the icons

...
output = {
        publicPath: '[hash]/', // Set the public path to the current build hash
        path: 'public/' + ENV + '/[hash]/',  
        filename: '[name].js',  
        chunkFilename: '[id].js'
 } // full file attached
...

`

` // the childCompilation hash gets applied correctly, but the **main hash does not**

I used to have the same problem with the html webpack plugin, I tried to apply the same solution that fixed it for the html webpack plugin jantimon/html-webpack-plugin@41a255a but I could not get it to work, I always got stuck with this error Path variable [hash] not implemented in this context: [hash]/ , doing some console log revealed that the compilation object does not have a hash at the point where the favicon plugin does something with the public path, Line 11 in compiler.js & Line 40 in favicon.js. Any suggestions on how to fix this?

webpack.config.js.zip

Optimize Images

I noticed that image-webpack-loader doesn't touch the files this plugin produces, is there any way to optimize them to compress them a bit?

Icon generation fails for a background color of #03a9f4

Icon generation fails silently when the background is set to #03a9f4 (material design light blue 500)

Slight modifications make it work, but the exact above color code causes icon generation to fail. (Tested using webpack dev server).

No errors or warnings are logged whatsoever. Making a GET request to the icons causes a 404.

Exclamation mark in title

It is currently not possible to have an exclamation mark in the title.
I didn't spend much time trying to figure out why, but I assume it is because of this.

My application is named "osu!stats" so not being able to use an exclamation mark is kind of a big problem for me.

manifest should be included into html

manifest is generated (but the truth is - most of parameters are not applicable) but not included into header also browserconfig.xml is generated and included into html but has wrong path
(for cache bursting I generate icons into folder name like 'icons-[hash:5]' every icon is linked to that directory but browserconfig.xml - is not)

Favicons generates unwanted color-theme meta

I notted that adding new FaviconsWebpackPlugin(PATHS.statics + '\\ashojash.png') to plugins,
besides adding fav icons, adds theme-color meta attribute to generated html-webpack-plugin file with the default value of #fff.
Is this a desired outcome? And How can I change that?

Unexpected token '='

Hey,

Currently having an issue with favicons-webpack-plugin via the favicons package.

Here's my error;

SyntaxError: Unexpected token =
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (C:\...\node_modules\favicons-webpack-plugin\node_modules\favicons\helpers-es5.js:18:15)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (C:\...\node_modules\favicons-webpack-plugin\node_modules\favicons\es5.js:11:15)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (C:\...\node_modules\favicons-webpack-plugin\lib\favicons.js:3:16)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at DependenciesBlock.loadPitch (...\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:193:17)
    at DependenciesBlock.doBuild (...\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:241:4)

However, I can't see why it's happening, as helpers-es5.js:18 is this line

var path = require('path'),
    fs = require('fs'),
    _ = require('underscore'),
    color = require('tinycolor2'),
    cheerio = require('cheerio'),
    colors = require('colors'),
    jsonxml = require('jsontoxml'),
    sizeOf = require('image-size'),
    async = require('async'),
    mkdirp = require('mkdirp'),
    Jimp = require('jimp'),
    svg2png = require('svg2png'),
    File = require('vinyl'),
    Reflect = require('harmony-reflect'),
    NRC = require('node-rest-client').Client,
    PLATFORM_OPTIONS = require('./config/platform-options.json');

I can't build on Windows, or Heroku, but OS X seems to build fine.

Config for an output directory.

I wanted to direct all the output files into a directory named favicons but couldn't find the config option to do that. Have I missed something?
Edit: I missed that the prefix config would allow for a path to be defined. Maybe a separate output config option might be a nice addition.

Problem scaling icons

There's a problem downscaling the original graphic:

screen shot 2017-03-21 at 14 29 55

Where does the outline come from? The original 1500x1500 png is free of any artifacts.

Error: w and h must be numbers

at Jimp.throwError (/srv/filestore/service/ccloud_front/20160821154947/node_modules/jimp/index.js:82:43)
at Jimp.contain (/srv/filestore/service/ccloud_front/20160821154947/node_modules/jimp/index.js:1751:27)
at Object.resize (/srv/filestore/service/ccloud_front/20160821154947/node_modules/favicons/helpers-es5.js:221:27)
at /srv/filestore/service/ccloud_front/20160821154947/node_modules/favicons/es5.js:60:41
at fn (/srv/filestore/service/ccloud_front/20160821154947/node_modules/async/lib/async.js:746:34)
at /srv/filestore/service/ccloud_front/20160821154947/node_modules/async/lib/async.js:1213:16
at /srv/filestore/service/ccloud_front/20160821154947/node_modules/async/lib/async.js:166:37
at /srv/filestore/service/ccloud_front/20160821154947/node_modules/async/lib/async.js:706:43
at /srv/filestore/service/ccloud_front/20160821154947/node_modules/async/lib/async.js:167:37
at Jimp. (/srv/filestore/service/ccloud_front/20160821154947/node_modules/async/lib/async.js:1209:30)
at /srv/filestore/service/ccloud_front/20160821154947/node_modules/jimp/index.js:289:27
at null. (/srv/filestore/service/ccloud_front/20160821154947/node_modules/pngjs/lib/png.js:74:7)
at g (events.js:273:16)
at emitOne (events.js:90:13)
at emit (events.js:182:7)
at null. (/srv/filestore/service/ccloud_front/20160821154947/node_modules/pngjs/lib/png.js:36:10)
at emitOne (events.js:90:13)
at emit (events.js:182:7)
at ParserAsync._complete (/srv/filestore/service/ccloud_front/20160821154947/node_modules/pngjs/lib/parser-async.js:109:8)
at emitOne (events.js:90:13)
at emit (events.js:182:7)
at _filter.Filter.complete (/srv/filestore/service/ccloud_front/20160821154947/node_modules/pngjs/lib/filter-parse-async.js:19:12)
at Filter._reverseFilterLine (/srv/filestore/service/ccloud_front/20160821154947/node_modules/pngjs/lib/filter-parse.js:169:10)
at ChunkStream._processRead (/srv/filestore/service/ccloud_front/20160821154947/node_modules/pngjs/lib/chunkstream.js:174:13)
at ChunkStream._process (/srv/filestore/service/ccloud_front/20160821154947/node_modules/pngjs/lib/chunkstream.js:193:14)
at ChunkStream.write (/srv/filestore/service/ccloud_front/20160821154947/node_modules/pngjs/lib/chunkstream.js:61:8)
at Inflate.ondata (_stream_readable.js:536:20)
at emitOne (events.js:90:13)
at Inflate.emit (events.js:182:7)
at readableAddChunk (_stream_readable.js:153:18)

npm ERR! Linux 3.13.0-24-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v5.10.1
npm ERR! npm v3.8.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: webpack --config webpack.config.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script 'webpack --config webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ccloud package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack --config webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs ccloud
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls ccloud
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /srv/filestore/service/ccloud_front/20160821154947/npm-debug.log

and i edit the file node_modules/favicons-webpack-plugin/lib/loader.js

var favicons = require('favicons/es5'); to var favicons = require('favicons');

this error is gone!

Does not support Windows 10 Tiles

Here's a sample

    <meta name="msapplication-TileImage" content="assets/logo-144x144.png" />
    <meta name="msapplication-TileColor" content="#216978" />

Hang while bundle building

How can I diagnose this? The CPU just sits and spins after the 'content is served from (path)' message.

My code:
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
and in the plugins array:
new FaviconsWebpackPlugin('favicon.png'),

If I remove the plugin, things work just fine.

I am using HtmlWebpackPlugin and some others (extract text for css, commons chunk, define).

File regenerated on every build with persistentCache:true

My config:

new FaviconsWebpackPlugin({
    logo: './path/to/logo.png',
    prefix: "path/to/output/dir/",
    emitStats: true,
    statsFilename: 'iconstats-[hash].json',
    persistentCache: true,
    background: '#fff',
    title: 'My Title'
})

In path/to/output/dir, I see a .cache file, and it contains hash and outputHash, suggesting that persistentCache: true is functioning correctly. However, the output files are always regenerated on every webpack build, even when my logo file doesn't change. The hash and outputHash values don't appear to change between builds.

NPM is out of date

I just installed from npm and got v0.0.6, however it doesn't include #13 which fixes the icon placement, so they are all still at the top of the head instead of the bottom. Please update, thanks.

Some feedback

  • Missing <link rel="manifest" href="/path/to/manifest.json"> in html output.
  • Missing <link rel="yandex-tableau-widget" href="/path/to/yandex-browser-manifest.json"> in html output.
  • msapplication-TileImage, msapplication-config, twitter:image, og:image wrong path.
  • Can you support absolute URL for OpenGraph, Twitter image ?

My config:

new FaviconsWebpackPlugin({
      logo: path.join(__dirname, 'app/assets/images/favicon.png'),
      //prefix: 'favicons/',
      persistentCache: true,
      inject: true,
      icons: {
        android: true,
        appleIcon: true,
        appleStartup: true,
        coast: true,
        favicons: true,
        firefox: true,
        opengraph: true,
        twitter: true,
        yandex: true,
        windows: true
      }
    })
``

`logo` key doesn't support data URIs

webpack 2.2.0
favicons-webpack-plugin 0.0.7

Similar to this issue here, I'm unable to use a data URI for a favicon image. The error below is what is given when trying to do so.

EntryModuleNotFoundError: Entry module not found: Error: Can't resolve 'data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=' in '/fake/project/path'

Firefox favicon won't show

http://alchademy.com/

Webpack config:

    plugins: [
        new FaviconsWebpackPlugin({
            logo: './src/img/favicon.png',
            background: '#917ccd',
            emitStats: true,
            title: 'Alchademy',
        }),
    ]

Output:

<link rel="apple-touch-icon" sizes="57x57" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-icon-180x180.png">
<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="Alchademy">
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#917ccd">
<meta name="application-name" content="Alchademy">
<link rel="icon" type="image/png" sizes="32x32" href="/icons-0d96ba485ed162aee98c522b488cb9b6/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/icons-0d96ba485ed162aee98c522b488cb9b6/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons-0d96ba485ed162aee98c522b488cb9b6/favicon-16x16.png">
<link rel="shortcut icon" href="/icons-0d96ba485ed162aee98c522b488cb9b6/favicon.ico">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-startup-image-320x460.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-startup-image-640x920.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-startup-image-640x1096.png">
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-startup-image-750x1294.png">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-startup-image-1182x2208.png">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-startup-image-1242x2148.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-startup-image-748x1024.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-startup-image-768x1004.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="/icons-0d96ba485ed162aee98c522b488cb9b6/apple-touch-startup-image-1496x2048.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-0d96ba485ed162aee98c522b488cb9b6/apple-touch-startup-image-1536x2008.png">
<link href="/main-f71c74124957b0df3e4e.min.css?f71c74124957b0df3e4e" rel="stylesheet">

Icons not generated

Hi there,

I'm trying to generate the favicons without injecting them via the HMTL plugin.
I was using the following code in my dev config:

new faviconPlugin({ logo: path.resolve(__dirname, '..', 'app', 'client', 'favicon.png'), prefix: path.resolve(__dirname, '..', 'build', 'client') + '/', inject: false })

Although the paths are correct and my terminal says they're generated the icons do not show up. See this image example from the terminal:
https://s17.postimg.org/nuwg7ytsv/example.png

Anyone knows what can be the issue?

Generated Images are flipped

Hi there,

I just saw some of my generated icons files are flipped but also has a line on the left side. My source file is a square image.

See example images :

  • apple-touch-startup-image-1496x2048.png
    apple-touch-startup-image-1496x2048
  • apple-touch-startup-image-1182x2208.png
    apple-touch-startup-image-1182x2208
  • apple-touch-startup-image-748x1024.png
    apple-touch-startup-image-748x1024

Do you also encounter this bug ?
favicons 4.8.3
node v6.2.1

Thanks for helping

using with html-webpack-plugin

In readme you did mention that this plugin can work with html-webpack-plugin to inject all generated icons, unfortunately I can't make it work and can't find any example of how html-webpack-plugin configuration should look to work together.
Can you provide an example of minimal webpack.config.js?

options.logo as a buffer.

If favicons supports it, why not support it here? ( It's handy to me since I'm converting my original svg source to png. )

Append to <head>, not prepend

Currently, it seems the links are prepended inside the tag. This is forcing my down, causing "the character encoding declaration of the HTML document was not found when prescanning the first 1024 bytes of the file" error in Firefox. Could the plugin please append after existing tags instead?

Generate root favicon

We should also copy favicon.ico directly into the output directory, so browsers that auto-request favicon.ico (e.g. for images) will get a real favicon back!

Full use example?

Sorry if I'm being dense, but I don't see how this is actually useful if you don't use the html-webpack-plugin?

Yes, it bounces 32 different icons to a directory called icons-[hash], but how do we then use these favicons? I'm rendering out my page via React server-side, and I can't really connect the dots. A full example would be helpful. Cheers.

Improve manifest.json and include in injected code

Rigth now the injected code is minified in a single line, for humans is dificult to read and understand, also are missing tags for manifest.json and manifest.webapp

<link rel="icon" type="image/png" sizes="192x192" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/android-chrome-192x192.png"><meta name="mobile-web-app-capable" content="yes"><meta name="theme-color" content="#fff"><meta name="application-name" content="Calculator App"><link rel="apple-touch-icon" sizes="57x57" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-icon-180x180.png"><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="Calculator App"><link rel="icon" type="image/png" sizes="16x16" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/favicon-16x16.png"><link rel="icon" type="image/png" sizes="32x32" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/favicon-32x32.png"><link rel="icon" type="image/png" sizes="96x96" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/favicon-96x96.png"><link rel="icon" type="image/png" sizes="230x230" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/favicon-230x230.png"><link rel="shortcut icon" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/favicon.ico"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-startup-image-320x460.png"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-startup-image-640x920.png"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-startup-image-640x1096.png"><link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-startup-image-750x1294.png"><link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-startup-image-1182x2208.png"><link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-startup-image-1242x2148.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-startup-image-748x1024.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-startup-image-768x1004.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-startup-image-1496x2048.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="/calculator/icons-a97ba43996dcf645b0fde503f0b9d094/apple-touch-startup-image-1536x2008.png">

Wrong links injected

My config:

new FaviconsWebpackPlugin({
      logo: './logo.png',
      inject: true,
      emitStats: false,
      persistentCache: false,
      prefix: '[sha512:hash:base64:7]/',
      icons: {
        favicons: true,
        android: false,
        appleIcon: false,
        appleStartup: false,
        coast: false,
        firefox: false,
        opengraph: false,
        twitter: false,
        yandex: false,
        windows: false
      }
    })

Results:

                          Asset       Size  Chunks             Chunk Names
      22tAIdo/favicon-16x16.png  443 bytes          [emitted]
      22tAIdo/favicon-32x32.png  894 bytes          [emitted]
      22tAIdo/favicon-96x96.png    2.65 kB          [emitted]
    22tAIdo/favicon-230x230.png    7.24 kB          [emitted]
            22tAIdo/favicon.ico    33.3 kB          [emitted]

Html produced:

<link href="/22tAIdo/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
<link href="/22tAIdo/android-chrome-192x192.png" rel="icon" sizes="192x192" type="image/png">
<link href="/22tAIdo/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
<link href="/22tAIdo/favicon.ico" rel="shortcut icon">

Bug:
android-chrome-192x192 should not be there
favicon-230x230 and favicon-96x96 are missing

Changing cache directory path

Hi and thanks for this plugin!
I'd like to change the path of cache directory (other than output path) but I did not see how to do this with settings. Is there another way ?

Adjust filename URLs

I use react router, and if my visit my route it tries to access the favicons below route:
/myroute/mysubroute/file.png.
But if course the files are in the root...the webpack entries file correctly obeys publicPathoption, prefixing all paths with publicPath.

Broken tests

Since this commit webpack/webpack@2596b32 webpack uses different footer for generated files. It causes size mismatch in the comparator const compareOptions = {compareSize: true};

SyntaxError: Unexpected token \ in compiler.js

I got an error while running webpack. The cause of error seems to be JSON.parse(childCompilation.assets[outputName].source()) in the compiler.js.

webpack.config.js:

    var FaviconsWebpackPlugin = require('favicons-webpack-plugin');
    ...
    plugins: [
      ...
      new FaviconsWebpackPlugin('./client/assets/favicon.png')
    ]

Log:

/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/webpack-core/lib/NormalModuleMixin.js:151
                                throw e;
                                ^

SyntaxError: Unexpected token \
    at Object.parse (native)
    at /Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/favicons-webpack-plugin/lib/compiler.js:83:23
    at Compiler.<anonymous> (/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/webpack/lib/Compiler.js:214:10)
    at /Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/webpack/lib/Compiler.js:403:12
    at Compiler.next (/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/tapable/lib/Tapable.js:67:11)
    at Compiler.<anonymous> (/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/webpack/lib/CachePlugin.js:40:4)
    at Compiler.applyPluginsAsync (/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/tapable/lib/Tapable.js:71:13)
    at Compiler.<anonymous> (/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/webpack/lib/Compiler.js:400:9)
    at Compilation.<anonymous> (/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/webpack/lib/Compilation.js:577:13)
    at Compilation.applyPluginsAsync (/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/tapable/lib/Tapable.js:60:69)
    at Compilation.<anonymous> (/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/webpack/lib/Compilation.js:572:10)
    at Compilation.next (/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/tapable/lib/Tapable.js:67:11)
    at Compilation.<anonymous> (/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/favicons-webpack-plugin/lib/compiler.js:57:7)
    at Compilation.applyPluginsAsync (/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/tapable/lib/Tapable.js:71:13)
    at Compilation.<anonymous> (/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/webpack/lib/Compilation.js:567:9)
    at Compilation.applyPluginsAsync (/Users/lvarayut/Documents/Web development/Projects/relay-fullstack/node_modules/tapable/lib/Tapable.js:60:69)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.