fix: favicons across all web properties

10 files changed, 16 insertions, 31 deletions

diff --git a/packages/ui/src/assets/favicon/apple-touch-icon.png b/packages/ui/src/assets/favicon/apple-touch-icon.png
index 13d79dbec..70fd01b0e 100644
--- a/packages/ui/src/assets/favicon/apple-touch-icon.png
+++ b/packages/ui/src/assets/favicon/apple-touch-icon.png
diff --git a/packages/ui/src/assets/favicon/favicon-96x96.png b/packages/ui/src/assets/favicon/favicon-96x96.png
index c9d3cbf0e..15266d28f 100644
--- a/packages/ui/src/assets/favicon/favicon-96x96.png
+++ b/packages/ui/src/assets/favicon/favicon-96x96.png
diff --git a/packages/ui/src/assets/favicon/favicon.ico b/packages/ui/src/assets/favicon/favicon.ico
index a7b497fb9..34ca0b9c0 100644
--- a/packages/ui/src/assets/favicon/favicon.ico
+++ b/packages/ui/src/assets/favicon/favicon.ico
diff --git a/packages/ui/src/assets/favicon/favicon.svg b/packages/ui/src/assets/favicon/favicon.svg
index ffb5f7298..157edc4d7 100644
--- a/packages/ui/src/assets/favicon/favicon.svg
+++ b/packages/ui/src/assets/favicon/favicon.svg
@@ -1,18 +1,7 @@
-<svg width='300' height='300' viewBox='0 0 300 300' fill='none' xmlns='http://www.w3.org/2000/svg'>
-  <style>
-    /* Light mode colors (default) */
-    .inner-square { fill: #CFCECD; }
-    .outer-path { fill: #211E1E; }
-
-    /* Dark mode colors */
-    @media (prefers-color-scheme: dark) {
-    .inner-square { fill: #4B4646; }
-    .outer-path { fill: #F1ECEC; }
-    }
-  </style>
-  <g>
-    <path class="inner-square" d='M194 215.5H106V127.5H194V215.5Z' />
-    <path class="outer-path" d='M194 83.5H106V215.5H194V83.5ZM238 259.5H62V39.5H238V259.5Z' />
-  </g>
-</svg>
-
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512"><svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="512" height="512" fill="#131010"></rect>
+<path d="M320 224V352H192V224H320Z" fill="#5A5858"></path>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M384 416H128V96H384V416ZM320 160H192V352H320V160Z" fill="white"></path>
+</svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
+@media (prefers-color-scheme: dark) { :root { filter: none; } }
+</style></svg>
\ No newline at end of file
diff --git a/packages/ui/src/assets/favicon/site.webmanifest b/packages/ui/src/assets/favicon/site.webmanifest
index 41290e840..e2eabbe4c 100644
--- a/packages/ui/src/assets/favicon/site.webmanifest
+++ b/packages/ui/src/assets/favicon/site.webmanifest
@@ -19,3 +19,4 @@
   "background_color": "#ffffff",
   "display": "standalone"
 }
+
diff --git a/packages/ui/src/assets/favicon/web-app-manifest-192x192.png b/packages/ui/src/assets/favicon/web-app-manifest-192x192.png
index ca53fa8da..e63775549 100644
--- a/packages/ui/src/assets/favicon/web-app-manifest-192x192.png
+++ b/packages/ui/src/assets/favicon/web-app-manifest-192x192.png
diff --git a/packages/ui/src/assets/favicon/web-app-manifest-512x512.png b/packages/ui/src/assets/favicon/web-app-manifest-512x512.png
index 91b4eb33f..f6f0cf514 100644
--- a/packages/ui/src/assets/favicon/web-app-manifest-512x512.png
+++ b/packages/ui/src/assets/favicon/web-app-manifest-512x512.png
diff --git a/packages/ui/src/components/favicon.tsx b/packages/ui/src/components/favicon.tsx
index de32ed2af..dec18f1ad 100644
--- a/packages/ui/src/components/favicon.tsx
+++ b/packages/ui/src/components/favicon.tsx
@@ -1,19 +1,14 @@
 import { Link, Meta } from "@solidjs/meta"
-import favicon96 from "../assets/favicon/favicon-96x96.png"
-import faviconSvg from "../assets/favicon/favicon.svg"
-import faviconIco from "../assets/favicon/favicon.ico"
-import appleTouchIcon from "../assets/favicon/apple-touch-icon.png"
-import siteWebmanifest from "../assets/favicon/site.webmanifest"
 
 export const Favicon = () => {
   return (
     <>
-      <Link rel="icon" type="image/svg+xml" href={faviconSvg} />
-      <Link rel="icon" type="image/png" href={favicon96} sizes="96x96" />
-      <Link rel="shortcut icon" href={faviconIco} />
-      <Link rel="apple-touch-icon" sizes="180x180" href={appleTouchIcon} />
+      <Link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
+      <Link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+      <Link rel="shortcut icon" href="/favicon.ico" />
+      <Link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+      <Link rel="manifest" href="/site.webmanifest" />
       <Meta name="apple-mobile-web-app-title" content="OpenCode" />
-      <Link rel="manifest" href={siteWebmanifest} />
     </>
   )
 }
diff --git a/packages/ui/src/components/fonts.tsx b/packages/ui/src/components/font.tsx
index 0b28e8f3c..de2991096 100644
--- a/packages/ui/src/components/fonts.tsx
+++ b/packages/ui/src/components/font.tsx
@@ -2,7 +2,7 @@ import { Style, Link } from "@solidjs/meta"
 import geist from "../assets/fonts/geist.woff2"
 import tx02 from "../assets/fonts/tx-02.woff2"
 
-export const Fonts = () => {
+export const Font = () => {
   return (
     <>
       <Style>{`
diff --git a/packages/ui/src/demo.tsx b/packages/ui/src/demo.tsx
index 196746ed5..6081f0894 100644
--- a/packages/ui/src/demo.tsx
+++ b/packages/ui/src/demo.tsx
@@ -3,7 +3,7 @@ import { createSignal } from "solid-js"
 import "./index.css"
 import { Button } from "./components/button"
 import { Select } from "./components/select"
-import { Fonts } from "./components/fonts"
+import { Font } from "./components/font"
 import { Accordion } from "./components/accordion"
 import { Tabs } from "./components/tabs"
 import { Tooltip } from "./components/tooltip"
@@ -279,7 +279,7 @@ const Demo: Component = () => {
 
   return (
     <>
-      <Fonts />
+      <Font />
       <main>
         <Content />
         <Content dark />