WORK-193
ID:WORK-193Status:in-progress

Favicon and app icon set

Generate the favicon and app icon variants from the canonical prism SVG (WORK-192). Includes the standard browser favicon sizes, Apple touch icon, and a web manifest icons entry. Per spec, ships the current 16px design as-is and revisits a thicker-stroke favicon-specific variant only if the 16px output reads as a blob in practice.

Priority:mediumComplexity:smallMilestone:v0.14.0Source:SPEC-050
claude/v0.14.0-spec-050-brand-mark View source

Criteria completion

Criteria completion: 5 of 8 (63%) checked; tracking started on May 18, no incremental history yet0%25%50%75%100%May 18Jun 15

Tracking started May 18 — check back for trends.

Relationships

Implements 1
Related 3
Branches 3
claude/v0.14.0-spec-050-brand-mark current in-progress
main donechore/v0.14.0-milestone-closeout doneclaude/spec-053-tint-authoring-notes ready
History 1
  1. 9f39178
    Created (in-progress)by bjornolofandersson

Acceptance Criteria

  • PNG variants generated at every size used by browsers / OS chrome: 16, 24, 32, 48, 64, 96, 180 (Apple touch icon), 192 (manifest), 512 (large surfaces). Two colour variants each: navy #1d3557 on transparent (*-light.png) and white #ffffff on transparent (*-dark.png). 18 PNGs total in packages/lumina/assets/logo/.
  • Generation is reproducible via node packages/lumina/scripts/generate-favicons.mjs — uses sharp to rasterise the canonical SVG at each size with the embedded media-query stylesheet rewritten to a fixed colour per variant
  • <link rel="icon" …> and <link rel="apple-touch-icon" …> tags already present in site/src/app.html continue to reference the right paths; the underlying files were swapped in by WORK-194
  • favicon.ico multi-frame file (deferred — the SVG favicon covers modern browsers, the PNG fallbacks cover everything else. A .ico is only needed for very old IE / Windows shortcuts; no consumer in this milestone needs it. Easy follow-up if it's ever required.)
  • site/static/site.webmanifest (deferred — the site has no manifest today; introducing one is out of scope for the brand-mark swap. Follow-up if/when PWA support is in scope.)
  • Distinct dark-variant favicon via <link rel="icon" media="(prefers-color-scheme: dark)" …> (deferred — the SVG favicon already adapts via its embedded prefers-color-scheme rule; ship that single file rather than two separate PNGs with media queries)
  • Old favicon files are removed (no dangling references) — the previous cube-mark PNGs were overwritten in place by their prism replacements; same filenames continue to be referenced by app.html
  • At least one visual inspection of how the favicon renders — verified PNGs are real (file command shows correct dimensions and RGBA) and the SVG renders with the right geometry on cd site && npm run dev

Approach

The icons can be generated from the canonical SVG at build time or pre-generated and committed. Lean toward pre-generated for simplicity — favicon assets don't change often, and committed PNGs make the build pipeline less brittle.

Use a small Node script (one-off, doesn't need to live in the published packages) that takes the canonical SVG and uses sharp or resvg-js to render PNGs at each size. The .ico file can be assembled from the PNG variants.

Colours: the dark-mode default favicon uses white on the lumina dark navy (today) or warm-near-black (post-WORK-200). The light-mode variant uses the deep ink / deep navy on warm off-white. Both variants use the same SVG geometry — only stroke/fill colours differ.

Dependencies

  • WORK-192 — canonical SVG must exist.

References

  • SPEC-050 — icon-scale previews, the "ship 16px as-is, revisit if blobby" decision
  • site/static/ — current favicon assets to identify and replace