Load favicon through html-loader.

Fixes facebook#291.
andreypopp · Aug 12, 2016 · 9c21c40 · 9c21c40
1 parent 25a0b66
commit 9c21c40
Show file tree

Hide file tree

Showing 5 changed files with 3 additions and 7 deletions.
diff --git a/config/paths.js b/config/paths.js
@@ -36,7 +36,6 @@ if (isInCreateReactAppSource) {
  module.exports = {
  appBuild: resolveOwn('../build'),
  appHtml: resolveOwn('../template/index.html'),
- appFavicon: resolveOwn('../template/favicon.ico'),
  appPackageJson: resolveOwn('../package.json'),
  appSrc: resolveOwn('../template/src'),
  appNodeModules: resolveOwn('../node_modules'),
@@ -47,7 +46,6 @@ if (isInCreateReactAppSource) {
  module.exports = {
  appBuild: resolveApp('build'),
  appHtml: resolveApp('index.html'),
- appFavicon: resolveApp('favicon.ico'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  appNodeModules: resolveApp('node_modules'),
@@ -59,7 +57,6 @@ if (isInCreateReactAppSource) {
  module.exports = {
  appBuild: resolveApp('build'),
  appHtml: resolveApp('index.html'),
- appFavicon: resolveApp('favicon.ico'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  appNodeModules: resolveApp('node_modules'),

diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
@@ -126,7 +126,7 @@ module.exports = {
  // When you `import` an asset, you get its (virtual) filename.
  // In production, they would get copied to the `build` folder.
  {
- test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
+ test: /\.(ico|jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
  include: [paths.appSrc, paths.appNodeModules],
  loader: 'file',
  query: {
@@ -169,7 +169,6 @@ module.exports = {
  new HtmlWebpackPlugin({
  inject: true,
  template: paths.appHtml,
- favicon: paths.appFavicon,
  }),
  // Makes some environment variables available to the JS code, for example:
  // if (process.env.NODE_ENV === 'development') { ... }. See `env.js`.

diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
@@ -136,7 +136,7 @@ module.exports = {
  {
  // "file" loader makes sure those assets end up in the `build` folder.
  // When you `import` an asset, you get its filename.
- test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
+ test: /\.(ico|jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
  include: [paths.appSrc, paths.appNodeModules],
  loader: 'file',
  query: {
@@ -181,7 +181,6 @@ module.exports = {
  new HtmlWebpackPlugin({
  inject: true,
  template: paths.appHtml,
- favicon: paths.appFavicon,
  minify: {
  removeComments: true,
  collapseWhitespace: true,

diff --git a/template/index.html b/template/index.html
@@ -3,6 +3,7 @@
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="shortcut icon" href="${require('./src/favicon.ico')}">
  <title>React App</title>
  </head>
  <body>

diff --git a/template/favicon.ico → template/src/favicon.ico b/template/favicon.ico → template/src/favicon.ico