Skip to content

[Feature] Add a lightweight brand logo, favicon, and social image #8

Description

@maquchizi

Problem

ProbeView has no visual identity. The header is text-only ({siteName} +
"Status"), the favicon is the stock Next.js default (app/favicon.ico), and
there is no social/OG image, apple-touch-icon, or theme-color, so shared links
preview as bare text and the browser tab/mobile chrome are unbranded. The repo
also still carries the default Next.js placeholder SVGs (public/next.svg,
vercel.svg, file.svg, globe.svg, window.svg).

Proposed solution

Introduce a small, hardcoded SVG product mark for ProbeView (not the
deployment's siteName) so it stays white-label / self-host-safe, reused
everywhere it makes sense:

  • A dependency-free SVG mark component matching the existing
    components/icons.tsx family (viewBox="0 0 24 24", currentColor,
    strokeWidth="2", round caps/joins) that adapts to the light/dark theme.
  • Place the mark in the header lockup (app/layout.tsx) beside siteName.
  • Favicon via App Router app/icon.svg, replacing the stock app/favicon.ico.
  • Social image via app/opengraph-image and an app/apple-icon.
  • theme-color (light/dark) through the viewport export.
  • Remove the unused public/*.svg placeholders.

The exact glyph is left to the implementer, provided it reads clearly at 16px,
works in both themes via currentColor, and keeps the compact status-page feel.

Alternatives considered

  • A siteName-specific logo — rejected because it breaks the white-label /
    self-host design; branding should stay portable and env-driven.
  • Committing binary .ico/.png assets — a static SVG (plus generated
    opengraph-image/apple-icon) is lighter and theme-aware.
  • Making the mark configurable now — deferred; hardcoded is enough for now.

Additional context

  • Keep credentials server-only and behavior read-only; this is presentation
    only, no new runtime state.
  • Palette lives in app/globals.css (status green #22c55e); the mark should
    lean on currentColor rather than coupling to it.
  • Update docs/ if any user-visible branding/config expectations change.

Note: this project is intentionally a read-only live uptime/latency view
with no incidents feature. Proposals that keep it stateless and configurable
by environment are most likely to be accepted.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions