feat: add type attribute for SVG favicon (#3200)

web-infra-dev · Aug 13, 2024 · 7ab7baa · 7ab7baa
1 parent a13ce89
commit 7ab7baa
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/e2e/cases/html/favicon/index.test.ts b/e2e/cases/html/favicon/index.test.ts
@@ -23,6 +23,29 @@ test('should emit local favicon to dist path', async () => {
   expect(html).toContain('<link rel="icon" href="/icon.png">');
 });
 
+test('should add type attribute for SVG favicon', async () => {
+  const rsbuild = await build({
+    cwd: __dirname,
+    rsbuildConfig: {
+      html: {
+        favicon: '../../../assets/mobile.svg',
+      },
+    },
+  });
+  const files = await rsbuild.unwrapOutputJSON();
+
+  expect(
+    Object.keys(files).some((file) => file.endsWith('/mobile.svg')),
+  ).toBeTruthy();
+
+  const html =
+    files[Object.keys(files).find((file) => file.endsWith('index.html'))!];
+
+  expect(html).toContain(
+    '<link rel="icon" href="/mobile.svg" type="image/svg+xml">',
+  );
+});
+
 test('should apply asset prefix to favicon URL', async () => {
   const rsbuild = await build({
     cwd: __dirname,

diff --git a/packages/core/src/rspack/RsbuildHtmlPlugin.ts b/packages/core/src/rspack/RsbuildHtmlPlugin.ts
@@ -277,15 +277,21 @@ export class RsbuildHtmlPlugin {
         href = ensureAssetPrefix(name, publicPath);
       }
 
-      headTags.unshift({
+      const tag: HtmlRspackPlugin.HtmlTagObject = {
         tagName: 'link',
         voidTag: true,
         attributes: {
           rel: 'icon',
           href,
         },
         meta: {},
-      });
+      };
+
+      if (href.endsWith('.svg')) {
+        tag.attributes.type = 'image/svg+xml';
+      }
+
+      headTags.unshift(tag);
     };
 
     compiler.hooks.compilation.tap(this.name, (compilation: Compilation) => {