How do I add a favicon to Single Spa?

Question

I've spent some time trying to find a way to add a favicon to Single Spa application, believe it or not :). I couldn't find anything in the framework documentation. There are bits and pieces about static assets but it didn't really help me much. I eventually realised it's to do with the Webpack configuration. See my answer below.

Answer 1

For those who are still struggling here is the easiest and most elegant way I've found. HtmlWebpackPlugin solves this by providing a favicon property. Documentation can be found here. If you are using Sing Spa 5.x the HtmlWebpackPlugin plugin is already a dependency. Simply update parameters the root-config application webpack.config.js file with the following. Path is relative to the webpack.config.js directory.

new HtmlWebpackPlugin({
    favicon: "./[path-to-your-file]/favicon.ico"
})

Then add the following line in your index.ejs file head section.

<link rel="icon" type="image/x-icon" href="favicon.ico">

Clear your browser cache and you should be good to go.