I've got a React/Redux app and I'm using webpack to transpile my JSX and ES6 and load my stylesheets and images into my JS. My dev server is hosted on port 3000.

Here's my webpack.config.js:

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './src/js'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
      favicon: 'src/images/favicon.ico'
    })
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: [ 'babel' ],
      exclude: /node_modules/,
      include: __dirname
    }, {
      test: /\.less?$/,
      loaders: [ 'style', 'css', 'less' ],
      include: __dirname
    },
    {
      test: /\.(otf|eot|svg|ttf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loaders: [ 'url' ],
      include: __dirname
    },
    {
      test: /\.(png|ico|gif)?$/,
      loaders: [ 'file' ],
      include: __dirname
    }]
  }
};

When I hit localhost:3000, everything that I would expect to be there is there, except my favicon. If I go to localhost:3000/static/favicon.ico, my favicon is there. Could use some expertise debugging this issue.

I've got a React/Redux app and I'm using webpack to transpile my JSX and ES6 and load my stylesheets and images into my JS. My dev server is hosted on port 3000.

Here's my webpack.config.js:

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './src/js'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
      favicon: 'src/images/favicon.ico'
    })
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: [ 'babel' ],
      exclude: /node_modules/,
      include: __dirname
    }, {
      test: /\.less?$/,
      loaders: [ 'style', 'css', 'less' ],
      include: __dirname
    },
    {
      test: /\.(otf|eot|svg|ttf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loaders: [ 'url' ],
      include: __dirname
    },
    {
      test: /\.(png|ico|gif)?$/,
      loaders: [ 'file' ],
      include: __dirname
    }]
  }
};

When I hit localhost:3000, everything that I would expect to be there is there, except my favicon. If I go to localhost:3000/static/favicon.ico, my favicon is there. Could use some expertise debugging this issue.

• javascript
• html
• frontend
• webpack
• favicon

• What do you see at localhost:3000/favicon.ico? That's where the browser looks for it... – Alex McMillan Commented Feb 17, 2016 at 2:50
• 404, but I also point to /static/favicon.ico in my index.html. <link rel="shortcut icon" href="/static/favicon.ico" "image/x-icon" /> – Jimmy Gong Commented Feb 17, 2016 at 17:55
• I now see it at localhost:3000/favicon.ico by using the 'serve-favicon' middleware for my express web server, but still no luck even after clearing my cache and changing my link tag in index.html to <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> – Jimmy Gong Commented Feb 17, 2016 at 18:21
• Interesting... is this all browsers? Perhaps drop the leading / to make it a relative path? To quote MDN: "The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore." - perhaps try the standards-pliant <link rel="icon" href="favicon.ico" />, or remove it altogether as that represents default behaviour anyway. – Alex McMillan Commented Feb 17, 2016 at 18:42
• 2 I have exactly same issue with webpack-dev-server ;( – ulfryk Commented May 12, 2016 at 8:39

1 Answer 1

The browser will look for your favicon in localhost:3000/favicon.ico, so that's where it needs to be. Try rewriting the url to serve favicon.ico for the /favicon.ico route. For example, if you're using historyApiFallback, do:

historyApiFallback: {
    rewrites: [
        // shows favicon
        { from: /favicon.ico/, to: '[path/to/favicon]' }
    ]
}