How to add favicon for Content-Type: application/json

I am using node.js and implementing an API that returns a response as Content-Type: application/json like this:

module.exports={
    api: (req, res) => {
        let data = {"data": [1, 2, 3]};
        res.status(200).json(data);
    }
}

But, there is no favicon that can be viewed when trying that API on the browser. I see another website that can get this done.

How can add a favicon on the Node.js API with Content-Type: application/json?

Can't believe people are suggesting some package for this simple operation.

All browsers request /favicon.ico looking for favicon so you have to respond to this request.

app.get('/favicon.ico', (req, res) => {
  res.sendFile(path.join(__dirname, 'assets/favicon.ico'))
})

app.get('/api/foo', (req, res) => {
  res.json({ foo: 'bar' })
})

Note: I used duckduckgo's favicon

You can use a middleware like the one provided from the express-favicon package that will serve the favicon.ico file before your API route handlers.

e.g

const favicon = require('express-favicon');
app.use(favicon(__dirname + '/public/favicon.png'));

You can just add your favicon.ico to the root folder of your API and maybe the browser will pick it up. Otherwise there is no way to have a favicon for API's (which are not to be viewed in the browser in the first place, so nobody cares about favicons for APIs...)

The request for favicon is a separate request that the browser makes whenever you load a page from your website (can be made from outside the browser too). It is independent of the other requests that your server is serving (in your case, the API endpoint serving application/json response).

Simplest way to do so would be to handle the request, like any other, in your application:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

app.get('/favicon.ico', (req, res) => {
      res.sendFile(
         //Path to the favicon file
      );
})

<!-- end snippet -->

However, you would need to set the caching behaviour, in case it is needed.

You can use express' serve-favicon package as well which makes it easy to set caching and handles other things as well (such as setting the correct Content-Type etc.).

First, try to put .ico file in public folder.

Second, set the file name.
For example if favicon file name is file.ico, then

<link rel="shortcut icon" href="%PUBLIC_URL%/file.ico"/>

I hope this will help you.