App icon

Your app icon is the first thing a host sees in the App Store, on the install screen, and in their installed-apps list. It renders at many sizes — from a large store hero down to a small list row — so it needs to stay legible when scaled down.

Where the icon lives: the icon is not part of app.toml and is not uploaded by the CLI. For public apps it is managed in the Account-panel Dashboard alongside the store listing. See Changing your app icon below.

Specifications

Property	Requirement
Dimensions	1000 × 1000 px, square
Format	PNG (preferred) or JPG
Color mode	RGB
Background	Solid — no transparency
Corners	Square — do not round the corners
Artwork fill	Between 625 px and 750 px (10⁄16–12⁄16 of the canvas)
Clear margin	At least 50 px (1⁄20) on every side, free of artwork

Design at the full 1000 × 1000 px size. The platform applies rounded corners for you when it displays the icon, so submit a full square — if you round the corners yourself they get clipped twice and look wrong.

Preparing your app icon

Center the artwork inside the safe area. Keep your logo or symbol within a centered box of roughly 700 px (11⁄16, the middle of the allowed range) and leave the outer 50 px on each edge clear. Filling below 625 px looks lost; filling past 750 px feels cramped and risks being clipped by the corner rounding.

Use a solid background. Icons appear on white and light-gray surfaces throughout the Dashboard and App Store. Never rely on transparency. If your mark is white or very light, place it on a colored background (or add a subtle edge) so the icon does not disappear against a light UI.

Keep it simple and recognizable. A single logo or symbol reads far better at small sizes than a detailed illustration. Avoid excessive text — a wordmark that is legible at 1000 px is usually unreadable in a list row.

Only use artwork you own. Do not use the Stayblox logo, or any brand, logo, or trademark you do not have the rights to represent. For an integration, use the partner service's official brand mark within their brand guidelines.

Check contrast both ways. Preview the icon on a white card and on a light-gray card before submitting.

Two common layouts

• Full-bleed brand icon — a solid brand-colored (or gradient) background that fills the whole square, with the mark centered inside the safe area. This is the right choice when a service already has an icon with its own background.
• Mark on a neutral background — a colored logo centered on a solid white (or light) background. Keep the mark inside the 700 px safe area.

Either way the canvas is a full, opaque 1000 × 1000 px square with no rounded corners.

First-party icon generator

First-party apps in the stayblox-apps repo can generate an on-brand icon (a white glyph on the Stayblox background) with the _icon-generator tool:

cd _icon-generator
npm install
npm run icon -- ph-address-book --out ../my-app/icon.png

It emits a 1000 × 1000 px PNG that already meets these specifications. Supported prefixes: ph-* (Phosphor) and hero-* (Heroicons).

Changing your app icon

stayblox app init scaffolds a placeholder icon.png in your app folder so you have a working file to iterate on locally, but pushing the app never uploads it — app push and app.toml carry config and manifest only.

For a public app, upload and update the icon in the Account-panel Dashboard:

1. Open the Account panel → Apps and select your app.
2. Go to the Listing (branding) section and find App icon.
3. Upload your 1000 × 1000 px PNG and save.
4. Submit the listing for review.

The new icon goes through the same content review as the rest of your store listing. Your currently approved icon keeps serving until the new one is approved, and this review runs independently of the config review — so an icon change never blocks a code fix, and vice versa. See App lifecycle → Listing and icon review.