---
title: "PWA and mobile apps: splash screens and scaling icon sets"
date: 2026-04-08
author: "xcropimage.io Team"
tags: ["PWA", "splash screen", "icons", "mobile", "image scaling"]
lang: "en"
description: "How to size splash screens and maskable icons for PWAs, using the web app manifest and safe padding."
---

## Introduction

**Splash screens** and **app icons** shape first impressions for **PWAs** and native shells. Mis-scaled PNGs look blurry or clip outside the safe zone.

<figure>
<img src="/blog-images/pwa-splash-screen-icon-scaling-guide.jpg" alt="PWA and mobile apps: splash screens and scaling icon sets." width="1200" height="630" loading="lazy" decoding="async" />
<figcaption>PWA and mobile apps: splash screens and scaling icon sets.</figcaption>
</figure>

**Earlier in this series:** [Open Graph preview debugging](/blog/open-graph-twitter-card-preview-debugging) · [Newsletter hero images](/blog/email-newsletter-hero-image-file-size-layout) · [WebP vs AVIF](/blog/webp-avif-publishing-browser-fallback).

## Manifest and icon sizes

`manifest.json` **icons** typically need multiple sizes (e.g. 192×192, 512×512). For **maskable** icons, follow [web.dev: maskable icons](https://web.dev/articles/maskable-icon) for safe padding. Use Google’s [PWA checklist](https://web.dev/pwa-checklist/) before launch.

## Splash screens

Splashes often combine a **background color** with a **centered logo**. Some platforms generate them automatically. If your mark is detailed at small sizes, simplify the artwork for tiny sizes—a later post in this series covers **favicons and touch icons** in depth.

## Cache busting

When you update icons, users may see stale caches—use **versioned filenames** (`icon-v2.png`) or query **cache busting** on CDNs. We expand the topic in [CDN cache and stale images](/blog/cdn-cache-stale-images-after-update).

## Conclusion

Keep a vector or high-res master; use [resize](/resizer) for each size and [crop](/crop) to respect maskable safe areas.