fix: favicons across all web properties

2026-02-01 22:48:16 +00:00 · 2025-11-25 10:45:13 -06:00
parent 7d5e6718dc
commit b4e6f128d7
49 changed files with 66 additions and 84 deletions
--- a/bun.lock
+++ b/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:",
--- a/packages/console/app/package.json
+++ b/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:",
--- a/packages/console/app/public/apple-touch-icon.png
+++ b/packages/console/app/public/apple-touch-icon.png
@@ -0,0 +1 @@
+../../../ui/src/assets/favicon/apple-touch-icon.png
--- a/packages/console/app/public/favicon-96x96.png
+++ b/packages/console/app/public/favicon-96x96.png
@@ -0,0 +1 @@
+../../../ui/src/assets/favicon/favicon-96x96.png
--- a/packages/console/app/public/favicon-zen.svg
+++ b/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>
--- a/packages/console/app/public/favicon.ico
+++ b/packages/console/app/public/favicon.ico
@@ -0,0 +1 @@
+../../../ui/src/assets/favicon/favicon.ico
--- a/packages/console/app/public/robots.txt
+++ b/packages/console/app/public/robots.txt
@@ -2,4 +2,5 @@ User-agent: *
 Allow: /

 # Disallow shared content pages
-Disallow: /s/
+Disallow: /s/
+Disallow: /share/
--- a/packages/console/app/public/site.webmanifest
+++ b/packages/console/app/public/site.webmanifest
@@ -0,0 +1 @@
+../../../ui/src/assets/favicon/site.webmanifest
--- a/packages/console/app/public/web-app-manifest-192x192.png
+++ b/packages/console/app/public/web-app-manifest-192x192.png
@@ -0,0 +1 @@
+../../../ui/src/assets/favicon/web-app-manifest-192x192.png
--- a/packages/console/app/public/web-app-manifest-512x512.png
+++ b/packages/console/app/public/web-app-manifest-512x512.png
@@ -0,0 +1 @@
+../../../ui/src/assets/favicon/web-app-manifest-512x512.png
--- a/packages/console/app/src/app.tsx
+++ b/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>
      )}
--- a/packages/console/app/src/entry-server.tsx
+++ b/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}
--- a/packages/console/app/src/routes/workspace.tsx
+++ b/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">
--- a/packages/console/app/src/routes/zen/index.tsx
+++ b/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"} />
--- a/packages/desktop/index.html
+++ b/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">
--- a/packages/desktop/public/apple-touch-icon.png
+++ b/packages/desktop/public/apple-touch-icon.png
@@ -0,0 +1 @@
+../../ui/src/assets/favicon/apple-touch-icon.png
--- a/packages/desktop/public/favicon-96x96.png
+++ b/packages/desktop/public/favicon-96x96.png
@@ -0,0 +1 @@
+../../ui/src/assets/favicon/favicon-96x96.png
--- a/packages/desktop/public/favicon.ico
+++ b/packages/desktop/public/favicon.ico
@@ -0,0 +1 @@
+../../ui/src/assets/favicon/favicon.ico
--- a/packages/desktop/public/site.webmanifest
+++ b/packages/desktop/public/site.webmanifest
@@ -0,0 +1 @@
+../../ui/src/assets/favicon/site.webmanifest
--- a/packages/desktop/public/web-app-manifest-192x192.png
+++ b/packages/desktop/public/web-app-manifest-192x192.png
@@ -0,0 +1 @@
+../../ui/src/assets/favicon/web-app-manifest-192x192.png
--- a/packages/desktop/public/web-app-manifest-512x512.png
+++ b/packages/desktop/public/web-app-manifest-512x512.png
@@ -0,0 +1 @@
+../../ui/src/assets/favicon/web-app-manifest-512x512.png
--- a/packages/desktop/src/index.tsx
+++ b/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="/"
--- a/packages/enterprise/public/apple-touch-icon.png
+++ b/packages/enterprise/public/apple-touch-icon.png
@@ -0,0 +1 @@
+../../ui/src/assets/favicon/apple-touch-icon.png
--- a/packages/enterprise/public/favicon-96x96.png
+++ b/packages/enterprise/public/favicon-96x96.png
@@ -0,0 +1 @@
+../../ui/src/assets/favicon/favicon-96x96.png
--- a/packages/enterprise/public/favicon.ico
+++ b/packages/enterprise/public/favicon.ico
@@ -0,0 +1 @@
+../../ui/src/assets/favicon/favicon.ico
--- a/packages/enterprise/public/site.webmanifest
+++ b/packages/enterprise/public/site.webmanifest
@@ -0,0 +1 @@
+../../ui/src/assets/favicon/site.webmanifest
--- a/packages/enterprise/public/web-app-manifest-192x192.png
+++ b/packages/enterprise/public/web-app-manifest-192x192.png
@@ -0,0 +1 @@
+../../ui/src/assets/favicon/web-app-manifest-192x192.png
--- a/packages/enterprise/public/web-app-manifest-512x512.png
+++ b/packages/enterprise/public/web-app-manifest-512x512.png
@@ -0,0 +1 @@
+../../ui/src/assets/favicon/web-app-manifest-512x512.png
--- a/packages/enterprise/src/app.tsx
+++ b/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 />
--- a/packages/enterprise/src/entry-server.tsx
+++ b/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>
--- a/packages/ui/src/assets/favicon/apple-touch-icon.png
+++ b/packages/ui/src/assets/favicon/apple-touch-icon.png
--- a/packages/ui/src/assets/favicon/favicon-96x96.png
+++ b/packages/ui/src/assets/favicon/favicon-96x96.png
--- a/packages/ui/src/assets/favicon/favicon.ico
+++ b/packages/ui/src/assets/favicon/favicon.ico
--- 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>
--- 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"
 }
+
--- a/packages/ui/src/assets/favicon/web-app-manifest-192x192.png
+++ b/packages/ui/src/assets/favicon/web-app-manifest-192x192.png
--- a/packages/ui/src/assets/favicon/web-app-manifest-512x512.png
+++ b/packages/ui/src/assets/favicon/web-app-manifest-512x512.png
--- 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} />
    </>
  )
 }
--- a/packages/ui/src/components/fonts.tsx
+++ b/packages/ui/src/components/fonts.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>{`
--- 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 />
--- a/packages/web/astro.config.mjs
+++ b/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/`,
      },
--- a/packages/web/public/apple-touch-icon.png
+++ b/packages/web/public/apple-touch-icon.png
@@ -0,0 +1 @@
+../../ui/src/assets/favicon/apple-touch-icon.png
--- a/packages/web/public/favicon-96x96.png
+++ b/packages/web/public/favicon-96x96.png
@@ -0,0 +1 @@
+../../ui/src/assets/favicon/favicon-96x96.png
--- a/packages/web/public/favicon.ico
+++ b/packages/web/public/favicon.ico
@@ -0,0 +1 @@
+../../ui/src/assets/favicon/favicon.ico
--- a/packages/web/public/favicon.svg
+++ b/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>
--- a/packages/web/public/favicon.svg
+++ b/packages/web/public/favicon.svg
@@ -0,0 +1 @@
+../../ui/src/assets/favicon/favicon.svg
--- a/packages/web/public/robots.txt
+++ b/packages/web/public/robots.txt
@@ -2,4 +2,5 @@ User-agent: *
 Allow: /

 # Disallow shared content pages
-Disallow: /s/
+Disallow: /s/
+Disallow: /share/
--- a/packages/web/public/site.webmanifest
+++ b/packages/web/public/site.webmanifest
@@ -0,0 +1 @@
+../../ui/src/assets/favicon/site.webmanifest
--- a/packages/web/public/web-app-manifest-192x192.png
+++ b/packages/web/public/web-app-manifest-192x192.png
@@ -0,0 +1 @@
+../../ui/src/assets/favicon/web-app-manifest-192x192.png
--- a/packages/web/public/web-app-manifest-512x512.png
+++ b/packages/web/public/web-app-manifest-512x512.png
@@ -0,0 +1 @@
+../../ui/src/assets/favicon/web-app-manifest-512x512.png
				`@@ -0,0 +1 @@`
				`../../../ui/src/assets/favicon/apple-touch-icon.png`
				`@@ -0,0 +1 @@`
				`../../../ui/src/assets/favicon/favicon-96x96.png`
				`@@ -0,0 +1 @@`
				`../../../ui/src/assets/favicon/site.webmanifest`
				`@@ -0,0 +1 @@`
				`../../../ui/src/assets/favicon/web-app-manifest-192x192.png`
				`@@ -0,0 +1 @@`
				`../../ui/src/assets/favicon/apple-touch-icon.png`
				`@@ -0,0 +1 @@`
				`../../ui/src/assets/favicon/favicon-96x96.png`
				`@@ -0,0 +1 @@`
				`../../ui/src/assets/favicon/site.webmanifest`
				`@@ -0,0 +1 @@`
				`../../ui/src/assets/favicon/web-app-manifest-192x192.png`