Вы пытаетесь просмотреть загрузочное изображение в браузере вашего рабочего стола? Если это так, я бы посетил ваш сайт на мобильном устройстве IOS и добавил приложение на свой рабочий стол. Когда вы его открываете, вы должны увидеть заставку.
Заставка также сложна с различными размерами экрана. Вы можете использовать следующий код, чтобы убедиться, что он работает.
<!-- 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">
Это довольно утомительно для создания всех этих изображений, так что я хотел бы использовать инструмент для автоматической генерации различных иконок и заставка изображения.
Одним из таких инструментов будут http://ticons.fokkezb.nl/