orioltf
9/19/2013 - 9:19 AM
#HTML #HAML: Icon sizes snippet from new iOS7
#HTML #HAML: Icon sizes snippet from new iOS7
<!-- non-retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="icon57.png" sizes="57x57">
<!-- non-retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="icon72.png" sizes="72x72">
<!-- non-retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon76.png" sizes="76x76">
<!-- retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="icon114.png" sizes="114x114">
<!-- retina iPhone iOS 7 -->
<link rel="apple-touch-icon" href="icon120.png" sizes="120x120">
<!-- retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="icon144.png" sizes="144x144">
<!-- retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon152.png" sizes="152x152">/ non-retina iPhone pre iOS 7
%link{href: "icon57.png", rel: "apple-touch-icon", sizes: "57x57"}
/ non-retina iPad pre iOS 7
%link{href: "icon72.png", rel: "apple-touch-icon", sizes: "72x72"}
/ non-retina iPad iOS 7
%link{href: "icon76.png", rel: "apple-touch-icon", sizes: "76x76"}
/ retina iPhone pre iOS 7
%link{href: "icon114.png", rel: "apple-touch-icon", sizes: "114x114"}
/ retina iPhone iOS 7
%link{href: "icon120.png", rel: "apple-touch-icon", sizes: "120x120"}
/ retina iPad pre iOS 7
%link{href: "icon144.png", rel: "apple-touch-icon", sizes: "144x144"}
/ retina iPad iOS 7
%link{href: "icon152.png", rel: "apple-touch-icon", sizes: "152x152"}- The new OS7 icons are 5% bigger than in previous version.
- System icons are flat now: apple doesn’t add shiny effect anymore.
- apple-touch-icon precomposed is still supported but it will make same results as the apple-touch-icon
- apple-touch-icon precomposed icon take precedence over apple-touch-icon
- Available sizes according to apple:
- iPhone / iPod Touch retina: 120×120
- iPad non-retina (iPad 2 and iPad mini): 76×76
- iPad retina: 152×152
- Appple documentation