diff --git a/src/app/index.module.css b/src/app/index.module.css
index 6f1fad82..16401f49 100644
--- a/src/app/index.module.css
+++ b/src/app/index.module.css
@@ -32,6 +32,20 @@
   width: 400px;
 }
 
+.staticLogo {
+  width: 85%;
+  height: auto;
+  margin: 0 auto;
+  display: block;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.hidden {
+  display: none;
+}
+
 .title {
   text-align: center;
   margin-bottom: calc(var(--mantine-spacing-xl));
diff --git a/src/components/logo.tsx b/src/components/logo.tsx
index 4dd8ef23..306027e5 100644
--- a/src/components/logo.tsx
+++ b/src/components/logo.tsx
@@ -1,7 +1,9 @@
 "use client";
 
 import React from "react";
+import Image from "next/image";
 import Script from "next/script";
+import classes from "../app/index.module.css";
 
 declare global {
   interface Window {
@@ -25,7 +27,11 @@ interface LogoProps {
   className?: string;
 }
 
-export default class InteractiveLogo extends React.Component<LogoProps> {
+interface LogoState {
+  player: RufflePlayer | null;
+}
+
+export default class InteractiveLogo extends React.Component<LogoProps, LogoState> {
   private readonly container: React.RefObject<HTMLDivElement>;
   private player: RufflePlayer | null = null;
 
@@ -33,10 +39,19 @@ export default class InteractiveLogo extends React.Component<LogoProps> {
     super(props);
 
     this.container = React.createRef();
+    this.state = {
+      player: null,
+    };
+  }
+
+  private removeRufflePlayer() {
+    this.player?.remove();
+    this.player = null;
+    this.setState({player: null});
   }
 
   private load() {
-    if (this.player) {
+    if (this.state.player) {
       // Already loaded.
       return;
     }
@@ -54,9 +69,12 @@ export default class InteractiveLogo extends React.Component<LogoProps> {
         contextMenu: "off",
         splashScreen: false,
         preferredRenderer: "canvas",
+      }).catch(() => {
+        this.removeRufflePlayer();
       });
       this.player.style.width = "100%";
       this.player.style.height = "100%";
+      this.setState({player: this.player});
     }
   }
 
@@ -65,8 +83,7 @@ export default class InteractiveLogo extends React.Component<LogoProps> {
   }
 
   componentWillUnmount() {
-    this.player?.remove();
-    this.player = null;
+    this.removeRufflePlayer();
   }
 
   render() {
@@ -76,7 +93,9 @@ export default class InteractiveLogo extends React.Component<LogoProps> {
           src="https://unpkg.com/@ruffle-rs/ruffle"
           onReady={() => this.load()}
         />
-        <div ref={this.container} className={this.props.className} />
+        <div ref={this.container} className={this.props.className}>
+          <Image src="/logo.svg" alt="Ruffle Logo" className={this.state.player ? classes.hidden : classes.staticLogo} width="340" height="110" />
+        </div>
       </>
     );
   }