diff --git a/packages/next/src/server/base-server.ts b/packages/next/src/server/base-server.ts
index 8f8eaad0514ad..7a9ceaee6f7db 100644
--- a/packages/next/src/server/base-server.ts
+++ b/packages/next/src/server/base-server.ts
@@ -2371,6 +2371,14 @@ export default abstract class Server<ServerOptions extends Options = Options> {
     ctx: RequestContext,
     err: Error | null
   ): Promise<ResponsePayload | null> {
+    // Short-circuit favicon.ico in development to avoid compiling 404 page when the app has no favicon.ico.
+    // Since favicon.ico is automatically requested by the browser.
+    if (this.renderOpts.dev && ctx.pathname === '/favicon.ico') {
+      return {
+        type: 'html',
+        body: new RenderResult(''),
+      }
+    }
     const { res, query } = ctx
     try {
       let result: null | FindComponentsResult = null
diff --git a/test/e2e/app-dir/hello-world/app/favicon.ico b/test/e2e/app-dir/hello-world/app/favicon.ico
new file mode 100644
index 0000000000000..4965832f2c9b0
Binary files /dev/null and b/test/e2e/app-dir/hello-world/app/favicon.ico differ
diff --git a/test/e2e/hello-world/public/favicon.ico b/test/e2e/hello-world/public/favicon.ico
new file mode 100644
index 0000000000000..e69de29bb2d1d