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!!!