Skip to content

Favicons + PWA manifest #117

@ftvision

Description

@ftvision

Last brand/SEO item from the audit. Design brief is at plan/docs/brand/icons.md.

Status (2026-05-14): A minimal placeholder icon.svg shipped in #118 (black square + serif "A") so the site no longer falls back to the platform globe icon. The rest of the icon set + PWA manifest is still pending. Priority is now low — picking this up only matters if/when we (a) add PWA install support, (b) want iOS home-screen pinning to look on-brand, or (c) do a brand polish pass. Content work takes precedence.

Why

Even with the placeholder icon.svg in #118, the site still has no apple-icon, no PWA manifest, no maskable icon, no Safari pinned-tab mark. Every non-browser-tab surface — iOS home-screen pin, PWA install dialog, Android adaptive icon, Safari pinned tab — still falls back to a platform default. Costs brand recall in those specific surfaces.

What still needs to ship

File Size Where Status
icon.svg scalable apps/blog/app/icon.svg ✅ shipped in #118 (placeholder)
favicon.ico multi-res 16/32/48 apps/blog/app/favicon.ico pending
apple-icon.png 180×180 apps/blog/app/apple-icon.png pending
icon-192.png 192×192 referenced in manifest pending
icon-512.png 512×512 referenced in manifest pending
icon-maskable-512.png 512×512 with 80% safe zone referenced in manifest pending
safari-pinned-tab.svg monochrome apps/blog/app/safari-pinned-tab.svg pending
manifest.webmanifest JSON apps/blog/app/manifest.ts (Next file convention) pending

Total ~6 files remaining, < 50 KB combined. The shipped icon.svg should also be replaced once the brand concept is finalized — the current "A" mark is a placeholder, not a brand decision.

Three decisions still needed before implementation

  1. Concept — pick one:

    • AM monogram (safest, type-driven; current placeholder leans this way)
    • 思 ideograph (most distinctive, dual-lingual brand)
    • Abstract mark (most modern, language-agnostic)
  2. Color palette — pick one:

    • Dark on white, nyt-blue #326891 accent (matches the OG card + actual brand token)
    • Inverted: nyt-blue background, white mark
    • Other
  3. Production path — pick one:

    • I generate from a canonical SVG (cheapest, ships today)
    • You hand-design in Figma (best visual control, slower)
    • Hybrid: you design the source SVG, I generate the rasters (one source of truth)

Notes from the SEO work

Blocked on

User decisions only. No code work needed before all three are picked. Given the content-first pivot, suggest deferring until either (a) PWA install becomes a real requirement, or (b) a dedicated brand pass is scheduled.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions