favicon#

• Type: string ｜ Function
• Default: undefined

Set the favicon icon path for all pages, can be set as:

• a URL.
• an absolute path to the file.
• a relative path relative to the project root directory.

After config this option, the favicon will be automatically copied to the dist directory during the compilation, and the corresponding link tag will be added to the HTML.

Example#

Set as a relative path:

export default {
  html: {
    favicon: './src/assets/icon.png',
  },
};

Set to an absolute path:

import path from 'node:path';

export default {
  html: {
    favicon: path.resolve(__dirname, './src/assets/icon.png'),
  },
};

Set to a URL:

import path from 'node:path';

export default {
  html: {
    favicon: 'https://foo.com/favicon.ico',
  },
};

After recompiling, the following tags are automatically generated in the HTML:

<link rel="icon" href="/favicon.ico" />

Function Usage#

• Type:

type FaviconFunction = ({ value: string; entryName: string }) => string | void;

When html.favicon is of type Function, the function receives an object as input, with the following properties:

• value: the default favicon configuration for Rsbuild.
• entryName: the name of the current entry.

In the context of MPA (Multi-Page Application), you can return different favicon based on the entry name, thus generating different tags for each page:

export default {
  html: {
    favicon({ entryName }) {
      const icons = {
        foo: 'https://example.com/foo.ico',
        bar: 'https://example.com/bar.ico',
      };
      return icons[entryName] || 'https://example.com/default.ico';
    },
  },
};