ioshtmlsafariiphone-standalone-web-app

iOS WebApp not showing startup image


I added

<link rel="apple-touch-icon" href="favicon.png" />
<link rel="apple-touch-startup-image" href="splash-screen.png"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">

between the head tags of my website but it doesn't work for the startup image is this normal?


Solution

  • Are you trying to view the startup image in your desktop browser? If so then I would visit your website on an IOS mobile device and add the app to your homescreen. When you open it you should see the splash screen.

    Splash screen are also tricky with different screen sizes. You can use the following code to ensure that it works.

            <!-- IOS Touch Icons -->
            <link href="apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon">
    
            <link href="apple-touch-icon-72x72.png" sizes="72x72" rel="apple-touch-icon">
    
            <link href="apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon">
            <link href="apple-touch-icon-144x144.png" sizes="144x144" rel="apple-touch-icon">
    
            <!-- iOS Startup images -->
            <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
            <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
            <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
            <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
            <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
            <link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    

    It is quite tedious to generate all of these images so I would use a tool to generate the different icon and splash screen images automatically.

    One such tool would be http://ticons.fokkezb.nl/