Skip to content

App icon unreadable at favicon sizes; OG image and PWA metadata missing #4

Description

@bunlongheng

Problem

Icon. The app icon is dark devices on a black squircle. It reads fine at 512px and turns into a solid black blob at 32px and 16px, which is exactly where a favicon lives.

Wiring. Several pieces are wrong or absent:

  • app/apple-touch-icon.png is not an App Router file convention. Next never emitted a link for it, so Add to Home Screen had no icon to use. The convention is app/apple-icon.png.
  • app/favicon.ico duplicated public/favicon.ico (and was a PNG carrying an .ico extension).
  • No metadataBase, so any Open Graph image would resolve relative and break for crawlers.
  • No Open Graph image at all, and no Twitter card. Sharing the Vercel link produces a bare text preview.
  • No apple-mobile-web-app-title, so the home screen label fell back to the full page title.
  • No theme-color in the HTML.
  • Manifest theme_color was #4f46e5 while the body renders #0e0e10.
  • The manifest maskable entry pointed at the standard 512 icon, which has no safe zone, so Android crops into the art.
  • Title and description contained em dashes.

Expected

A mark that stays legible at 16px, correct Next file conventions for icon and apple icon, a real 1200x630 share card, and a manifest that matches how the app actually renders.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions