Skip to content

fix(mobile): make the app icon full-bleed so iOS masks it cleanly - #37074

Merged
AmoabaKelvin merged 2 commits into
stablyai:mainfrom
tianlrz:tianlrz/fix-mobile-icon-full-bleed
Nov 4, 2026
Merged

AmoabaKelvin merged 2 commits into
stablyai:mainfrom
tianlrz:tianlrz/fix-mobile-icon-full-bleed

Conversation

@tianlrz

@tianlrz tianlrz commented Nov 1, 2026 •

Copy link
Copy Markdown
Contributor

ELI5

The app icon had rounded corners and a shiny rim drawn into the image. iOS rounds icons itself, so the rim showed as a sharp outline. The icon is now a plain square, and iOS handles the rounding and edge effects.

Files Added Deleted Net
Test 0 0 0 0
Prod 1 0 0 0

What Changed

Before: on iOS, the icon has a heavy, sharp light outline next to other apps, most visibly in Spotlight.
After: the background runs cleanly to iOS's mask, with no baked-in outline.

Only mobile/assets/icon.png changes. The ~24px bevel and transparent corners are replaced by the icon's existing vertical gradient, giving a square, opaque 1024×1024 PNG. The logo is unchanged.

Why

Apple's app icon guidelines cover both parts of this:

  • Corners: "Providing layers with pre-defined masking negatively impacts specular highlight effects and makes edges look jagged."
  • Rim: the system applies visual effects dynamically, "so there's no need to include specular highlights, drop shadows between layers, beveled edges, blurs, glows, and other effects."

For bitmap icons, the system tries to separate foreground from background and applies Liquid Glass to large, simple foreground shapes, but not to thin lines. So the logo's thin stroke may not receive it. On device, the system edge is present (see Visual Proof).

I edited the existing artwork rather than re-rendering from resources/logo.svg to keep the logo's look. An Icon Composer file would give more control but is a larger change. The Android adaptive icon is untouched, and #23872's alternate icons are separate files.

Linked Issue

Fixes #26834

Visual Proof

On an iPhone 15 Pro Max (iOS 26.6.2). "Orca" is the current App Store build; "Orca Dev" is this PR's icon in a local build.

Spotlight, before and after side by side. The current icon has a thick light rim; the new one gets only the thin system edge, like other apps:

Spotlight: current Orca vs this PR

Home screen before, with the thick rim next to other apps:

Home screen before

Home screen after, matching the edges of neighboring apps:

Home screen after

On an iPhone XS Max (iOS 18), which adds no system edge, the baked-in rim is even more visible. "Orca" is the current build, "Orca Dev" is this PR:

iOS 18 home screen: current Orca vs this PR

Simulated iOS corner mask, before (left) and after (right):

Mobile icon before and after under a simulated iOS mask

Maintainer check: both icons built into real app bundles (Expo's own flattening onto white, then actool) on an iOS 27 simulator home screen. Old on the left, this PR on the right:

iOS 27 simulator: old icon vs this PR

Testing

Checked by script on the output PNG:

  • 1024×1024 RGB with no alpha channel.
  • No bevel remains: rows above and below the logo are uniform, and the left and right edges are uniform at sampled rows.
  • No logo-region pixel moved by more than 6/255.
  • mobile/app.json is the only reference found to this file.

Tested on physical devices with a local Release build: iPhone 15 Pro Max (iOS 26.6.2), where the system draws a thin edge on the new icon, and iPhone XS Max (iOS 18), where the new icon is flat like system icons. The old rim is gone on both (see Visual Proof). Lint, typecheck, tests and build were not run because no code changed.

  • I manually tested these changes locally
  • Automated tests added/updated, or explained why not below

No automated test added: this is a single binary asset.

Risk

Only the iOS home-screen icon changes. Android takes both its adaptive and legacy launcher icons from adaptive-icon.png, and the splash uses splash-icon.png; neither file changes. If the new art looked wrong, users would see it only after the next iOS binary release, and a plain revert restores the old PNG.

Level: Low

AI Disclosure

Made with Claude Opus 5.5.

Review

Agent skill upstream boundary

  • Not applicable, or this change copies or mechanically translates no upstream skill-installer source, tests, fixtures, registry entries, path tables, comments, or documentation.

Notes

Ensure no issues in: Security, Cross-platform support (Linux, Windows, Mac), Remote SSH, Mobile, general backwards compatibility, performance

Desktop, SSH and runtime behavior are unaffected. The new icon appears after the next mobile native build.

Checklist

  • This PR is small and focused
  • I explained what changed and why (ELI5, the user-facing before/after, the mechanism, and why over the alternatives)
  • Before/after screenshots or videos attached for UI changes, or N/A with reason
  • Self-reviewed for correctness, security, and performance
  • Cross-platform, SSH/remote, and path/shortcut impact considered (or N/A)
  • pnpm lint, pnpm typecheck, pnpm test, and pnpm build pass (or CI will cover; local preferred)

icon.png shipped its own rounded corners, transparent corners and a bright
bevel. iOS applies its own corner mask on top, so the bevel showed as a sharp
light outline, most visibly on Spotlight's search results.

Replace the bevel and corners with the icon's existing vertical gradient,
extended to a square opaque 1024x1024 RGB image. The logo is unchanged.

Verified by pixel checks (no alpha channel; rows outside the logo are uniform;
no logo-region pixel moved by more than 6/255) and a simulated iOS mask. Not
yet checked on a device.

Fixes stablyai#26834
@AmoabaKelvin

Copy link
Copy Markdown
Collaborator

Merged main into this branch so CI runs against current main; no change to the icon. Checked it in an iOS 27 simulator with both icons built into real app bundles: the old one shows the light rim, this one is clean.

@AmoabaKelvin
AmoabaKelvin merged commit d3d1577 into stablyai:main Nov 4, 2026
26 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: The mobile app icon has jagged edges and doesn't seem to match the new versions of iOS and iPadOS.

2 participants