feat: make favicon react to theme (#2786)

Co-authored-by: Matt Hill <mattnine@protonmail.com>

web/projects/shared/assets/icons/favicon.svg

@@ -0,0 +1,17 @@
+<svg viewBox="0 0 450 450" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M86.556 368.287c-8.449 15.291 10.608 25.124 18.408 10.767 3.306-6.085 104.635-248.519 116.915-277.074L340.04 378.157c7.846 16.75 27.461 4.486 20.219-11.366L233.686 78.361c-6.14-13.108-18.891-13.108-24.559.468-.472.936-117.706 280.653-122.571 289.458Z" fill="var(--fill, #F0F0F0)"></path>
+    <path d="M64.343 345.046c-23.137-29.322-37.522-64.483-41.523-101.495-4.002-37.013 2.54-74.396 18.883-107.911 16.344-33.515 41.835-61.82 73.583-81.707 31.748-19.886 68.482-30.557 106.038-30.804 37.555-.246 74.429 9.943 106.44 29.411 32.01 19.469 57.876 47.438 74.666 80.736 16.789 33.297 23.829 70.592 20.321 107.654-3.507 37.061-17.422 72.407-40.165 102.03l-.39-.294c22.688-29.55 36.569-64.81 40.068-101.782 3.499-36.971-3.524-74.175-20.272-107.391-16.749-33.217-42.552-61.118-74.485-80.539-31.932-19.42-68.716-29.585-106.18-29.34-37.464.246-74.109 10.891-105.78 30.73-31.67 19.837-57.099 48.074-73.403 81.507-16.303 33.433-22.829 70.726-18.837 107.648 3.992 36.922 18.341 71.997 41.422 101.248l-.386.299Zm68.384 55.543c28.193 13.805 58.965 21.193 90.411 20.931 31.445-.263 62.392-7.256 90.347-21.529v-.598c-27.887 14.238-58.983 21.38-90.352 21.641-31.368.262-62.282-7.272-90.406-21.043v.598Z" stroke-width="20" stroke-linejoin="round" stroke="var(--fill, #F0F0F0)"></path>
+    <style>
+        @media (prefers-color-scheme: light) {
+            :root {
+                --fill: #333;
+            }
+        }
+
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --fill: #F0F0F0;
+            }
+        }
+    </style>
+</svg>

web/projects/ui/src/index.html

@@ -12,13 +12,21 @@
     />
     <meta name="format-detection" content="telephone=no" />
     <meta name="msapplication-tap-highlight" content="no" />
-
-    <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico" />
+    <link
+      rel="icon"
+      type="image/png"
+      href="/assets/icons/favicon-96x96.png"
+      sizes="96x96"
+    />
+    <link rel="icon" type="image/svg+xml" href="/assets/icons/favicon.svg" />
+    <link rel="shortcut icon" href="/assets/icons/favicon.ico" />
     <link
       rel="apple-touch-icon"
-      sizes="256x256"
-      href="assets/img/icon_apple_touch.png"
+      sizes="180x180"
+      href="/assets/icons/apple-touch-icon.png"
     />
+    <meta name="apple-mobile-web-app-title" content="StartOS" />
+
     <link rel="manifest" href="manifest.webmanifest" />
     <meta name="theme-color" content="#ff5b71" />
     <style>

web/projects/ui/src/manifest.webmanifest

@@ -9,10 +9,16 @@
   "id": "/?version=036",
   "icons": [
     {
-      "src": "assets/img/icon.png",
-      "sizes": "256x256",
+      "src": "/assets/icons/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/assets/icons/web-app-manifest-512x512.png",
+      "sizes": "512x512",
       "type": "image/png",
       "purpose": "any"
     }
-  ]
+  ],
 }