diff --git a/tests/now-svg.test.ts b/tests/now-svg.test.ts
index 0d63955..3d9c351 100644
--- a/tests/now-svg.test.ts
+++ b/tests/now-svg.test.ts
@@ -1,20 +1,30 @@
 import { describe, expect, it } from 'vitest'
 import {
   ACTIVITY_STALE_MS,
+  ACTIVITY_URL,
+  ICON_MAX_BYTES,
   NOW_THEMES,
   fetchNowActivity,
+  fetchNowIcon,
+  fitNowRow,
   handleNowSvg,
+  nowCopy,
   nowIsSleeping,
   nowLine,
   nowSvgHeaders,
   nowThemeFromPath,
   parseNowActivity,
   renderNowSvg,
+  truncateNowText,
   xmlEscape,
 } from '../workers/froq-api/src/nowSvg'
 
 const FRESH = '2026-10-28T10:00:00.000Z'
 const NOW = Date.parse(FRESH)
+const PNG_1X1_B64 =
+  'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg=='
+const PNG_1X1 = Uint8Array.from(atob(PNG_1X1_B64), c => c.charCodeAt(0))
+const PNG_DATA_URI = `data:image/png;base64,${PNG_1X1_B64}`
 
 describe('nowThemeFromPath', () => {
   it('maps light and dark paths', () => {
@@ -61,6 +71,28 @@ describe('parseNowActivity', () => {
     })
   })
 
+  it('keeps process.iconUrl only when the process has a name', () => {
+    expect(
+      parseNowActivity({
+        active: true,
+        timestamp: FRESH,
+        process: {
+          name: 'Zed',
+          iconUrl: 'https://example.com/zed.png',
+        },
+      }),
+    ).toMatchObject({
+      processName: 'Zed',
+      iconUrl: 'https://example.com/zed.png',
+    })
+    expect(
+      parseNowActivity({
+        active: true,
+        process: { iconUrl: 'https://example.com/orphan.png' },
+      }),
+    ).not.toHaveProperty('iconUrl')
+  })
+
   it('treats junk payloads as inactive', () => {
     expect(parseNowActivity(null)).toEqual({ active: false })
     expect(parseNowActivity('nope')).toEqual({ active: false })
@@ -114,6 +146,18 @@ describe('nowLine', () => {
     })
   })
 
+  it('passes iconUrl through on both active and sleeping lines', () => {
+    const iconUrl = 'https://example.com/zed.png'
+    expect(
+      nowLine({ active: true, timestamp: FRESH, processName: 'Zed', iconUrl }, NOW),
+    ).toMatchObject({ kind: 'active', app: 'Zed', iconUrl })
+    expect(nowLine({ active: false, processName: 'Zed', iconUrl }, NOW)).toMatchObject({
+      kind: 'sleeping',
+      app: 'Zed',
+      iconUrl,
+    })
+  })
+
   it('sleeping copy uses the last app, or 眠了 when unknown', () => {
     expect(nowLine(null, NOW)).toEqual({ kind: 'sleeping' })
     expect(nowLine({ active: false, timestamp: FRESH, processName: 'Cursor' }, NOW)).toEqual({
@@ -123,24 +167,116 @@ describe('nowLine', () => {
   })
 })
 
+describe('nowCopy', () => {
+  it('keeps the existing Chinese lines', () => {
+    expect(nowCopy({ kind: 'active', app: 'Zed' })).toEqual({
+      prefix: '正在 ',
+      app: 'Zed',
+      suffix: '',
+    })
+    expect(
+      nowCopy({ kind: 'active', app: 'Vivaldi', media: 'Helplessness Blues – Fleet Foxes' }),
+    ).toEqual({
+      prefix: '正在 ',
+      app: 'Vivaldi',
+      suffix: ' · Helplessness Blues – Fleet Foxes',
+    })
+    expect(nowCopy({ kind: 'sleeping', app: 'Cursor' })).toEqual({
+      prefix: '在 ',
+      app: 'Cursor',
+      suffix: ' 中眠了',
+    })
+    expect(nowCopy({ kind: 'sleeping' })).toEqual({
+      prefix: '眠了',
+      app: '',
+      suffix: '',
+    })
+  })
+})
+
+describe('fitNowRow', () => {
+  it('truncates media before the app name', () => {
+    const media = ` · ${'Helplessness Blues – Fleet Foxes '.repeat(12)}`
+    const fitted = fitNowRow(
+      { prefix: '正在 ', app: 'Vivaldi', suffix: media },
+      { hasIcon: true, sleeping: false },
+    )
+    expect(fitted.app).toBe('Vivaldi')
+    expect(fitted.suffix).toContain('…')
+    expect(fitted.suffix.length).toBeLessThan(media.length)
+  })
+
+  it('truncates a long app when that is the only overflow', () => {
+    const app = 'W'.repeat(120)
+    const fitted = fitNowRow(
+      { prefix: '正在 ', app, suffix: '' },
+      { hasIcon: false, sleeping: false },
+    )
+    expect(fitted.app).toContain('…')
+    expect(fitted.app.length).toBeLessThan(app.length)
+  })
+})
+
+describe('truncateNowText', () => {
+  it('returns the original string when it already fits', () => {
+    expect(truncateNowText('Zed', 400)).toBe('Zed')
+  })
+})
+
 describe('renderNowSvg', () => {
-  it('accents 正在 on the light theme', () => {
+  it('draws a SiteDoing-like working row: ink dot, mono, muted 正在', () => {
     const svg = renderNowSvg({ kind: 'active', app: 'Zed' }, NOW_THEMES.light)
-    expect(svg).toContain('fill="#a83429">正在</tspan>')
-    expect(svg).toContain('<tspan> Zed</tspan>')
-    expect(svg).toContain('font-family="Georgia,')
+    expect(svg).toContain('fill="#1d1d1a"')
+    expect(svg).toContain('fill="#5c5a54"')
+    expect(svg).toContain('正在 ')
+    expect(svg).toContain('Zed')
+    expect(svg).toContain('ui-monospace')
+    expect(svg).not.toContain('Georgia')
+    expect(svg).not.toContain('serif')
     expect(svg).toContain('width="640"')
-    expect(svg).toContain('height="28"')
+    expect(svg).toContain('height="24"')
+    expect(svg).toMatch(/<circle[^>]*fill="#1d1d1a"/)
+    expect(svg).not.toContain('font-style="italic"')
   })
 
-  it('sleeping line is italic muted, including 眠了', () => {
+  it('sleeping line is hollow muted dot + 眠了, not italic serif', () => {
     const withApp = renderNowSvg({ kind: 'sleeping', app: 'Cursor' }, NOW_THEMES.dark)
-    expect(withApp).toContain('font-style="italic"')
-    expect(withApp).toContain('fill="#9c968c"')
-    expect(withApp).toContain('在 Cursor 中眠了')
+    expect(withApp).not.toContain('font-style="italic"')
+    expect(withApp).toContain('fill="none"')
+    expect(withApp).toContain('stroke="#9c968c"')
+    expect(withApp).toContain('在 ')
+    expect(withApp).toContain('Cursor')
+    expect(withApp).toContain(' 中眠了')
+    expect(withApp).toContain('id="now-sleep"')
+    expect(withApp).toContain('ui-monospace')
     expect(renderNowSvg({ kind: 'sleeping' }, NOW_THEMES.dark)).toContain('眠了')
   })
 
+  it('embeds a PNG data URI beside the app and rejects remote hrefs', () => {
+    const withIcon = renderNowSvg({ kind: 'active', app: 'Zed' }, NOW_THEMES.light, PNG_DATA_URI)
+    expect(withIcon).toContain(`href="${PNG_DATA_URI}"`)
+    expect(withIcon).toContain('width="16"')
+    expect(withIcon).toContain('height="16"')
+    const remote = renderNowSvg(
+      { kind: 'active', app: 'Zed' },
+      NOW_THEMES.light,
+      'https://evil.example/zed.png',
+    )
+    expect(remote).not.toContain('evil.example')
+    expect(remote).not.toContain('<image')
+  })
+
+  it('ellipsizes long media so the row stays inside 640px', () => {
+    const media = 'Helplessness Blues – Fleet Foxes '.repeat(20)
+    const svg = renderNowSvg({ kind: 'active', app: 'Vivaldi', media }, NOW_THEMES.light)
+    const drawn = [...svg.matchAll(/<text\b[^>]*>([^<]*)<\/text>/g)].map(match => match[1]).join('')
+    expect(drawn).toContain('…')
+    expect(drawn).not.toContain(media)
+    expect(drawn).toContain('Vivaldi')
+    expect(svg).toContain(`aria-label="正在 Vivaldi · ${media}"`)
+    expect(svg).toContain('width="640"')
+  })
+
   it('escapes XML in labels', () => {
     const svg = renderNowSvg({ kind: 'active', app: 'A&B <script>' }, NOW_THEMES.light)
     expect(svg).toContain('A&amp;B &lt;script&gt;')
@@ -169,6 +305,56 @@ describe('handleNowSvg', () => {
     const body = await res.text()
     expect(body).toContain('正在')
     expect(body).toContain('Zed')
+    expect(body).toContain('ui-monospace')
+  })
+
+  it('inlines a fetched PNG icon as a data URI', async () => {
+    const iconUrl = 'https://icons.example/zed.png'
+    const payload = {
+      active: true,
+      timestamp: new Date().toISOString(),
+      process: { name: 'Zed', iconUrl },
+    }
+    const res = await handleNowSvg(
+      new Request('https://api.froq.me/now-light.svg'),
+      'light',
+      async input => {
+        if (input === ACTIVITY_URL) {
+          return new Response(JSON.stringify(payload), { status: 200 })
+        }
+        if (input === iconUrl) {
+          return new Response(PNG_1X1, { headers: { 'Content-Type': 'image/png' }, status: 200 })
+        }
+        throw new Error(`unexpected fetch ${input}`)
+      },
+    )
+    const body = await res.text()
+    expect(body).toContain(`href="${PNG_DATA_URI}"`)
+    expect(body).not.toContain(iconUrl)
+  })
+
+  it('stays text-only when the icon fetch fails', async () => {
+    const iconUrl = 'https://icons.example/zed.png'
+    const payload = {
+      active: true,
+      timestamp: new Date().toISOString(),
+      process: { name: 'Zed', iconUrl },
+    }
+    const res = await handleNowSvg(
+      new Request('https://api.froq.me/now-light.svg'),
+      'light',
+      async input => {
+        if (input === ACTIVITY_URL) {
+          return new Response(JSON.stringify(payload), { status: 200 })
+        }
+        return new Response('nope', { status: 500 })
+      },
+    )
+    const body = await res.text()
+    expect(body).toContain('Zed')
+    expect(body).toContain('正在')
+    expect(body).not.toContain('<image')
+    expect(body).not.toContain(iconUrl)
   })
 
   it('fetch failure renders 眠了, never a live app', async () => {
@@ -196,6 +382,41 @@ describe('handleNowSvg', () => {
   })
 })
 
+describe('fetchNowIcon', () => {
+  it('returns a png data URI for a PNG body', async () => {
+    await expect(
+      fetchNowIcon('https://icons.example/a.png', async () => {
+        return new Response(PNG_1X1, { headers: { 'Content-Type': 'image/png' }, status: 200 })
+      }),
+    ).resolves.toBe(PNG_DATA_URI)
+  })
+
+  it('rejects svg, oversize, and non-http URLs', async () => {
+    await expect(
+      fetchNowIcon('https://icons.example/a.svg', async () => {
+        return new Response('<svg xmlns="http://www.w3.org/2000/svg"></svg>', {
+          headers: { 'Content-Type': 'image/svg+xml' },
+          status: 200,
+        })
+      }),
+    ).resolves.toBeUndefined()
+
+    const huge = new Uint8Array(ICON_MAX_BYTES + 1)
+    huge[0] = 0x89
+    huge[1] = 0x50
+    huge[2] = 0x4e
+    huge[3] = 0x47
+    await expect(
+      fetchNowIcon('https://icons.example/huge.png', async () => {
+        return new Response(huge, { headers: { 'Content-Type': 'image/png' }, status: 200 })
+      }),
+    ).resolves.toBeUndefined()
+
+    await expect(fetchNowIcon('data:image/png;base64,aaaa')).resolves.toBeUndefined()
+    await expect(fetchNowIcon('/relative.png')).resolves.toBeUndefined()
+  })
+})
+
 describe('fetchNowActivity', () => {
   it('returns null when the upstream is down', async () => {
     expect(
diff --git a/workers/froq-api/README.md b/workers/froq-api/README.md
index 07a6496..e888d8c 100644
--- a/workers/froq-api/README.md
+++ b/workers/froq-api/README.md
@@ -39,10 +39,19 @@ locked to froq.me.
 Cache: `Cache-Control: public, max-age=60, s-maxage=60` plus matching `Expires`.
 Also `Cross-Origin-Resource-Policy: cross-origin` for Camo.
 
+The row matches froq.me `SiteDoing`: monospace type, 8px status dot (filled ink
+when working, hollow muted when sleeping), and the 16×16 app icon from
+`process.iconUrl`. Camo cannot load arbitrary image hosts, so the Worker fetches
+the icon and inlines it as a `data:image/png;base64,…` URI. Icon fetch failure
+is text-only — never an external `<image href>`.
+
 Sleeping (same rule as froq.me `activityIsSleeping`, plus `active === false`):
 missing/invalid timestamp, stamp older than 5 minutes, or `active` not true.
 Fetch failure renders `眠了` — never a fake live app.
 
+Copy stays the existing Chinese lines: `正在 {app} · media`, `在 {app} 中眠了`,
+or `眠了`. Long app/media labels ellipsize inside the 640px README width.
+
 ```html
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://api.froq.me/now-dark.svg">
diff --git a/workers/froq-api/src/nowSvg.ts b/workers/froq-api/src/nowSvg.ts
index d4598d3..3d75927 100644
--- a/workers/froq-api/src/nowSvg.ts
+++ b/workers/froq-api/src/nowSvg.ts
@@ -1,17 +1,36 @@
-/** Live 「正在…」 SVG for the GitHub profile README (Camo-friendly, unauthenticated). */
+/** Live 「正在…」 SVG for the GitHub profile README (Camo-friendly, unauthenticated).
+ *
+ * Visual source of truth: `app/components/SiteDoing.vue` — mono type, 8px status
+ * dot, xs muted copy, 16px app icon. GitHub Camo cannot reshuffle phrases or
+ * load arbitrary `<image href>` hosts, so the Worker inlines `iconUrl` as a
+ * PNG data URI (text-only if that fetch fails).
+ */
 
 export const ACTIVITY_URL = 'https://pub-d05ff6ec0ecf448ca7cc6c2f0c0a5bcc.r2.dev/activity.json'
 
 /** Same 5-minute stale window as froq.me `activityIsSleeping`. */
 export const ACTIVITY_STALE_MS = 5 * 60 * 1000
 
+export const ICON_MAX_BYTES = 64 * 1024
+
 const SVG_WIDTH = 640
-const SVG_HEIGHT = 28
+const SVG_HEIGHT = 24
+const FONT_SIZE = 12
+const DOT_SIZE = 8
+const ICON_SIZE = 16
+const SLEEP_SIZE = 12
+const PAD_LEFT = 0
+const PAD_RIGHT = 8
+const GAP_DOT = 8
+const GAP_INNER = 4
+const ASCII_EM = 0.7
+const WIDE_EM = 1.05
 const FETCH_TIMEOUT_MS = 2500
+const ICON_TIMEOUT_MS = 2000
 const CACHE_TTL_S = 60
 
-/** Match profile `scripts/stats.mjs` / now.mjs. */
-const SERIF = "Georgia, 'Iowan Old Style', Palatino, 'Palatino Linotype', 'Times New Roman', serif"
+/** Site `--font-mono` fallback. LXGW is not available inside GitHub Camo. */
+const MONO = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace"
 
 export type NowThemeName = 'light' | 'dark'
 
@@ -21,6 +40,7 @@ export interface NowTheme {
   muted: string
 }
 
+/** Same hex as `app/assets/css/tokens.css` (`--ink` / `--colored-ink` / `--muted`). */
 export const NOW_THEMES: Record<NowThemeName, NowTheme> = {
   light: { ink: '#1d1d1a', accent: '#a83429', muted: '#5c5a54' },
   dark: { ink: '#ece7dc', accent: '#7ea3d9', muted: '#9c968c' },
@@ -30,13 +50,20 @@ export interface NowActivity {
   active: boolean
   timestamp?: string
   processName?: string
+  iconUrl?: string
   mediaTitle?: string
   mediaArtist?: string
 }
 
 export type NowLine =
-  | { kind: 'active'; app?: string; media?: string }
-  | { kind: 'sleeping'; app?: string }
+  | { kind: 'active'; app?: string; media?: string; iconUrl?: string }
+  | { kind: 'sleeping'; app?: string; iconUrl?: string }
+
+export interface NowCopy {
+  prefix: string
+  app: string
+  suffix: string
+}
 
 export function nowThemeFromPath(pathname: string): NowThemeName | null {
   switch (pathname) {
@@ -68,10 +95,12 @@ export function parseNowActivity(raw: unknown): NowActivity {
   const activity: NowActivity = { active: row.active === true }
   const timestamp = asString(row.timestamp)
   const processName = process ? asString(process.name) : undefined
+  const iconUrl = process ? asString(process.iconUrl) : undefined
   const mediaTitle = media ? asString(media.title) : undefined
   const mediaArtist = media ? asString(media.artist) : undefined
   if (timestamp) activity.timestamp = timestamp
   if (processName) activity.processName = processName
+  if (processName && iconUrl) activity.iconUrl = iconUrl
   if (mediaTitle) activity.mediaTitle = mediaTitle
   if (mediaArtist) activity.mediaArtist = mediaArtist
   return activity
@@ -92,7 +121,7 @@ export function nowIsSleeping(activity: NowActivity, now = Date.now()): boolean
 
 export function nowLine(activity: NowActivity | null, now = Date.now()): NowLine {
   if (!activity || nowIsSleeping(activity, now)) {
-    return { kind: 'sleeping', app: activity?.processName }
+    return { kind: 'sleeping', app: activity?.processName, iconUrl: activity?.iconUrl }
   }
   let media: string | undefined
   if (activity.mediaTitle) {
@@ -100,7 +129,7 @@ export function nowLine(activity: NowActivity | null, now = Date.now()): NowLine
       ? `${activity.mediaTitle} – ${activity.mediaArtist}`
       : activity.mediaTitle
   }
-  return { kind: 'active', app: activity.processName, media }
+  return { kind: 'active', app: activity.processName, media, iconUrl: activity.iconUrl }
 }
 
 export function xmlEscape(value: string): string {
@@ -112,15 +141,18 @@ export function xmlEscape(value: string): string {
     .replaceAll("'", '&apos;')
 }
 
-function labelFor(line: NowLine): string {
+export function nowCopy(line: NowLine): NowCopy {
   switch (line.kind) {
-    case 'active': {
-      const app = line.app ? ` ${line.app}` : ''
-      const media = line.media ? ` · ${line.media}` : ''
-      return `正在${app}${media}`
-    }
+    case 'active':
+      return {
+        prefix: line.app ? '正在 ' : '正在',
+        app: line.app ?? '',
+        suffix: line.media ? ` · ${line.media}` : '',
+      }
     case 'sleeping':
-      return line.app ? `在 ${line.app} 中眠了` : '眠了'
+      return line.app
+        ? { prefix: '在 ', app: line.app, suffix: ' 中眠了' }
+        : { prefix: '眠了', app: '', suffix: '' }
     default: {
       const _exhaustive: never = line
       return _exhaustive
@@ -128,33 +160,147 @@ function labelFor(line: NowLine): string {
   }
 }
 
-export function renderNowSvg(line: NowLine, theme: NowTheme): string {
+function labelFor(line: NowLine): string {
+  const copy = nowCopy(line)
+  return `${copy.prefix}${copy.app}${copy.suffix}`
+}
+
+function isWideChar(ch: string): boolean {
+  const cp = ch.codePointAt(0) ?? 0
+  if (cp <= 0xff) return false
+  return (
+    (cp >= 0x1100 && cp <= 0x11ff) ||
+    (cp >= 0x2e80 && cp <= 0xa4cf) ||
+    (cp >= 0xac00 && cp <= 0xd7af) ||
+    (cp >= 0xf900 && cp <= 0xfaff) ||
+    (cp >= 0xfe10 && cp <= 0xfe19) ||
+    (cp >= 0xfe30 && cp <= 0xfe6f) ||
+    (cp >= 0xff00 && cp <= 0xff60) ||
+    (cp >= 0xffe0 && cp <= 0xffe6) ||
+    cp >= 0x1f000
+  )
+}
+
+function charWidth(ch: string): number {
+  return (isWideChar(ch) ? WIDE_EM : ASCII_EM) * FONT_SIZE
+}
+
+export function measureNowText(text: string): number {
+  let width = 0
+  for (const ch of text) width += charWidth(ch)
+  return width
+}
+
+export function truncateNowText(text: string, maxWidth: number): string {
+  if (maxWidth <= 0) return ''
+  if (measureNowText(text) <= maxWidth) return text
+  const ellipsis = '…'
+  const ellipsisW = measureNowText(ellipsis)
+  if (maxWidth < ellipsisW) return ''
+  let out = ''
+  let width = 0
+  for (const ch of text) {
+    const next = charWidth(ch)
+    if (width + next + ellipsisW > maxWidth) break
+    out += ch
+    width += next
+  }
+  return out ? `${out}${ellipsis}` : ellipsis
+}
+
+function rowExtras(hasIcon: boolean, sleeping: boolean): number {
+  const iconW = hasIcon ? GAP_INNER + ICON_SIZE : 0
+  const sleepW = sleeping ? GAP_INNER + SLEEP_SIZE : 0
+  return PAD_LEFT + DOT_SIZE + GAP_DOT + iconW + sleepW + PAD_RIGHT
+}
+
+export function fitNowRow(copy: NowCopy, opts: { hasIcon: boolean; sleeping: boolean }): NowCopy {
+  const extras = rowExtras(opts.hasIcon, opts.sleeping)
+  let app = copy.app
+  let suffix = copy.suffix
+
+  const total = (shownApp: string, shownSuffix: string) =>
+    extras + measureNowText(copy.prefix) + measureNowText(shownApp) + measureNowText(shownSuffix)
+
+  if (total(app, suffix) <= SVG_WIDTH) return { prefix: copy.prefix, app, suffix }
+
+  if (suffix.startsWith(' · ')) {
+    const budget = measureNowText(suffix) - (total(app, suffix) - SVG_WIDTH)
+    suffix = budget < measureNowText(' · …') ? '' : truncateNowText(suffix, budget)
+  }
+
+  if (total(app, suffix) <= SVG_WIDTH) return { prefix: copy.prefix, app, suffix }
+
+  const appBudget = Math.max(0, measureNowText(app) - (total(app, suffix) - SVG_WIDTH))
+  app = truncateNowText(app, appBudget)
+  return { prefix: copy.prefix, app, suffix }
+}
+
+function safeIconHref(value: string | undefined): string | undefined {
+  if (!value || !value.startsWith('data:image/') || value.startsWith('data:image/svg')) {
+    return undefined
+  }
+  return value
+}
+
+function px(n: number): string {
+  return (Math.round(n * 10) / 10).toString()
+}
+
+function textEl(x: number, y: number, value: string, family: string, fill: string): string {
+  return `<text x="${px(x)}" y="${px(y)}" dominant-baseline="central" font-family="${family}" font-size="${FONT_SIZE}" fill="${fill}" xml:space="preserve">${xmlEscape(value)}</text>`
+}
+
+function sleepMoon(x: number, cy: number, fill: string): string {
+  const y = cy - SLEEP_SIZE / 2
+  return `<path id="now-sleep" fill="${fill}" transform="translate(${px(x)} ${px(y)}) scale(${SLEEP_SIZE / 24})" d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>`
+}
+
+export function renderNowSvg(line: NowLine, theme: NowTheme, iconDataUri?: string): string {
   const label = xmlEscape(labelFor(line))
-  const family = xmlEscape(SERIF)
+  const family = xmlEscape(MONO)
+  const copy = nowCopy(line)
+  const iconHref = copy.app ? safeIconHref(iconDataUri) : undefined
+  const fitted = fitNowRow(copy, { hasIcon: Boolean(iconHref), sleeping: line.kind === 'sleeping' })
+  const cy = SVG_HEIGHT / 2
 
-  let body: string
-  switch (line.kind) {
-    case 'active': {
-      const app = line.app ? `<tspan> ${xmlEscape(line.app)}</tspan>` : ''
-      const media = line.media
-        ? `<tspan fill="${theme.muted}"> · ${xmlEscape(line.media)}</tspan>`
-        : ''
-      body = `<text x="0" y="18" font-family="${family}" font-size="13" fill="${theme.ink}"><tspan fill="${theme.accent}">正在</tspan>${app}${media}</text>`
-      break
-    }
-    case 'sleeping': {
-      body = `<text x="0" y="18" font-family="${family}" font-size="13" font-style="italic" fill="${theme.muted}">${label}</text>`
-      break
-    }
-    default: {
-      const _exhaustive: never = line
-      return _exhaustive
-    }
+  let x = PAD_LEFT
+  const dotCx = x + DOT_SIZE / 2
+  const dot =
+    line.kind === 'sleeping'
+      ? `<circle cx="${px(dotCx)}" cy="${px(cy)}" r="${(DOT_SIZE - 1) / 2}" fill="none" stroke="${theme.muted}" stroke-width="1"/>`
+      : `<circle cx="${px(dotCx)}" cy="${px(cy)}" r="${DOT_SIZE / 2}" fill="${theme.ink}"/>`
+  x += DOT_SIZE + GAP_DOT
+
+  const parts: string[] = [dot]
+  if (fitted.prefix) {
+    parts.push(textEl(x, cy, fitted.prefix, family, theme.muted))
+    x += measureNowText(fitted.prefix)
+  }
+  if (fitted.app) {
+    parts.push(textEl(x, cy, fitted.app, family, theme.muted))
+    x += measureNowText(fitted.app)
+  }
+  if (iconHref) {
+    x += GAP_INNER
+    const iconY = cy - ICON_SIZE / 2
+    parts.push(
+      `<image href="${xmlEscape(iconHref)}" x="${px(x)}" y="${px(iconY)}" width="${ICON_SIZE}" height="${ICON_SIZE}" preserveAspectRatio="xMidYMid meet"/>`,
+    )
+    x += ICON_SIZE
+  }
+  if (fitted.suffix) {
+    parts.push(textEl(x, cy, fitted.suffix, family, theme.muted))
+    x += measureNowText(fitted.suffix)
+  }
+  if (line.kind === 'sleeping') {
+    x += GAP_INNER
+    parts.push(sleepMoon(x, cy, theme.muted))
   }
 
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${SVG_WIDTH}" height="${SVG_HEIGHT}" viewBox="0 0 ${SVG_WIDTH} ${SVG_HEIGHT}" overflow="hidden" role="img" aria-label="${label}">
   <title>${label}</title>
-  ${body}
+  ${parts.join('\n  ')}
 </svg>
 `
 }
@@ -198,6 +344,96 @@ export async function fetchNowActivity(fetcher: FetchLike = fetch): Promise<NowA
   }
 }
 
+function isHttpUrl(value: string): boolean {
+  try {
+    const url = new URL(value)
+    return url.protocol === 'https:' || url.protocol === 'http:'
+  } catch {
+    return false
+  }
+}
+
+function iconMime(contentType: string | null, bytes: Uint8Array): string | undefined {
+  if (
+    bytes.length >= 8 &&
+    bytes[0] === 0x89 &&
+    bytes[1] === 0x50 &&
+    bytes[2] === 0x4e &&
+    bytes[3] === 0x47
+  ) {
+    return 'image/png'
+  }
+  if (bytes.length >= 3 && bytes[0] === 0xff && bytes[1] === 0xd8 && bytes[2] === 0xff) {
+    return 'image/jpeg'
+  }
+  if (bytes.length >= 6 && bytes[0] === 0x47 && bytes[1] === 0x49 && bytes[2] === 0x46) {
+    return 'image/gif'
+  }
+  if (
+    bytes.length >= 12 &&
+    bytes[0] === 0x52 &&
+    bytes[1] === 0x49 &&
+    bytes[2] === 0x46 &&
+    bytes[3] === 0x46 &&
+    bytes[8] === 0x57 &&
+    bytes[9] === 0x45 &&
+    bytes[10] === 0x42 &&
+    bytes[11] === 0x50
+  ) {
+    return 'image/webp'
+  }
+  if (bytes.length >= 4 && bytes[0] === 0 && bytes[1] === 0 && bytes[2] === 1 && bytes[3] === 0) {
+    return 'image/x-icon'
+  }
+  const mime = (contentType ?? '').split(';')[0]?.trim().toLowerCase()
+  switch (mime) {
+    case 'image/png':
+    case 'image/jpeg':
+    case 'image/webp':
+    case 'image/gif':
+    case 'image/x-icon':
+      return mime
+    case 'image/vnd.microsoft.icon':
+      return 'image/x-icon'
+    default:
+      return undefined
+  }
+}
+
+function bytesToBase64(bytes: Uint8Array): string {
+  let binary = ''
+  for (const byte of bytes) binary += String.fromCharCode(byte)
+  return btoa(binary)
+}
+
+/** Fetch `process.iconUrl` and return a raster `data:` URI. Fail soft. */
+export async function fetchNowIcon(
+  url: string,
+  fetcher: FetchLike = fetch,
+): Promise<string | undefined> {
+  if (!isHttpUrl(url)) return undefined
+  try {
+    const res = await fetcher(url, {
+      headers: {
+        'Accept': 'image/png,image/*;q=0.8',
+        'User-Agent': 'froq-api-now',
+      },
+      signal: AbortSignal.timeout(ICON_TIMEOUT_MS),
+    })
+    if (!res.ok) return undefined
+    const declared = Number(res.headers.get('content-length') || '0')
+    if (declared > ICON_MAX_BYTES) return undefined
+    const buf = await res.arrayBuffer()
+    if (buf.byteLength === 0 || buf.byteLength > ICON_MAX_BYTES) return undefined
+    const bytes = new Uint8Array(buf)
+    const mime = iconMime(res.headers.get('content-type'), bytes)
+    if (!mime) return undefined
+    return `data:${mime};base64,${bytesToBase64(bytes)}`
+  } catch {
+    return undefined
+  }
+}
+
 export async function handleNowSvg(
   request: Request,
   theme: NowThemeName,
@@ -209,6 +445,8 @@ export async function handleNowSvg(
   }
 
   const activity = await fetchNowActivity(fetcher)
-  const svg = renderNowSvg(nowLine(activity), NOW_THEMES[theme])
+  const line = nowLine(activity)
+  const iconDataUri = line.iconUrl ? await fetchNowIcon(line.iconUrl, fetcher) : undefined
+  const svg = renderNowSvg(line, NOW_THEMES[theme], iconDataUri)
   return new Response(svg, { status: 200, headers })
 }