fix: favicons across all web properties

bun.lock

@@ -29,6 +29,7 @@
         "@opencode-ai/console-core": "workspace:*",
         "@opencode-ai/console-mail": "workspace:*",
         "@opencode-ai/console-resource": "workspace:*",
+        "@opencode-ai/ui": "workspace:*",
         "@solidjs/meta": "catalog:",
         "@solidjs/router": "catalog:",
         "@solidjs/start": "catalog:",

packages/console/app/package.json

@@ -18,6 +18,7 @@
     "@opencode-ai/console-core": "workspace:*",
     "@opencode-ai/console-mail": "workspace:*",
     "@opencode-ai/console-resource": "workspace:*",
+    "@opencode-ai/ui": "workspace:*",
     "@solidjs/meta": "catalog:",
     "@solidjs/router": "catalog:",
     "@solidjs/start": "catalog:",

packages/console/app/public/apple-touch-icon.png

@@ -0,0 +1 @@
+../../../ui/src/assets/favicon/apple-touch-icon.png

packages/console/app/public/favicon-96x96.png

@@ -0,0 +1 @@
+../../../ui/src/assets/favicon/favicon-96x96.png

packages/console/app/public/favicon-zen.svg

@@ -1,23 +0,0 @@
-<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="400" height="400" fill="#FDFCFC"/>
-<path d="M96 122.001V70.001H148V122.001H96Z" fill="#17181C"/>
-<path d="M148.004 122.001V70.001H200.004V122.001H148.004Z" fill="#17181C"/>
-<path d="M200.008 122.001V70.001H252.008V122.001H200.008Z" fill="#17181C"/>
-<path d="M251.996 122.001V70.001H303.996V122.001H251.996Z" fill="#17181C"/>
-<path d="M251.996 173.988V121.988H303.996V173.988H251.996Z" fill="#17181C"/>
-<path d="M96 225.998V173.998H148V225.998H96Z" fill="#CFCECD"/>
-<rect width="52" height="52" transform="translate(148.004 173.998)" fill="#17181C"/>
-<path d="M148.004 225.998V173.998H200.004V225.998H148.004Z" fill="#17181C" fill-opacity="0.1"/>
-<path d="M200.008 225.998V173.998H252.008V225.998H200.008Z" fill="#17181C"/>
-<path d="M252.016 225.998V173.998H304.016V225.998H252.016Z" fill="#CFCECD"/>
-<rect width="52" height="52" transform="translate(96 226.002)" fill="#17181C"/>
-<path d="M96 278.002V226.002H148V278.002H96Z" fill="#17181C" fill-opacity="0.1"/>
-<rect width="52" height="52" transform="translate(148.004 226.002)" fill="white"/>
-<path d="M148.004 278.002V226.002H200.004V278.002H148.004Z" fill="#CFCECD"/>
-<path d="M200.008 278.002V226.002H252.008V278.002H200.008Z" fill="#CFCECD"/>
-<path d="M252.016 278.002V226.002H304.016V278.002H252.016Z" fill="#CFCECD"/>
-<path d="M96 330.012V278.012H148V330.012H96Z" fill="#17181C"/>
-<path d="M148.004 330.012V278.012H200.004V330.012H148.004Z" fill="#17181C"/>
-<path d="M200.008 329.99V277.99H252.008V329.99H200.008Z" fill="#17181C"/>
-<path d="M251.996 330.012V278.012H303.996V330.012H251.996Z" fill="#17181C"/>
-</svg>

packages/console/app/public/favicon.ico

@@ -0,0 +1 @@
+../../../ui/src/assets/favicon/favicon.ico

packages/console/app/public/robots.txt

@@ -2,4 +2,5 @@ User-agent: *
 Allow: /
 
 # Disallow shared content pages
-Disallow: /s/
+Disallow: /s/
+Disallow: /share/

packages/console/app/public/site.webmanifest

@@ -0,0 +1 @@
+../../../ui/src/assets/favicon/site.webmanifest

packages/console/app/public/web-app-manifest-192x192.png

@@ -0,0 +1 @@
+../../../ui/src/assets/favicon/web-app-manifest-192x192.png

packages/console/app/public/web-app-manifest-512x512.png

@@ -0,0 +1 @@
+../../../ui/src/assets/favicon/web-app-manifest-512x512.png

packages/console/app/src/app.tsx

@@ -1,7 +1,8 @@
 import { MetaProvider, Title, Meta } from "@solidjs/meta"
 import { Router } from "@solidjs/router"
 import { FileRoutes } from "@solidjs/start/router"
-import { ErrorBoundary, Suspense } from "solid-js"
+import { Suspense } from "solid-js"
+import { Favicon } from "@opencode-ai/ui/favicon"
 import "@ibm/plex/css/ibm-plex.css"
 import "./app.css"
 
@@ -13,6 +14,7 @@ export default function App() {
         <MetaProvider>
           <Title>opencode</Title>
           <Meta name="description" content="OpenCode - The AI coding agent built for the terminal." />
+          <Favicon />
           <Suspense>{props.children}</Suspense>
         </MetaProvider>
       )}

packages/console/app/src/entry-server.tsx

@@ -9,7 +9,6 @@ export default createHandler(
           <head>
             <meta charset="utf-8" />
             <meta name="viewport" content="width=device-width, initial-scale=1" />
-            <link rel="shortcut icon" type="image/svg+xml" href="/favicon.svg" />
             <meta property="og:image" content="/social-share.png" />
             <meta property="twitter:image" content="/social-share.png" />
             {assets}

packages/console/app/src/routes/workspace.tsx

@@ -6,7 +6,6 @@ import { UserMenu } from "./user-menu"
 import { withActor } from "~/context/auth.withActor"
 import { User } from "@opencode-ai/console-core/user.js"
 import { Actor } from "@opencode-ai/console-core/actor.js"
-import { Link } from "@solidjs/meta"
 
 const getUserEmail = query(async (workspaceID: string) => {
   "use server"
@@ -22,7 +21,6 @@ export default function WorkspaceLayout(props: RouteSectionProps) {
   const userEmail = createAsync(() => getUserEmail(params.id!))
   return (
     <main data-page="workspace">
-      <Link rel="shortcut icon" type="image/svg+xml" href="/favicon-zen.svg" />
       <header data-component="workspace-header">
         <div data-slot="header-brand">
           <A href="/" data-component="site-title">

packages/console/app/src/routes/zen/index.tsx

@@ -33,7 +33,6 @@ export default function Home() {
       {/*<HttpHeader name="Cache-Control" value="public, max-age=1, s-maxage=3600, stale-while-revalidate=86400" />*/}
       <Title>OpenCode Zen | A curated set of reliable optimized models for coding agents</Title>
       <Link rel="canonical" href={`${config.baseUrl}/zen`} />
-      <Link rel="shortcut icon" type="image/svg+xml" href="/favicon-zen.svg" />
       <Meta property="og:image" content="/social-share-zen.png" />
       <Meta name="twitter:image" content="/social-share-zen.png" />
       <Meta name="opencode:auth" content={loggedin() ? "true" : "false"} />

packages/desktop/index.html

@@ -3,8 +3,12 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <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="theme-color" content="#000000" />
-    <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">

packages/desktop/public/apple-touch-icon.png

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/apple-touch-icon.png

packages/desktop/public/favicon-96x96.png

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/favicon-96x96.png

packages/desktop/public/favicon.ico

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/favicon.ico

packages/desktop/public/site.webmanifest

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/site.webmanifest

packages/desktop/public/web-app-manifest-192x192.png

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/web-app-manifest-192x192.png

packages/desktop/public/web-app-manifest-512x512.png

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/web-app-manifest-512x512.png

packages/desktop/src/index.tsx

@@ -3,7 +3,8 @@ import "@/index.css"
 import { render } from "solid-js/web"
 import { Router, Route, Navigate } from "@solidjs/router"
 import { MetaProvider } from "@solidjs/meta"
-import { Fonts } from "@opencode-ai/ui/fonts"
+import { Font } from "@opencode-ai/ui/font"
+import { Favicon } from "@opencode-ai/ui/favicon"
 import { MarkedProvider } from "@opencode-ai/ui/context/marked"
 import { GlobalSyncProvider, useGlobalSync } from "./context/global-sync"
 import Layout from "@/pages/layout"
@@ -38,7 +39,7 @@ render(
         <GlobalSyncProvider>
           <LayoutProvider>
             <MetaProvider>
-              <Fonts />
+              <Font />
               <Router root={Layout}>
                 <Route
                   path="/"

packages/enterprise/public/apple-touch-icon.png

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/apple-touch-icon.png

packages/enterprise/public/favicon-96x96.png

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/favicon-96x96.png

packages/enterprise/public/favicon.ico

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/favicon.ico

packages/enterprise/public/site.webmanifest

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/site.webmanifest

packages/enterprise/public/web-app-manifest-192x192.png

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/web-app-manifest-192x192.png

packages/enterprise/public/web-app-manifest-512x512.png

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/web-app-manifest-512x512.png

packages/enterprise/src/app.tsx

@@ -1,21 +1,23 @@
 import { Router } from "@solidjs/router"
 import { FileRoutes } from "@solidjs/start/router"
-import { Fonts } from "@opencode-ai/ui/fonts"
+import { Font } from "@opencode-ai/ui/font"
 import { MetaProvider } from "@solidjs/meta"
 import { MarkedProvider } from "@opencode-ai/ui/context/marked"
 import { Suspense } from "solid-js"
 import "./app.css"
+import { Favicon } from "@opencode-ai/ui/favicon"
 
 export default function App() {
   return (
     <Router
       root={(props) => (
-        <MarkedProvider>
-          <MetaProvider>
-            <Fonts />
+        <MetaProvider>
+          <MarkedProvider>
+            <Favicon />
+            <Font />
             <Suspense>{props.children}</Suspense>
-          </MetaProvider>
-        </MarkedProvider>
+          </MarkedProvider>
+        </MetaProvider>
       )}
     >
       <FileRoutes />

packages/enterprise/src/entry-server.tsx

@@ -8,7 +8,6 @@ export default createHandler(() => (
         <head>
           <meta charset="utf-8" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
-          <link rel="shortcut icon" type="image/svg+xml" href="/favicon.svg" />
           <title>OpenCode</title>
           {assets}
         </head>

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>

packages/ui/src/assets/favicon/site.webmanifest

@@ -19,3 +19,4 @@
   "background_color": "#ffffff",
   "display": "standalone"
 }
+

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} />
     </>
   )
 }

packages/ui/src/components/fonts.tsx → 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>{`

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 />

packages/web/astro.config.mjs

@@ -38,15 +38,6 @@ export default defineConfig({
         { icon: "github", label: "GitHub", href: config.github },
         { icon: "discord", label: "Dscord", href: config.discord },
       ],
-      head: [
-        {
-          tag: "link",
-          attrs: {
-            rel: "icon",
-            href: "/docs/favicon.svg",
-          },
-        },
-      ],
       editLink: {
         baseUrl: `${config.github}/edit/dev/packages/web/`,
       },

packages/web/public/apple-touch-icon.png

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/apple-touch-icon.png

packages/web/public/favicon-96x96.png

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/favicon-96x96.png

packages/web/public/favicon.ico

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/favicon.ico

packages/web/public/favicon.svg

@@ -1,4 +0,0 @@
-<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="400" height="400" fill="#0E0E0E"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M312 340H88V60H312V340ZM256 116H144V284H256V116Z" fill="white"/>
-</svg>

packages/web/public/favicon.svg

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/favicon.svg

packages/web/public/robots.txt

@@ -2,4 +2,5 @@ User-agent: *
 Allow: /
 
 # Disallow shared content pages
-Disallow: /s/
+Disallow: /s/
+Disallow: /share/

packages/web/public/site.webmanifest

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/site.webmanifest

packages/web/public/web-app-manifest-192x192.png

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/web-app-manifest-192x192.png

packages/web/public/web-app-manifest-512x512.png

@@ -0,0 +1 @@
+../../ui/src/assets/favicon/web-app-manifest-512x512.png