Step-by-Step Guide: Uploading High-Resolution App Icons
Your app icon is the first thing your users see on their home screen. To ensure it looks sharp and fits perfectly within the different shapes used by Android and iOS (circles, squares, and squircles), you must follow these specific design guidelines.
Icon Technical Specifications
Jiinubi’s Managed App Engine requires a single high-quality master file to generate all the necessary sizes for various devices.
- Format: PNG (32-bit for transparency support).
- Dimensions: Minimum 512 x 512 pixels (1024 x 1024 recommended).
- Color Space: sRGB.
- Background: Solid colors work best; avoid transparency if you want a consistent look on iOS.
The "Safe Area" Rule
Different phones crop icons differently. Android might turn your icon into a circle, while an iPhone uses a rounded square. To prevent your logo from being cut off:
- Keep all important elements (text, logos, symbols) within the central 80% of the image.
- Avoid placing text near the very edges of the 512x512 canvas.
- Extend your background color to fill the entire square, even the corners.
Design Tip:
If your logo is a circle, place it inside a square background of a different color. This ensures that when the phone applies its own "mask," your logo remains perfectly centered and visible.
If your logo is a circle, place it inside a square background of a different color. This ensures that when the phone applies its own "mask," your logo remains perfectly centered and visible.
How to Upload Your Icons
Once your icon is ready, you need to submit it through the Jiinubi Client Area to move your service from "Pending" to "Ready" status.
- Log in to your Jiinubi Client Area.
- Go to Services → My Services and select your Managed App Engine.
- Locate the Upload Icon section in the management dashboard.
- Upload your 512x512 (or larger) PNG file.
- Click Submit for Verification.
What Happens Next:
Our engine will automatically generate the 192x192, 180x180 (for iOS), and Maskable variants. You will receive an email once the "Ready" status is active.
Our engine will automatically generate the 192x192, 180x180 (for iOS), and Maskable variants. You will receive an email once the "Ready" status is active.
Common Mistakes to Avoid
- Low Resolution: Uploading a small favicon (e.g., 32x32) will result in a blurry app icon on modern smartphones.
- Critical Info on Edges: Placing your company name at the very bottom often leads to it being cut off by the phone's OS.
- Non-PNG Formats: JPG files do not support the same quality standards as PNG for app icons.
Warning:
Do not add rounded corners to your icon file yourself. Both Android and iOS apply these dynamically. Upload a full, sharp-edged square.
Do not add rounded corners to your icon file yourself. Both Android and iOS apply these dynamically. Upload a full, sharp-edged square.
Summary
Summary:
A high-quality icon is essential for a professional PWA. Upload a 512x512px PNG, keep your logo in the center 80%, and let Jiinubi handle the resizing and platform-specific masking.
A high-quality icon is essential for a professional PWA. Upload a 512x512px PNG, keep your logo in the center 80%, and let Jiinubi handle the resizing and platform-specific masking.
