[Feature]: Produce more favicons for different devices

[binarykitchen]

What problem does this feature solve?

It's me again. There is a neat webpack plugin which produces many different favicons, designed for all the different devices and phones. For example:

      new FaviconsWebpackPlugin({
        logo: faviconEntry,
        prefix: "img/favicons/",
        favicons: {
          appName: getClientTitle(),
          appDescription: getMetaDescription(),
          developerName: getDeveloperName(),
          developerURL: getDeveloperUrl(),
          display: "browser",
          theme_color: THEME_COLOR,
          icons: {
            android: true,
            appleIcon: true,
            appleStartup: true,
            favicons: true,
            windows: true,
            yandex: false,
          },
        },
      }),

Link: https://github.com/jantimon/favicons-webpack-plugin

Upon build, it generates many different images and ultimately links them all in the final index HTML page. It works very well on iPhones and bookmarks among all different OS.

What does the proposed API look like?

Presently, you provide one favicon configuration:
https://rsbuild.dev/config/html/favicon

It would be good to expand it further and have it produce various favicons for some common OS's and mobile phones by default. And have the theme colour configurable based on your design. Just an idea.

[chenjiahan]

Rsbuild also provides html.appIcon for generating apple-touch-icon and web app manifest icons.

According to https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs, the icons currently provided by Rsbuild should fit most modern needs.

favicons-webpack-plugin provides too many icons, I think Rsbuild will not support all of them, we can select the necessary icons to support.

[binarykitchen]

Thanks. That's a great post. Ok, agreed, we do not need too many favicons, but …

According to evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs, the icons currently provided by Rsbuild should fit most modern needs.

"... the icons currently provided by Rsbuild ..."

iconS ⇽- that's in plural, yet when I do a basic run in production mode, it generates one favicon only:

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

the icons currently provided by Rsbuild should fit most modern needs

Since it produces one favicon only, I wonder if it is a bug and whether I should configure them manually with the appIcon option?

[chenjiahan]

Yes, you should configure the appIcon if you need the other icons.

[binarykitchen]

Well, in that case, I'd have to manually generate each app favicon for each size. favicons-webpack-plugin did that job for me, less work ... some automatic favicon generation might be good. What do you think?

[chenjiahan]

We want to keep @rsbuild/core lightweight, so it will not introduce additional third-party dependencies for image processing, such as favicons or sharp.

I think automatic icon generation could be done with an Rsbuild plugin, and my preference would be for the community to implement it.

[binarykitchen]

Agreed, fair enough. Keep it lightweight.

I wonder if the existing FaviconsWebpackPlugin would be compatible to reuse inside rsbuild?

[chenjiahan]

We cannot use favicons-webpack-plugin in Rsbuild because it depends on HtmlWebpackPlugin and Rsbuild does not use HtmlWebpackPlugin.

See:

https://github.com/jantimon/favicons-webpack-plugin/blob/4510234a09312f9ed4877027255edad004f27b4c/src/index.js#L622-L624

But I think it is possible to make favicons-webpack-plugin be compatible with HtmlRspackPlugin.