PolicyEngine / PolicyEngine/policyengine-app-v2

Add apple-touch-icon and PWA manifest to website host

Open
#1,016 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
HTML
Stars
1
Forks
3
Avg merge
1d 50m
Merged PRs (30d)
39

Description

Problem

When users add policyengine.org to their iOS/Android home screen, the home-screen icon is auto-generated by the OS rather than supplied by us. On iOS this currently produces a default-styled tile (a green square containing a glyph that doesn't read as a PolicyEngine logo) because Safari falls back to a synthetic icon when no `apple-touch-icon` link or PWA manifest is present.

Inspection of `https://policyengine.org/\` confirms:

```html

\`\`\`

That is the only icon-related tag served. There is:

  • No `<link rel="apple-touch-icon">`
  • No `<link rel="manifest">` (no PWA manifest)
  • No fallback PNG at any of the standard paths iOS probes (`/apple-touch-icon.png`, `/apple-touch-icon-precomposed.png`, `/apple-icon.png` — all 404)

This is a host-website issue, not a per-zone issue. Zones can ship their own apple-icons separately.

Proposed work

In `website/`:

  1. Add a 180×180 PNG `apple-icon.png` using the Next.js app icons file convention, or via `metadata.icons.apple` in the root layout
  2. Optionally add a PWA `manifest.webmanifest` so Android Chrome and iOS both have first-class home-screen icons and theme colors
  3. Verify on a real iOS device that "Add to Home Screen" produces the PolicyEngine teal logo, not the OS-generated fallback

Source asset: `app/public/assets/logos/policyengine/teal-square.png` (244×244) can be resized for this purpose.

Out of scope

  • Per-zone apple-icons (each zone is responsible for its own; tracked separately in the multizone audit)
  • Favicon changes (the existing `/favicon.svg` is fine)

Context

Surfaced during the multizone audit (#975) while reviewing the favicon fix in PolicyEngine/working-parents-tax-relief-act#16. Verified the missing icon by adding policyengine.org to an iOS home screen and observing the auto-generated fallback tile.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in website/ and inspect the Next.js app icon or root metadata entry point, using app/public/assets/logos/policyengine/teal-square.png as the source asset. Add the host site's apple-touch icon and consider the optional manifest, then verify that the served icon works through iOS or Android “Add to Home Screen” without changing favicon.svg or per-zone icons.

Written by the indexing model from the issue text.

Assessment

Tech stack
next.js
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
74/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.