{"id":17611,"library":"express-favicon","title":"Express Favicon Middleware","description":"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.","status":"abandoned","version":"2.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/song940/express-favicon","tags":["javascript","express","favicon","typescript"],"install":[{"cmd":"npm install express-favicon","lang":"bash","label":"npm"},{"cmd":"yarn add express-favicon","lang":"bash","label":"yarn"},{"cmd":"pnpm add express-favicon","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency as it's an Express middleware. Requires an Express application instance.","package":"express","optional":false}],"imports":[{"note":"The package exports the middleware function as a default export, making `import favicon from 'express-favicon';` the correct ESM pattern.","wrong":"import { favicon } from 'express-favicon';","symbol":"favicon","correct":"import favicon from 'express-favicon';"},{"note":"This is the standard CommonJS import pattern, as shown in the package's README and typical for older Node.js projects.","symbol":"favicon","correct":"const favicon = require('express-favicon');"},{"note":"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.","symbol":"RequestHandler","correct":"import type { RequestHandler } from 'express';"}],"quickstart":{"code":"import express from 'express';\nimport favicon from 'express-favicon';\nimport path from 'path';\nimport { fileURLToPath } from 'url';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\nconst app = express();\n\n// Serve favicon.png from the 'public' directory. Middleware order is crucial.\n// Make sure 'public' exists in your project root with a favicon.png inside.\napp.use(favicon(path.join(__dirname, 'public', 'favicon.png')));\n\napp.get('/', (req, res) => {\n  res.send('<h1>Hello, Express Favicon! Check your browser tab for the favicon.</h1>');\n});\n\nconst PORT = process.env.PORT ?? 3000;\napp.listen(PORT, () => {\n  console.log(`Server is running on http://localhost:${PORT}`);\n  console.log('Ensure you have a favicon.png in a \"public\" directory next to your server file.');\n});","lang":"typescript","description":"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."},"warnings":[{"fix":"Install `express-favicon` or `serve-favicon` via npm (`npm install express-favicon`) and require/import it explicitly, then use `app.use(favicon(...))`.","message":"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.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Ensure `app.use(favicon(...))` is one of the very first middleware applied to your Express application instance.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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))`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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`.","severity":"deprecated","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"fix":"Ensure `const express = require('express');` and `const app = express();` are correctly executed before calling `app.use()`.","cause":"This typically occurs when `app` is not a valid Express application instance or has not been correctly initialized.","error":"TypeError: app.use is not a function"},{"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.","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.","error":"Cannot GET /favicon.ico (404 Not Found)"},{"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`).","cause":"Browser caching is aggressively holding onto an old favicon, or the favicon middleware is not serving the file with appropriate caching headers.","error":"Favicon not appearing in browser tab (or old favicon persisting)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}