diff --git a/public/img/chosen-sprite.png b/public/img/chosen-sprite.png
deleted file mode 100644
index 3611ae4..0000000
Binary files a/public/img/chosen-sprite.png and /dev/null differ
diff --git a/public/img/chosen-sprite@2x.png b/public/img/chosen-sprite@2x.png
deleted file mode 100644
index ffe4d7d..0000000
Binary files a/public/img/chosen-sprite@2x.png and /dev/null differ
diff --git a/public/img/favicon.ico b/public/img/favicon.ico
deleted file mode 100644
index c16e59a..0000000
Binary files a/public/img/favicon.ico and /dev/null differ
diff --git a/public/img/favicon.png b/public/img/favicon.png
new file mode 100644
index 0000000..930c8c2
Binary files /dev/null and b/public/img/favicon.png differ
diff --git a/public/img/gradient_squares.png b/public/img/gradient_squares.png
deleted file mode 100644
index 0e0b116..0000000
Binary files a/public/img/gradient_squares.png and /dev/null differ
diff --git a/public/img/gradient_squares.webp b/public/img/gradient_squares.webp
new file mode 100644
index 0000000..f879efd
Binary files /dev/null and b/public/img/gradient_squares.webp differ
diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
index c57d6d5..9681bf5 100644
--- a/src/components/layout/footer.tsx
+++ b/src/components/layout/footer.tsx
@@ -39,8 +39,10 @@ export function Footer() {
             skratchdot{" "}
             <img
               className="inline size-4"
+              width={16}
+              height={16}
               alt=""
-              src={`${import.meta.env.BASE_URL}img/favicon.ico`}
+              src={`${import.meta.env.BASE_URL}img/favicon.png`}
             />
           </TextLink>
         </div>
diff --git a/src/components/layout/site-document.tsx b/src/components/layout/site-document.tsx
index e8c49a7..314c7da 100644
--- a/src/components/layout/site-document.tsx
+++ b/src/components/layout/site-document.tsx
@@ -14,9 +14,10 @@ export function SiteDocument({ children }: { children: ReactNode }) {
         <meta name="description" content="audio, sorting algorithms, visualizations" />
         <meta name="author" content="skratchdot.com" />
         <link
-          rel="shortcut icon"
+          rel="icon"
           type="image/png"
-          href={`${import.meta.env.BASE_URL}img/favicon.ico`}
+          sizes="32x32"
+          href={`${import.meta.env.BASE_URL}img/favicon.png`}
         />
         <link rel="stylesheet" href={stylesheet} />
         <HeadContent />
diff --git a/src/components/visualizations/player-chart.tsx b/src/components/visualizations/player-chart.tsx
index b25053c..a8249df 100644
--- a/src/components/visualizations/player-chart.tsx
+++ b/src/components/visualizations/player-chart.tsx
@@ -51,7 +51,7 @@ export function PlayerChart({ runtime, id }: Props & { id: PlayerId }) {
       id={`${id}-svg`}
       aria-label={id === "base" ? "Input data visualization" : "Sorting visualization"}
       className={cn(
-        "h-full w-full rounded-lg border border-neutral-300 bg-neutral-100 bg-[url('/img/gradient_squares.png')] bg-center bg-repeat",
+        "h-full w-full rounded-lg border border-neutral-300 bg-neutral-100 bg-[url('/img/gradient_squares.webp')] bg-center bg-repeat",
         id === "base" && "cursor-pointer touch-none",
       )}
       viewBox={flat ? `0 0 ${Math.max(1, frames.length - 1)} ${Math.max(1, size)}` : undefined}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index c64885b..6c75d4f 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -37,4 +37,17 @@ function Home() {
   );
 }
 
-export const Route = createFileRoute("/")({ component: Home });
+export const Route = createFileRoute("/")({
+  component: Home,
+  head: () => ({
+    links: [
+      {
+        rel: "preload",
+        as: "image",
+        type: "image/webp",
+        href: `${import.meta.env.BASE_URL}img/gradient_squares.webp`,
+        fetchPriority: "high",
+      },
+    ],
+  }),
+});