Skip to content
Owais Khan Software Reviews

App Icon Squircle Mask Previewer

Drop in an app icon and see it under every mask it will meet — the iOS continuous-corner squircle, macOS, Google Play and the Android launcher shapes — with the safe zones drawn on and a check of how much of your logo falls outside them.

Everything runs locally: your icon never leaves your browser.

Preview an app icon under platform masks

Showing a sample icon. Choose your own PNG, JPEG, WebP or SVG — ideally 1024 × 1024.

    iOS / iPadOS
    macOS
    Google Play listing
    Android circle
    Android squircle
    Android rounded square
    Android teardrop
    PWA maskable (minimum)

    The masks and safe zones

    PlatformArtworkMaskSafe zone
    iOS / iPadOS1024 × 1024 px, opaqueContinuous corners, radius 22.37% (229 px at 1024)None published
    macOS1024 × 1024 px canvas824 × 824 px shape, radius 185.4 px, continuous cornersThe shape itself
    Google Play512 × 512 px, 32-bit PNGRounded square, radius 30% (153.6 px)Keyline grid
    Android adaptive108 × 108 dp layersLauncher’s choice, over the middle 72 dp66 dp circle
    PWA maskableAny square sizeBrowser’s choiceCircle, radius 40% (409.6 px at 1024)

    The red dashed circles are the safe zones: the Android circle is 66 dp of the 72 dp the launcher shows, and the PWA circle is 80% of the icon. In the sample, the chat bubble is safe everywhere; the star in the corner survives on iOS but is cut off by the Android and PWA masks.

    iOS icon squircle mask preview

    For an iOS icon squircle mask preview, supply the full-bleed square you upload to App Store Connect — no rounded corners, no transparency. iOS rounds it with continuous corners, which start curving much earlier than a circular corner of the same radius, so artwork placed close to the corners is trimmed more than a CSS border-radius mock-up suggests. The same shape, inset on a 1024 px canvas, is used for macOS icons.

    Android adaptive icon safe zone preview

    For an Android adaptive icon safe zone check, export your foreground layer at 108 dp (432 px at xxxhdpi, or any square) and tick “Android adaptive icon layer”. The previews then crop the middle two-thirds, as launchers do, and the check reports what share of the logo lies outside the 66 dp circle. The masks themselves are the path definitions Android ships: AOSP’s default rounded square and its circle, squircle and teardrop overlays.

    PWA maskable icon tester

    As a PWA maskable icon tester, the last tile shows the minimum a browser is guaranteed to display: the 80% circle. If the logo survives that tile, it survives every mask a browser may apply. Declare the icon with "purpose": "maskable" in the web app manifest, and ship a separate "any" icon with transparent padding for places that do not mask.

    Frequently asked questions

    What is the exact squircle mask curve used by iOS app icons?
    Apple has never published it. The iOS icon shape is a rounded rectangle with continuous corners: instead of a quarter circle joined to a straight edge, the curvature ramps up gradually, starting about 1.53 corner-radii before the corner. That is why it looks softer than a CSS border-radius and why it is not a true superellipse either. This previewer draws it with the widely used reverse-engineered control points of iOS’s continuous corner, at a radius of 22.37% of the icon size.
    What is the Android adaptive icon safe zone size?
    Adaptive icon layers are 108 × 108 dp. The outer 18 dp on each side is reserved for the launcher’s parallax and pulse effects, so the mask covers the middle 72 dp. Inside that, a 66 dp circle — 61% of the layer, or about 92% of the visible icon — is guaranteed never to be clipped by any manufacturer’s mask. Keep the logo inside it; Google recommends a logo of at least 48 dp.
    Why does my app icon get cropped differently on iOS and Android?
    iOS applies one mask to the whole square image, so almost everything up to the corners stays visible. Android lets each device maker choose the mask — circle, squircle, rounded square, teardrop — and applies it to only the middle two-thirds of a larger layer. A design that fills the square for iOS therefore loses its edges and corners on Android. Tick "Android adaptive icon layer" if your image is the 108 dp layer, to see it the way the launcher crops it.
    What is the safe zone for a maskable PWA icon?
    The Web App Manifest defines it as a circle centred on the icon with a radius of 40% of the icon’s size — a circle 80% of the width across. Browsers may cut away anything outside it, so the logo should fit inside it, leaving about 10% padding on every side. The spec also asks designers to avoid transparent pixels, because the browser composites them onto a solid fill of its own choice.
    What size should the App Store and Google Play icons be?
    App Store Connect takes a 1024 × 1024 px square with no transparency; iOS applies the mask itself, so do not round the corners yourself. Google Play takes a 512 × 512 px 32-bit PNG, also full square, and rounds it with a corner radius of 30% of the icon size. Android launcher icons are separate: an adaptive icon made of 108 dp foreground and background layers.
    Is my icon uploaded anywhere?
    No. The previews are drawn by your browser from the file you pick; the image never leaves your browser, and there is no upload, no API call and no analytics here. That is enforced rather than promised: this site’s test suite scans the shipped HTML for every browser API capable of sending data off the page and fails the build if it finds one.