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?

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?

• javascript
• node.js
• express
• content-type
• favicon

• 1 expressjs./en/resources/middleware/serve-favicon.html this? – cmgchess Commented May 11, 2023 at 12:18
• 3 you can have a public folder in root with a favicon inside and use app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); before the routes. i tested it works – cmgchess Commented May 11, 2023 at 12:57
• @cmgchess is it applied on all subpath URL? – Jordy Commented May 11, 2023 at 12:59
• 2 yes by using it on top of all routes it will be applied to all routes. is that what you meant? – cmgchess Commented May 11, 2023 at 13:00
• 1 did u get it working – cmgchess Commented May 11, 2023 at 14:42

5 Answers 5

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:

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

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.