Webpack Dev Server - favicon not showing on localhost but works on external URL

Question

I have a strange problem, I was wondering if anyone has experienced this. I have webpack in my app to bundle, serve and everything in between. I have noticed that when I compile and run webpack-devserver from my gulp file everything goes as expected and in my terminal I get the following:

webpack: Compiled successfully.

2017-11-30T11:46:05.288Z - error: 
[Browsersync] Proxying: http://localhost:3001
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3002
    External: http://10.101.51.117:3002
 --------------------------------------
          UI: http://localhost:3003
 UI External: http://10.101.51.117:3003
 --------------------------------------

Now when I access my app via 'localhost' no Favicon is shown in the browser tab for that page, there is no 404 in the console and there is no request for the favicon in the Developer Tools Network Tab? Now should I use the external URL and type http://10.101.51.117:3002 into the browser the Favicon is there in the page tab however there is no request for the favicon in the Developer Tools Network Tab.

Now when I make a direct call in the browser to the favicon to http://localhost:3002/assets/favicon.ico the favicon is served in the browser window so it seems like server is bundling the Favicon?

In my HTML I have the tag <link rel="shortcut icon" href="assets/favicon.ico"> nothing strange there and in my webpack.common.js file I have the following (I have removed some items here for simplicity)

module.exports = {
  // lots of things here..
  module: {
    rules: [
    // stuff here has been removed
      {
        test: /\.html$/,
        use: 'html-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot)$/,
        use: 'file-loader?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.(ico)$/,
        use: 'file-loader?name=assets/[name].[ext]'
      },

I can't think what or why the favicon isn't being shown in the tab when I use the localhost URL? If anyone has experienced this and resolved the issue and advice would be appreciated.

Please note that the Favicon is not cached from before as I have changed the favicon name, location and I cleared the browser cache.

Gadmon

Answer 1

If you are using HtmlWebpackPlugin then you can include favicon: './src/assets/favicon.ico', property there.

  plugins: [
    new HtmlWebpackPlugin({
      template: './src/template.html',
      favicon: './src/assets/favicon.ico',
      filename: './index.html',
    }),
  ],

BTW - starting from Chrome 80 you can use favicon.svg favicons as well.

Tace

Answer 2

Apparently your favicon should work but doesn't. Two things you may want to try:

• Favicon caching is VERY nasty. I suggest you to test your favicon with a browser you normally don't use (so it didn't cache your icon).
• Run the favicon checker. As your site is hosted locally, you will have to use ngrok to make is accessible from outside.

Disclosure: I'm the author of RealFaviconGenerator

Blunt

Answer 3

I would use the file loader like this:

Install the package

 npm i --save-dev file-loader

Then add the following to your webpack config (default webpack.config.js)

{
    test: /\.(png|svg|jpg|gif|ico)$/,
    use: ['file-loader?name=[name].[ext]']
}

This should move the files to your dist folder.

Isometrics

Answer 4

How about copying favicon.ico by using copy-webpack-plugin.

// File: webpack.config.js

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  ...
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: "favicon.ico" },
      ],
    }),
  ]
}

Don't forget to reload browser page ignoring caches.

Fremantle

Answer 5

Opening in local host uses development server. Try changing the port of the devServer. Mine worked when I changed it from 5000 to 8080.

module.exports = {
    devServer: {
        static: {
          directory: path.join(__dirname, 'dist'),
        },
        historyApiFallback: true,
        allowedHosts: [
          'all'
        ],
        port: 8080,
      },
};

In my case, the possible reason is that the port 5000 might have been in use by another process. What I can think of is because I am developing Flask applications as well which the default port is 5000.

Marte