In Android, the splash screen is auto generated using information in the webmanifest (icon, short_name, and background_color). But on iOS the web app must provide the splash screen, and it should match the device size.
I suggest generating those splash screens automatically in Discourse, using the site logo. This can happens in a background job, and it should refresh every time the logo changes.
Using ImageMagick (which we already bundle) convert
utility:
convert -background '#{background_color}' -gravity center logo_big.png -extent #{size} -fill '#{secondary_color}' -pointsize 72 -stroke '#{secondary_color}' -annotate +0+400 'Meta' splash_#{size}.png
We will get the following images:
Which would be inserted into the page HEAD
code
<!-- Portrait -->
<!-- iPhone X (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="/apple-launch-1125x2436.png">
<!-- iPhone 8, 7, 6s, 6 (750px x 1334px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-750x1334.png">
<!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus (1242px x 2208px) -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" href="/apple-launch-1242x2208.png">
<!-- iPhone 5 (640px x 1136px) -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-640x1136.png">
<!-- iPad Mini, Air (1536px x 2048px) -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1536x2048.png">
<!-- iPad Pro 10.5" (1668px x 2224px) -->
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1668x2224.png">
<!-- iPad Pro 12.9" (2048px x 2732px) -->
<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-2048x2732.png">
<!-- Landscape -->
<!-- iPhone X (2436px x 1125px) -->
<link rel="apple-touch-startup-image" media="(device-height: 375px) and (device-width: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation:landscape)" href="/apple-launch-2436x1125.png">
<!-- iPhone 8, 7, 6s, 6 (1334px x 750px) -->
<link rel="apple-touch-startup-image" media="(device-height: 375px) and (device-width: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation:landscape)" href="/apple-launch-1334x750.png">
<!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus (2208px x 1242px) -->
<link rel="apple-touch-startup-image" media="(device-height: 414px) and (device-width: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation:landscape)" href="/apple-launch-2208x1242.png">
<!-- iPhone 5 (1136px x 640px) -->
<link rel="apple-touch-startup-image" media="(device-height: 320px) and (device-width: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation:landscape)" href="/apple-launch-1136x640.png">
<!-- iPad Mini, Air (2048px x 1536px) -->
<link rel="apple-touch-startup-image" media="(device-height: 768px) and (device-width: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation:landscape)" href="/apple-launch-2048x1536.png">
<!-- iPad Pro 10.5" (2224px x 1668px) -->
<link rel="apple-touch-startup-image" media="(device-height: 834px) and (device-width: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation:landscape)" href="/apple-launch-2224x1668.png">
<!-- iPad Pro 12.9" (2732px x 2048px) -->
<link rel="apple-touch-startup-image" media="(device-height: 1024px) and (device-width: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation:landscape)" href="/apple-launch-2732x2048.png">