website: meta icons added

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

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>