12 files changed, 61 insertions, 6 deletions
diff --git a/packages/desktop/index.html b/packages/desktop/index.html
index 9209acfc7..e88b49ac8 100644
--- a/packages/desktop/index.html
+++ b/packages/desktop/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.svg" />
+    <link rel="shortcut icon" type="image/svg+xml" href="/favicon.svg" />
     <title>OpenCode</title>
   </head>
   <body class="antialiased overscroll-none select-none text-12-regular">
diff --git a/packages/desktop/public/favicon.svg b/packages/desktop/public/favicon.svg
new file mode 120000
index 000000000..80804d257
--- /dev/null
+++ b/packages/desktop/public/favicon.svg
@@ -0,0 +1 @@
+../../ui/src/assets/favicon/favicon.svg
+\ No newline at end of file
diff --git a/packages/desktop/src/assets/favicon.svg b/packages/desktop/src/assets/favicon.svg
deleted file mode 100644
index 3c81bbdb4..000000000
--- a/packages/desktop/src/assets/favicon.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="600" height="600" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M115 180H300V420H115V180ZM253.75 229.044H161.25V370.405H253.75V229.044Z" fill="white"/>
-<path d="M346.25 180H485V229.044H392.5V370.405H485V419.449H346.25V180Z" fill="white"/>
-</svg>
diff --git a/packages/ui/src/assets/favicon/apple-touch-icon.png b/packages/ui/src/assets/favicon/apple-touch-icon.png
new file mode 100644
index 000000000..13d79dbec
--- /dev/null
+++ 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
new file mode 100644
index 000000000..c9d3cbf0e
--- /dev/null
+++ 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
new file mode 100644
index 000000000..a7b497fb9
--- /dev/null
+++ 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
new file mode 100644
index 000000000..ffb5f7298
--- /dev/null
+++ b/packages/ui/src/assets/favicon/favicon.svg
@@ -0,0 +1,18 @@
+<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>
+
diff --git a/packages/ui/src/assets/favicon/site.webmanifest b/packages/ui/src/assets/favicon/site.webmanifest
new file mode 100644
index 000000000..f7522f8f3
--- /dev/null
+++ b/packages/ui/src/assets/favicon/site.webmanifest
@@ -0,0 +1,21 @@
+{
+  "name": "OpenCode",
+  "short_name": "OpenCode",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
+\ No newline at end of file
diff --git a/packages/ui/src/assets/favicon/web-app-manifest-192x192.png b/packages/ui/src/assets/favicon/web-app-manifest-192x192.png
new file mode 100644
index 000000000..ca53fa8da
--- /dev/null
+++ 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
new file mode 100644
index 000000000..91b4eb33f
--- /dev/null
+++ 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
new file mode 100644
index 000000000..de32ed2af
--- /dev/null
+++ b/packages/ui/src/components/favicon.tsx
@@ -0,0 +1,19 @@
+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} />
+      <Meta name="apple-mobile-web-app-title" content="OpenCode" />
+      <Link rel="manifest" href={siteWebmanifest} />
+    </>
+  )
+}
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 8d6ddc89c..115e5f14f 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -9,6 +9,7 @@ export * from "./diff-changes"
 export * from "./icon"
 export * from "./icon-button"
 export * from "./input"
+export * from "./favicon"
 export * from "./fonts"
 export * from "./list"
 export * from "./markdown"