There’s a stack of different icon sizes and splash screen sizes now, depending which iPod, iPhone, or iPad you are using. iPad can also splash screen in Landscape, iPhone 5 has a different aspect ratio, etc! It has been a while since I last made web app icons etc, so I brought myself up to speed, and found the following Gist on Github:

Very handy 🙂

<!– Run in full-screen mode. –>
<meta name=“apple-mobile-web-app-capable” content=“yes”>
<!– Make the status bar black with white text. –>
<meta name=“apple-mobile-web-app-status-bar-style” content=“black”>
<!– Customize home screen title. –>
<meta name=“apple-mobile-web-app-title” content=“Web App”>
<!– Disable phone number detection. –>
<meta name=“format-detection” content=“telephone=no”>
<!– Set viewport. –>
<meta name=“viewport” content=“initial-scale=1”>
<!– Prevent text size adjustment on orientation change. –>
<style>html { webkittextsizeadjust: 100%; }</style>
<title>iOS 7 Web App</title>
<!– Icons –>
<!– iOS 7 iPad (retina) –>
<link href=“/static/images/apple-touch-icon-152×152.png”
sizes=“152×152”
rel=“apple-touch-icon”>
<!– iOS 6 iPad (retina) –>
<link href=“/static/images/apple-touch-icon-144×144.png”
sizes=“144×144”
rel=“apple-touch-icon”>
<!– iOS 7 iPhone (retina) –>
<link href=“/static/images/apple-touch-icon-120×120.png”
sizes=“120×120”
rel=“apple-touch-icon”>
<!– iOS 6 iPhone (retina) –>
<link href=“/static/images/apple-touch-icon-114×114.png”
sizes=“114×114”
rel=“apple-touch-icon”>
<!– iOS 7 iPad –>
<link href=“/static/images/apple-touch-icon-76×76.png”
sizes=“76×76”
rel=“apple-touch-icon”>
<!– iOS 6 iPad –>
<link href=“/static/images/apple-touch-icon-72×72.png”
sizes=“72×72”
rel=“apple-touch-icon”>
<!– iOS 6 iPhone –>
<link href=“/static/images/apple-touch-icon-57×57.png”
sizes=“57×57”
rel=“apple-touch-icon”>
<!– Startup images –>
<!– iOS 6 & 7 iPad (retina, portrait) –>
<link href=“/static/images/apple-touch-startup-image-1536×2008.png”
media=“(device-width: 768px) and (device-height: 1024px)
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 2)”
rel=“apple-touch-startup-image”>
<!– iOS 6 & 7 iPad (retina, landscape) –>
<link href=“/static/images/apple-touch-startup-image-1496×2048.png”
media=“(device-width: 768px) and (device-height: 1024px)
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 2)”
rel=“apple-touch-startup-image”>
<!– iOS 6 iPad (portrait) –>
<link href=“/static/images/apple-touch-startup-image-768×1004.png”
media=“(device-width: 768px) and (device-height: 1024px)
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 1)”
rel=“apple-touch-startup-image”>
<!– iOS 6 iPad (landscape) –>
<link href=“/static/images/apple-touch-startup-image-748×1024.png”
media=“(device-width: 768px) and (device-height: 1024px)
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 1)”
rel=“apple-touch-startup-image”>
<!– iOS 6 & 7 iPhone 5 –>
<link href=“/static/images/apple-touch-startup-image-640×1096.png”
media=“(device-width: 320px) and (device-height: 568px)
and (-webkit-device-pixel-ratio: 2)”
rel=“apple-touch-startup-image”>
<!– iOS 6 & 7 iPhone (retina) –>
<link href=“/static/images/apple-touch-startup-image-640×920.png”
media=“(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 2)”
rel=“apple-touch-startup-image”>
<!– iOS 6 iPhone –>
<link href=“/static/images/apple-touch-startup-image-320×460.png”
media=“(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 1)”
rel=“apple-touch-startup-image”>

					
Advertisements