How to add favicon to /dist?

[jforaker]

Seems trivial but is difficult. How to add a favicon.ico to the npm run build task?

[coryhouse]

Great question. Follow the same pattern used by tools/buildHTML. Just copy the file from the root of /src to the root of /dist

[coryhouse]

Ah, multiple ways to do that, but here's an easy way with Node: http://stackoverflow.com/questions/11293857/fastest-way-to-copy-file-in-node-js

[jforaker]

Hmm that is one way. Here's how I did it in case anyone lands on this thread:

1. require my favicon in my main App.js entry file
   require('../assets/images/favicon.ico')

2. Added a loader configuration that does not scramble the image file names in the build task (per this thread Not able to bundle favicon.ico into build folder webpack/webpack#1336 (comment))

         {
             test: /\.jpe?g$|\.ico$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$/,
             loader: 'file-loader?name=[name].[ext]'  // <-- retain original file name
         }
   

3. Add the standard <link rel="shortcut icon" href="favicon.ico"> in src/index.html

Now npm run build will output the image/assets names as their original name, hence giving you the ability to href="favicon.ico" right in your index.html

[coryhouse]

Nice! That solution is clearly better than my idea. :) I just tried adding this to Slingshot, but I'm getting an error. Would you be willing to submit a pull request? The only change I'd suggest from your snippet is to write a specific test for only the .ico file so that other filetypes can continue to be handled separately.

[jforaker]

Sure --> #129 😄 . Added specific test as you mentioned: https://github.com/coryhouse/react-slingshot/pull/129/files#diff-b83f3305d04bb1c8d674be30b5f9e1efR32 Tested and works well.

[chookie]

If anyone is having trouble now I followed as per @jforaker but changed slightly for ejs and es6 import.

Add your favicon.ico to wherever, in my case in src/images

In index.js
import './images/favicon.ico';

In webpack.config.*.js files

new HtmlWebpackPlugin({   
    favicon: 'src/images/favicon.ico'

and
{test: /\.(jpe?g|png|gif|ico)$/i, loader: 'file?name=[name].[ext]'},

[ryangpts]

I only needed this:

In webpack.config.*.js files

new HtmlWebpackPlugin({   
    favicon: 'src/images/favicon.ico'

[mikedevita]

@ryangpts thanks, this is what I needed as well...

[LiamKlyneker]

@ryangpts legend!!!

[StamatisDeli]

my favicon is in png format. it makes sense that it would work, but it's not

[nickytonline]

png should be supported. Please see https://www.w3.org/2005/10/howto-favicon @StamatisDeli.

[StamatisDeli]

@nickytonline I had to do this in plugins:
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html",
favicon: './src/images/favicon-16x16.png'
}),

[croraf]

my favicon is in png format. it makes sense that it would work, but it's not

It does work in png!

[js2me]

Works for me

   {
        test: /\.html$/,
        loader: 'html-loader',
        options: {
          attrs: [':data-image', ':src', 'link:href'],
        },
      },
      {
        test: /\.(png|jpg|jpeg|svg)$/,
        use: 'file-loader?name=[hash:base64:7].[ext]',
      },
      {
        test: /favicon\.png$/,
        use: 'file-loader?name=[name].[ext]',
      },

[Jackieriel]

You still do it manually
after build simply copy your favicon to dist/static/img then edit dist/index.html
simply include the favicon tag.

this works perfectly for me

[lucassalazar]

If u are using the hash to name the file, and using the <link/> tag to add a static favicon. Here is another solution:

In index.js
import './images/favicon.png';

In webpack.config.*.js files

            {
                test: /\.(svg|png|jpg|gif)$/,
                use: {
                    loader: "file-loader",
                    options: {
                        name (resourcePath) {
                            if (/favicon/.test(resourcePath)) {
                                return "[name].[ext]";
                            } else {
                                return "[name].[hash].[ext]";
                            }
                        },
                        publicPath: "images",
                        outputPath: "images"
                    }
                }
            },

[PerezCode]

Year 2021, that's how it worked for me:

This is the directory of my app

• First I added <link rel="shortcut icon" href="./favicon.png" type="image/png" /> to my index.html.
• Second, I added the following code line to my webpack.config.js and webpack.config.dev.js