Introduction to serve-favicon Middleware

The serve-favicon middleware is a simple yet powerful tool to serve a favicon for your Node.js applications. Favicons are a small yet essential part of web development as they appear in browser tabs, bookmarks, and more. Serving them efficiently can improve your website’s performance and user experience.

How to Install serve-favicon

npm install serve-favicon

Basic Usage

You can easily use serve-favicon in your Express application to serve a favicon.

  const express = require('express');
  const path = require('path');
  const favicon = require('serve-favicon');
  
  const app = express();
  
  app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
  
  app.get('/', (req, res) => {
    res.send('Hello World!');
  });
  
  app.listen(3000, () => {
    console.log('Server is running on port 3000');
  });

Advanced Configuration

serve-favicon supports additional options to further control its behavior:

• maxAge: Cache-control max-age directive in ms, default is 1 year.

Example with maxAge option:

  app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'), {
    maxAge: 86400000  // 1 day in milliseconds
  }));

Multiple Favicons

If you have multiple favicons for different devices or purposes, you can use serve-static to serve them:

  const serveStatic = require('serve-static');
  app.use(serveStatic(path.join(__dirname, 'public')));
  
  app.get('/', (req, res) => {
    res.send('');
  });

Full Application Example

Here is a complete example of an Express application that uses serve-favicon with some of the advanced configurations:

  const express = require('express');
  const path = require('path');
  const favicon = require('serve-favicon');
  const serveStatic = require('serve-static');
  
  const app = express();
  
  // Serve favicon with maxAge option
  app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'), {
    maxAge: 86400000  // 1 day in milliseconds
  }));
  
  // Serve other static assets
  app.use(serveStatic(path.join(__dirname, 'public')));
  
  app.get('/', (req, res) => {
    res.send('
Welcome to Express!
');
  });
  
  app.listen(3000, () => {
    console.log('Server is running on port 3000');
  });

Using serve-favicon middleware makes your Express applications more efficient and your site quicker to load the small but important favicon.

Hash: 23bc896d986961cde5bd2aaa43bdba880d3abef8c3fcca7b19c99ac7b4e33fb3