2

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.

CyberRobot
  • 686
  • 9
  • 20

1 Answers1

5

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.

CyberRobot
  • 686
  • 9
  • 20
  • 1
    Great catch! Exactly what I was looking for. For me the link tag needed a slash in front of the favicon. `` – Stefanie May 10 '22 at 09:47
  • 1
    @Stefanie Glad it helped. It depends on where your favicon.ico file is located in the file system. I guess in your case the file was in the root. – CyberRobot May 10 '22 at 15:11
  • I did not need to change the `index.ejs` file in order for it to work. Thanks. – alansiqueira27 Feb 24 '23 at 11:22