-
-
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
🙌 🤝
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
Sensational work!
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
Hi guys. This worked great for me, thanks for sharing!
However, it seems like the splash screen doesn't update automatically if you don't "install" the PWA again. Does anyone know if this is really a restriction or if we do have to do something in order for them to update? By inspecting the app on Safari, I can see that the manifest is updated, as well as the index.html file, pointing to the most current images.
device-widthanddevice-heghtare invalid:
https://drafts.csswg.org/mediaqueries/#mf-deprecated
But you aren't sharing what works. I am faced with the issue as my splash screen isn't displaying on IOS
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.
Great job man !!!