How can I replace the default favicon in an slc loopback generated webapp?

Question

I have generated an app using slc loopback command. So the generated express webapp has its strongloop favicon. How can I change the favicon?

I am using this in server.js

app.use(loopback.favicon(path.resolve(__dirname, '../client/favicon.ico')));

I also tried with html link tag, but still default is loading.

What am I doing wrong?

Answer 1

Set the path to your custom favicon in the server/middleware.json:

{
  "initial:before": {
    "loopback#favicon": {
      "params": "path/to/your/favicon.ico"
    }
  },
  …

We had problems setting the paths just in the HTML, on some reloads the default StrongLoop favicon was still popping up. This configuration helped.

PS: If your favicon.ico is in the root of the client directory, use this path: "$!../client/favicon.ico"

Answer 2

Some browsers aggressively cache favicons. Try navigating to <yourhost>/favicon.ico and see if it shows the correct file, to make sure it isn't a client-side cache issue.

Answer 3

The default favicon is configured in server/middleware.json:

{
  "initial:before": {
    "loopback#favicon": {}
  },

Please note it's in the initial:before phase which comes before routes phase (app.use). You should modify server/middleware.json for your purpose.