favicon 16
One mark, rendered at every size the app store and browser tab require. The mark is a single letter M in a rounded square, drawn once at vector scale and then optically tuned for four size bands: favicon, iOS app icon, iPadOS icon, and Android Chrome home-screen icon. At the smallest sizes the mark is redrawn with thicker strokes; at the largest sizes the mark is redrawn with a paired ornament. Same idea, different craft.
Favicon band · 16px, 32px
favicon 32
tab preview 48
At 16 and 32 pixels there is not enough resolution for a wordmark. The mark reduces to a single glyph inside a squircle. Corner radius stays at 22% of the box so the mark looks like the same object as the app icon at 180. The stroke on the M is heaviest at these sizes because a light stroke smears on non-retina displays.
iOS band · 60, 76, 120, 152, 180
60 · iPhone
76 · iPad
120 · iPhone @2x
152 · iPad @2x
180 · iPhone @3x
Between 60 and 180 the mark can breathe. The M sits at 62% cap-height in the box, letter-spacing tightens to -1, and the counter opens up. iOS applies its own rounded-square mask at render time, so the artwork ships as a flat square; the corner radius in the artwork is only for preview.
Android band · 192, 512
192 · Chrome home
512 · Play store
Android supports circular home-screen masks, so a full circle version of the mark ships alongside the square. The M keeps its position; only the background primitive changes. At 512 the mark is rendered from the master vector, not upscaled from smaller assets.
Reverse and cream variants
Gold ground
Cream ground
White ground
Silver on dark
Four ground colors. Each variant ships as a discrete file. There is no runtime color inversion because dark-mode inversion on app icons is not portable across every launcher.
Delivery manifest
- favicon.ico multi-resolution (16, 32, 48) with the redrawn small-size mark.
- apple-touch-icon.png at 180, plus 60, 76, 120, 152 as separate PNG files for older iOS.
- android-chrome-192x192.png and android-chrome-512x512.png with circular masters.
- site.webmanifest pointing to the Android set plus theme color and background color.
- mstile-150x150.png for the Windows tile with a solid gold ground.
- maskable-icon-512.png with 20% safe-area padding for Android adaptive icons.
All PNGs are exported from a single master vector. When the mark changes, every file re-exports from the same file; no set of nine icons ever drifts out of sync.
Interested in similar work? Tell me what you are trying to move.
Start a conversation