# Gerando telas de splash para iOS PWA

**URL:** <https://meta.discourse.org/t/generating-splash-screens-for-ios-pwa/112733>\
**Category:** Feature\
**Tags:** pwa\
**Created:** [Março 27, 2019, 5:06pm UTC](https://meta.discourse.org/t/generating-splash-screens-for-ios-pwa/112733 "2019-03-27T17:06:23Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)\
**Post date:** [Março 27, 2019, 5:06pm UTC](https://meta.discourse.org/t/generating-splash-screens-for-ios-pwa/112733/1 "2019-03-27T17:06:23Z")

</div>

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:

|Landscape|Portrait|  
|–|–|–|  
|

 ![splash_2732x2048666x500,50%](https://global.discourse-cdn.com/meta/original/3X/5/2/52887ce0c7954697ec5cdd038f1ce4680d45887b.png) | ![splash_2048x2732374x500,50%](https://global.discourse-cdn.com/meta/original/3X/c/1/c124e13230c60c5225a272dfd67df0f65cfc8b0d.png) |

> **Other images**
>
> ![splash_2224x1668](https://global.discourse-cdn.com/meta/original/3X/9/e/9e1e02f88986375f28a4e8ed9dad77284ef93185.png)
> 
> ![splash_2048x1536](https://global.discourse-cdn.com/meta/original/3X/2/9/29d960a99856e6201eadcb420de8a1e16725810a.png)
> 
> ![splash_1136x640](https://global.discourse-cdn.com/meta/original/3X/b/e/be8312d597426597ee466d71300db9b7209faaee.png)
> 
> ![splash_2208x1242](https://global.discourse-cdn.com/meta/original/3X/9/1/91aa8db0ea951dbf813a90ff0aeab92c36d38d4e.png)
> 
> ![splash_1334x750](https://global.discourse-cdn.com/meta/original/3X/f/a/fa81f222dc265b3326831f54b9a767c0c8c970cf.png)
> 
> ![splash_2436x1125](https://global.discourse-cdn.com/meta/original/3X/8/b/8b08453c7209ff93b142689f1e938b07b443a443.png)
> 
> ![splash_1668x2224](https://global.discourse-cdn.com/meta/original/3X/a/b/ab4cd35df5cae8b92a0e807e27cd25531248809a.png)
> 
> ![splash_1536x2048](https://global.discourse-cdn.com/meta/original/3X/7/4/748510922973b0f9459f47c11673951c2a4a8971.png)
> 
> ![splash_640x1136](https://global.discourse-cdn.com/meta/original/3X/1/e/1e661689414cf64827cc1d1b924ea9fc186d89ea.png)
> 
> ![splash_1242x2208](https://global.discourse-cdn.com/meta/original/3X/3/9/39400423ba4ff86c72f80e5bc09e3a1cc8164928.png)
> 
> ![splash_750x1334](https://global.discourse-cdn.com/meta/original/3X/a/3/a3bad74feec97fadb3a4e7e8888d79f9e5bf8f54.png)
> 
> ![splash_1125x2436](https://global.discourse-cdn.com/meta/original/3X/6/8/68f4f992aaeb7d9a39d136c99faf5133bc8e6715.png)

Which would be inserted into the page `HEAD`

> **code**
>
> ```html
> <!-- 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">
> 
> ```

---

_[View the full topic](https://meta.discourse.org/t/generating-splash-screens-for-ios-pwa/112733)._