Customizing App Icons and Splash Screens

For a PWA to feel truly native, it must have high-quality icons and a custom splash screen that displays when the app is launched.

1. Creating App Icons

PWAs require icons in multiple sizes to support different devices. The most common sizes are:

You can generate these icons manually or use an online tool like Real Favicon Generator.

Place the icons inside app/assets/images/icons/, ensuring the filenames match those referenced in manifest.json.jbuilder.

2. Generating a Splash Screen for iOS

Unlike Android, iOS does not fully support the Web App Manifest. Instead, we need to manually define Apple Touch Startup Images.

Create different splash screen images in PNG format for various screen sizes. Then, add the following lines to application.html.erb inside <head>:

<link rel="apple-touch-startup-image" href="/assets/splashscreens/iphone5.png" media="(device-width: 320px)">
<link rel="apple-touch-startup-image" href="/assets/splashscreens/iphone6.png" media="(device-width: 375px)">
<link rel="apple-touch-startup-image" href="/assets/splashscreens/ipad.png" media="(device-width: 768px)">

3. Setting a Theme Color for the Browser UI

The theme_color property in the manifest controls how the browser UI appears when the app is launched. Additionally, we can specify this in HTML:

<meta name="theme-color" content="#ff5722">

This ensures a consistent brand identity when users interact with the app.