-
-
Save EvanBacon/7fd4dc3be3d00096579bb0b134c56ec7 to your computer and use it in GitHub Desktop.
| <html> | |
| <head> | |
| <meta name="mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-touch-fullscreen" content="yes" /> | |
| <meta name="apple-mobile-web-app-title" content="Expo" /> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="default" /> | |
| <link | |
| rel="apple-touch-icon" | |
| sizes="180x180" | |
| href="/assets/icons/icon_180x180.png" | |
| /> | |
| <link | |
| rel="apple-touch-startup-image" | |
| media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" | |
| href="/assets/splash/icon_1136x640.png" | |
| /> | |
| <link | |
| rel="apple-touch-startup-image" | |
| media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" | |
| href="/assets/splash/icon_2436x1125.png" | |
| /> | |
| <link | |
| rel="apple-touch-startup-image" | |
| media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" | |
| href="/assets/splash/icon_1792x828.png" | |
| /> | |
| <link | |
| rel="apple-touch-startup-image" | |
| media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" | |
| href="/assets/splash/icon_828x1792.png" | |
| /> | |
| <link | |
| rel="apple-touch-startup-image" | |
| media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" | |
| href="/assets/splash/icon_1334x750.png" | |
| /> | |
| <link | |
| rel="apple-touch-startup-image" | |
| media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" | |
| href="/assets/splash/icon_1242x2688.png" | |
| /> | |
| <link | |
| rel="apple-touch-startup-image" | |
| media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" | |
| href="/assets/splash/icon_2208x1242.png" | |
| /> | |
| <link | |
| rel="apple-touch-startup-image" | |
| media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" | |
| href="/assets/splash/icon_1125x2436.png" | |
| /> | |
| <link | |
| rel="apple-touch-startup-image" | |
| media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" | |
| href="/assets/splash/icon_1242x2208.png" | |
| /> | |
| <link | |
| rel="apple-touch-startup-image" | |
| media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" | |
| href="/assets/splash/icon_2732x2048.png" | |
| /> | |
| <link | |
| rel="apple-touch-startup-image" | |
| media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" | |
| href="/assets/splash/icon_2688x1242.png" | |
| /> | |
| <link | |
| rel="apple-touch-startup-image" | |
| media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" | |
| href="/assets/splash/icon_2224x1668.png" | |
| /> | |
| <link | |
| rel="apple-touch-startup-image" | |
| media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" | |
| href="/assets/splash/icon_750x1334.png" | |
| /> | |
| <link | |
| rel="apple-touch-startup-image" | |
| media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" | |
| href="/assets/splash/icon_2048x2732.png" | |
| /> | |
| <link | |
| rel="apple-touch-startup-image" | |
| media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" | |
| href="/assets/splash/icon_2388x1668.png" | |
| /> | |
| <link | |
| rel="apple-touch-startup-image" | |
| media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" | |
| href="/assets/splash/icon_1668x2224.png" | |
| /> | |
| <link | |
| rel="apple-touch-startup-image" | |
| media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" | |
| href="/assets/splash/icon_640x1136.png" | |
| /> | |
| <link | |
| rel="apple-touch-startup-image" | |
| media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" | |
| href="/assets/splash/icon_1668x2388.png" | |
| /> | |
| <link | |
| rel="apple-touch-startup-image" | |
| media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" | |
| href="/assets/splash/icon_2048x1536.png" | |
| /> | |
| <link | |
| rel="apple-touch-startup-image" | |
| media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" | |
| href="/assets/splash/icon_1536x2048.png" | |
| /> | |
| </head> | |
| <body></body> | |
| </html> |
For anyone who's interested in automating image and html generation for splash screens, I recently published an open source CLI tool to automatically generate splash screens and icons for PWAs along with standard manifest.json entries and html tags required for iOS compatibility. It might be something useful: https://github.com/onderceylan/pwa-asset-generator
Hi, thank for the tool but i am getting an error when i run:
npx pwa-asset-generator .\assets\icons\ios\ --index .\index.html --manifest .\manifest.webmanifest
the error:
cli Error: EISDIR: illegal operation on a directory, read
what am i missing, please? thanks in advance
I think you aren't doing it well.
npx pwa-asset-generator ./src/assets/png/logo.png ./assets -i ./public/index.html -m ./public/manifest.webmanifest
my logo is in that directory "./src/assets/png/logo.png", I want assets be populated in ./assets etc.
Hey folks, thanks for your remarks. Please use the discussions page on the repo itself for the topics related to PWA Asset Generator - https://github.com/onderceylan/pwa-asset-generator/discussions
If anyone doesn't want to generate and save multiple images and then add multiple meta tags in the tag. You can use https://github.com/avadhesh18/iosPWASplash and just provide a single icon file and a background color. The script will automatically generate and add splash screens based on the device size.
Crazy that you have to provide so many resolutions instead of the OS just resize to what it needs and cashes that. Poor design by the OS manufacturer.
But you aren't sharing what works. I am faced with the issue as my splash screen isn't displaying on IOS