diff --git a/docs/app-docs/public/android-icon-192x192.png b/docs/app-docs/public/android-icon-192x192.png
new file mode 100644
index 00000000..b30af020
Binary files /dev/null and b/docs/app-docs/public/android-icon-192x192.png differ
diff --git a/docs/app-docs/public/apple-icon-114x114.png b/docs/app-docs/public/apple-icon-114x114.png
new file mode 100644
index 00000000..d1d4d143
Binary files /dev/null and b/docs/app-docs/public/apple-icon-114x114.png differ
diff --git a/docs/app-docs/public/apple-icon-120x120.png b/docs/app-docs/public/apple-icon-120x120.png
new file mode 100644
index 00000000..1a316e0a
Binary files /dev/null and b/docs/app-docs/public/apple-icon-120x120.png differ
diff --git a/docs/app-docs/public/apple-icon-144x144.png b/docs/app-docs/public/apple-icon-144x144.png
new file mode 100644
index 00000000..da7ec038
Binary files /dev/null and b/docs/app-docs/public/apple-icon-144x144.png differ
diff --git a/docs/app-docs/public/apple-icon-152x152.png b/docs/app-docs/public/apple-icon-152x152.png
new file mode 100644
index 00000000..c2454d30
Binary files /dev/null and b/docs/app-docs/public/apple-icon-152x152.png differ
diff --git a/docs/app-docs/public/apple-icon-180x180.png b/docs/app-docs/public/apple-icon-180x180.png
new file mode 100644
index 00000000..7db0780c
Binary files /dev/null and b/docs/app-docs/public/apple-icon-180x180.png differ
diff --git a/docs/app-docs/public/apple-icon-57x57.png b/docs/app-docs/public/apple-icon-57x57.png
new file mode 100644
index 00000000..b3cff9f2
Binary files /dev/null and b/docs/app-docs/public/apple-icon-57x57.png differ
diff --git a/docs/app-docs/public/apple-icon-60x60.png b/docs/app-docs/public/apple-icon-60x60.png
new file mode 100644
index 00000000..4440b489
Binary files /dev/null and b/docs/app-docs/public/apple-icon-60x60.png differ
diff --git a/docs/app-docs/public/apple-icon-72x72.png b/docs/app-docs/public/apple-icon-72x72.png
new file mode 100644
index 00000000..72e1f046
Binary files /dev/null and b/docs/app-docs/public/apple-icon-72x72.png differ
diff --git a/docs/app-docs/public/apple-icon-76x76.png b/docs/app-docs/public/apple-icon-76x76.png
new file mode 100644
index 00000000..eed31766
Binary files /dev/null and b/docs/app-docs/public/apple-icon-76x76.png differ
diff --git a/docs/app-docs/public/favicon-16x16.png b/docs/app-docs/public/favicon-16x16.png
new file mode 100644
index 00000000..47d27dc3
Binary files /dev/null and b/docs/app-docs/public/favicon-16x16.png differ
diff --git a/docs/app-docs/public/favicon-32x32.png b/docs/app-docs/public/favicon-32x32.png
new file mode 100644
index 00000000..ea8f4a0f
Binary files /dev/null and b/docs/app-docs/public/favicon-32x32.png differ
diff --git a/docs/app-docs/public/favicon-96x96.png b/docs/app-docs/public/favicon-96x96.png
new file mode 100644
index 00000000..756c9a20
Binary files /dev/null and b/docs/app-docs/public/favicon-96x96.png differ
diff --git a/docs/app-docs/public/favicon-dark-16x16.png b/docs/app-docs/public/favicon-dark-16x16.png
new file mode 100644
index 00000000..d8a1c85c
Binary files /dev/null and b/docs/app-docs/public/favicon-dark-16x16.png differ
diff --git a/docs/app-docs/public/favicon-dark-32x32.png b/docs/app-docs/public/favicon-dark-32x32.png
new file mode 100644
index 00000000..d9f92d22
Binary files /dev/null and b/docs/app-docs/public/favicon-dark-32x32.png differ
diff --git a/docs/app-docs/src/components/BaseHead.astro b/docs/app-docs/src/components/BaseHead.astro
index 2faf4ce9..9535f470 100644
--- a/docs/app-docs/src/components/BaseHead.astro
+++ b/docs/app-docs/src/components/BaseHead.astro
@@ -17,7 +17,7 @@ const { title, description, image = "/og-default.png" } = Astro.props;
 <!-- Global Metadata -->
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
-<link rel="icon" type="image/svg+xml" href="/white.svg" />
+<!-- <link rel="icon" type="image/svg+xml" href="/white.svg" /> -->
 <meta name="generator" content={Astro.generator} />
 
 <!-- Canonical URL -->
@@ -28,12 +28,66 @@ const { title, description, image = "/og-default.png" } = Astro.props;
 <meta name="title" content={title} />
 <meta name="description" content={description} />
 
+<link
+  rel="icon"
+  type="image/png"
+  sizes="16x16"
+  href="/favicon-16x16.png"
+  media="(prefers-color-scheme: light)"
+/>
+<link
+  rel="icon"
+  type="image/png"
+  sizes="16x16"
+  href="/favicon-dark-16x16.png"
+  media="(prefers-color-scheme: dark)"
+/>
+
+<link
+  rel="icon"
+  type="image/png"
+  sizes="32x32"
+  href="/favicon-32x32.png"
+  media="(prefers-color-scheme: light)"
+/>
+<link
+  rel="icon"
+  type="image/png"
+  sizes="32x32"
+  href="/favicon-dark-32x32.png"
+  media="(prefers-color-scheme: dark)"
+/>
+
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
+
+<!-- Android -->
+<link
+  rel="icon"
+  type="image/png"
+  sizes="192x192"
+  href="/android-icon-192x192.png"
+/>
+
+<!-- Apple -->
+<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
+<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
+<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
+<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
+<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png" />
+<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png" />
+<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png" />
+<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png" />
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png" />
+
 <!-- Open Graph / Facebook -->
 <meta property="og:type" content="website" />
 <meta property="og:url" content={Astro.url} />
 <meta property="og:title" content={title} />
 <meta property="og:description" content={description} />
 <meta property="og:image" content={new URL(image, Astro.url)} />
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="630" />
+<meta property="og:image:type" content="image/png" />
 
 <!-- Twitter -->
 <meta property="twitter:card" content="summary_large_image" />
@@ -42,9 +96,6 @@ const { title, description, image = "/og-default.png" } = Astro.props;
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={new URL(image, Astro.url)} />
 
-<!-- Apple Touch Icon -->
-<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-
 <!-- Additional SEO Meta Tags -->
 <meta name="robots" content="index, follow" />
 <meta
diff --git a/docs/app-docs/src/components/starlight/Head.astro b/docs/app-docs/src/components/starlight/Head.astro
index 6b06ef2e..608bdcc9 100644
--- a/docs/app-docs/src/components/starlight/Head.astro
+++ b/docs/app-docs/src/components/starlight/Head.astro
@@ -13,6 +13,37 @@ const ogImage = new URL("/og-default.png", Astro.site ?? Astro.url).toString();
 <meta name="twitter:image" content={ogImage} />
 <meta name="twitter:card" content="summary_large_image" />
 
+<link
+  rel="icon"
+  type="image/png"
+  sizes="16x16"
+  href="/favicon-16x16.png"
+  media="(prefers-color-scheme: light)"
+/>
+<link
+  rel="icon"
+  type="image/png"
+  sizes="16x16"
+  href="/favicon-dark-16x16.png"
+  media="(prefers-color-scheme: dark)"
+/>
+
+<link
+  rel="icon"
+  type="image/png"
+  sizes="32x32"
+  href="/favicon-32x32.png"
+  media="(prefers-color-scheme: light)"
+/>
+<link
+  rel="icon"
+  type="image/png"
+  sizes="32x32"
+  href="/favicon-dark-32x32.png"
+  media="(prefers-color-scheme: dark)"
+/>
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
+
 <link id="favicon" rel="icon" type="image/svg+xml" href="/white.svg" />
 
 <script is:inline>