PolicyEngine / PolicyEngine/policyengine-app-v2
Add apple-touch-icon and PWA manifest to website host
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/`:
- 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
- Optionally add a PWA `manifest.webmanifest` so Android Chrome and iOS both have first-class home-screen icons and theme colors
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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