diff --git a/packages/next/src/build/webpack/loaders/next-metadata-route-loader.ts b/packages/next/src/build/webpack/loaders/next-metadata-route-loader.ts
index 508a50956d1e1..75f319d953766 100644
--- a/packages/next/src/build/webpack/loaders/next-metadata-route-loader.ts
+++ b/packages/next/src/build/webpack/loaders/next-metadata-route-loader.ts
@@ -51,13 +51,11 @@ const contentType = ${JSON.stringify(getContentType(resourcePath))}
 const buffer = Buffer.from(${JSON.stringify(
     (
       await fs.promises.readFile(
-        resourcePath.replace(METADATA_RESOURCE_QUERY, ''),
-        {
-          encoding: 'utf-8',
-        }
+        resourcePath.replace(METADATA_RESOURCE_QUERY, '')
       )
-    ).toString()
-  )})
+    ).toString('base64')
+  )}, 'base64'
+  )
 
 export function GET() {
   return new NextResponse(buffer, {
diff --git a/test/e2e/app-dir/metadata/metadata.test.ts b/test/e2e/app-dir/metadata/metadata.test.ts
index 29bf85fc8c360..4e35dbf9e767d 100644
--- a/test/e2e/app-dir/metadata/metadata.test.ts
+++ b/test/e2e/app-dir/metadata/metadata.test.ts
@@ -1,6 +1,8 @@
 import { createNextDescribe } from 'e2e-utils'
 import { check } from 'next-test-utils'
 import { BrowserInterface } from 'test/lib/browsers/base'
+import fs from 'fs/promises'
+import path from 'path'
 import cheerio from 'cheerio'
 
 createNextDescribe(
@@ -8,7 +10,7 @@ createNextDescribe(
   {
     files: __dirname,
   },
-  ({ next, isNextDev, isNextStart }) => {
+  ({ next, isNextDev, isNextStart, isNextDeploy }) => {
     const getTitle = (browser: BrowserInterface) =>
       browser.elementByCss('title').text()
 
@@ -568,6 +570,18 @@ createNextDescribe(
         const icon = $('link[rel="icon"]')
         expect(icon.attr('href')).toBe('/favicon.ico')
         expect(icon.attr('sizes')).toBe('any')
+
+        if (!isNextDeploy) {
+          const faviconFileBuffer = await fs.readFile(
+            path.join(next.testDir, 'app/favicon.ico')
+          )
+          const faviconResponse = Buffer.from(
+            await next.fetch('/favicon.ico').then((res) => res.arrayBuffer())
+          )
+          return expect(
+            Buffer.compare(faviconResponse, faviconFileBuffer)
+          ).toBe(0)
+        }
       })
     })