Express Favicon Middleware

2.0.4 verified Thu Apr 23 auth: no javascript abandoned

express-favicon is a middleware for Express.js applications, designed to serve a favicon (favorite icon) for web browsers. It intercepts requests for `/favicon.ico` and responds with the specified icon file, preventing these requests from hitting other middleware or routes unnecessarily. The current stable version is 2.0.4, published in 2023. Given its last commit in 2017 and infrequent updates, it operates as a low-maintenance or effectively abandoned package. While functional for its basic purpose, it is less actively maintained and generally less feature-rich compared to the official `serve-favicon` middleware from the Express/Connect organization, which offers better caching and configuration options. It ships with built-in TypeScript types.

Common errors

error TypeError: app.use is not a function ↓

cause This typically occurs when `app` is not a valid Express application instance or has not been correctly initialized.

fix

Ensure const express = require('express'); and const app = express(); are correctly executed before calling app.use().

error Cannot GET /favicon.ico (404 Not Found) ↓

cause The `express-favicon` middleware could not find the specified favicon file at the provided path, or it's not correctly positioned in the middleware stack.

fix

Verify that the path passed to favicon() is correct and points to an existing file. Ensure app.use(favicon(...)) is placed early in your middleware chain, before app.use(express.static(...)) or other routes.

error Favicon not appearing in browser tab (or old favicon persisting) ↓

cause Browser caching is aggressively holding onto an old favicon, or the favicon middleware is not serving the file with appropriate caching headers.

fix

Clear your browser's cache for the specific site or perform a hard refresh (Ctrl+F5 or Cmd+Shift+R). For development, try opening in an incognito window. Ensure express-favicon is configured to serve with public caching (which it does by default for 1 year, similar to serve-favicon).

Warnings

breaking Express versions 4.x and above no longer bundle middleware like `favicon`. Users upgrading from older Express versions (e.g., 3.x) will find `express.favicon` undefined and must install `express-favicon` or `serve-favicon` separately. ↓

fix Install `express-favicon` or `serve-favicon` via npm (`npm install express-favicon`) and require/import it explicitly, then use `app.use(favicon(...))`.

gotcha The middleware must be placed early in the Express middleware stack, typically before any logging middleware or main route handlers. If placed after routes or static file middleware, requests for `/favicon.ico` might be handled by other handlers, preventing `express-favicon` from doing its job or causing unintended logging. ↓

fix Ensure `app.use(favicon(...))` is one of the very first middleware applied to your Express application instance.

gotcha Path resolution for the favicon file can be tricky, especially in ES module contexts or when applications are bundled. Using `__dirname` directly in ESM files requires emulation, and incorrect paths will lead to a 404 for `/favicon.ico` or the server failing to start if the file is mandatory. ↓

fix Use `path.join(__dirname, 'path', 'to', 'favicon.ico')` to construct absolute paths reliably. For ES Modules, emulate `__dirname` using `path.dirname(fileURLToPath(import.meta.url))`.

deprecated This package, `express-favicon`, has not seen significant updates since 2017 (last commit) and 2023 (last npm publish, mostly metadata update) and is largely unmaintained. The officially recommended and actively maintained alternative for serving favicons in Express is `serve-favicon`. ↓

fix Consider migrating to `serve-favicon` (`npm install serve-favicon`). It offers similar functionality with ongoing maintenance and potentially more robust caching and error handling.

Install

npm install express-favicon

yarn add express-favicon

pnpm add express-favicon

Imports

favicon
wrong
```
import { favicon } from 'express-favicon';
```
correct
```
import favicon from 'express-favicon';
```
The package exports the middleware function as a default export, making `import favicon from 'express-favicon';` the correct ESM pattern.
favicon
```
const favicon = require('express-favicon');
```
This is the standard CommonJS import pattern, as shown in the package's README and typical for older Node.js projects.
RequestHandler
```
import type { RequestHandler } from 'express';
```
While `express-favicon` ships with its own types, its primary export is an Express middleware function. The `RequestHandler` type from `express` is used to type the return value of the `favicon` function for clear type safety in TypeScript projects.

Quickstart

This quickstart initializes an Express application and uses `express-favicon` to serve a favicon. It demonstrates proper ES module usage with `__dirname` emulation for file path resolution, and includes the middleware before any routes to ensure favicon requests are handled efficiently.

import express from 'express';
import favicon from 'express-favicon';
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const app = express();

// Serve favicon.png from the 'public' directory. Middleware order is crucial.
// Make sure 'public' exists in your project root with a favicon.png inside.
app.use(favicon(path.join(__dirname, 'public', 'favicon.png')));

app.get('/', (req, res) => {
  res.send('<h1>Hello, Express Favicon! Check your browser tab for the favicon.</h1>');
});

const PORT = process.env.PORT ?? 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
  console.log('Ensure you have a favicon.png in a "public" directory next to your server file.');
});