I would like to provide a custum Homescreen Icon for iPhone devices. This is the code I have after my -Tag:
<link rel="apple-touch-icon" href="../img/apple-touch-icon-120.png" sizes="120x120" />
<link rel="apple-touch-icon" href="../img/apple-touch-icon-144.png" sizes="144x144" />
<link rel="apple-touch-icon" href="../img/apple-touch-icon-180.png" sizes="180x180" />
This is working fine on 6s but it not working on iPhone 7. What did I do wrong?
Apparently there are no differences between iPhone 6 and 7 regarding the Touch icon. And if there were, the iPhone 7 would probably support the legacy icons.
The error might be due to a caching issue of some kind. If you already visited the site with your iPhone 7 before the Touch icon was available, maybe your phone is simply too "lazy" to notice it immediately. It would be useful to retry with your iPhone 7, or to try with another iPhone 7.
Another useful check would be to run RFG's checker against your site. It can spot several issues, like broken links or ill-formed images. Full disclosure: I'm the author of this service.
I started a Photoshop document with the following set up:
width: 640px
height: 960px
Resolution: 326 pixels/inch
The images are taken directly from that file.
I am using phonegap to build an application. Whenever I test it, it makes my image far too large for the iphone screen. I'm not using a viewport or resizing anything. Please help!
Some of you were asking for my code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="iphone.css" type="text/css" />
<!-- iPad/iPhone specific css below, add after your main css >
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
-->
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
</script>
</head>
<body onload="onBodyLoad()">
<div class="wrapper">
<img src="img/iPhone/Welcome.png" class="header" />
</div>
</body>
</html>
Just create images with 640x960 size don't set 326 ppi its not needed. Just go with default.
You don't need to set that resolution... To create iPhone app UI in Photoshop, use these settings:
iPhone 3G/3GS - iPod
Width: 320px
Height: 480px
Resoluzion: 72px/inch
Color Method: RGB 8bit
Pixel Ratio: Square Pixels
iPhone 4
Width: 640px
Height: 960px
Resolution: 72px/inch
Color Method: RGB 8bit
Pixel Ratio: Square Pixels
When you save your bigger images (retina display), remember to name them with the same name of the smaller and add #2x before .png
Even though you're using a "retina" size image, you still need to specify the size (resolution) as 320x480 in your CSS (and config.xml)
If you think about, although there are more pixels packed in, the screen size is still the same. Also, it makes further sense as your image is displaying too big when you set it to the larger, retina, size.
I am developing a jquery mobile app and I'm trying to load a splash screen and for the life of me can't work out why its not loading.
Here is my code
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="apple-touch-icon" href="http://maps.mappingsa.com.au:81/DestinationRiverland/images/icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-startup-image" href="http://maps.mappingsa.com.au:81/DestinationRiverland/images/splash.png">
<title>Dest River</title>
I can link to the images no worries and the touch icon works fine.
Any suggestions?
you just need to have a png file according to the pixel size of you iPhone or iPad and give the name of the File
Default.png it works
Another way other than Default.png is by simply dragging and dropping the PNG files to the following boxes under your target settings. Note that the must be the correct size, 1024x768 for landscape and 768x1024 for portrait.
Are Apple touch icons bigger than 60x60 supported, and if so, what dimensions should I use for the iPad and iPhone?
Updated list December 2019, iOS13
One icon for iOS 180x180 px and one for android 192x192 px (declared in site.webmanifest).
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
#### site.webmanifest
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
],
"display": "standalone"
}
Deprecated list October 2017, iOS11
List for iPhone and iPad with and without retina
<!-- iPhone(first generation or 2G), iPhone 3G, iPhone 3GS -->
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png">
<!-- iPad and iPad mini #1x -->
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<!-- iPhone 4, iPhone 4s, iPhone 5, iPhone 5c, iPhone 5s, iPhone 6, iPhone 6s, iPhone 7, iPhone 7s, iPhone8 -->
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<!-- iPad and iPad mini #2x -->
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<!-- iPad Pro -->
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<!-- iPhone X, iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus, iPhone 6 Plus -->
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="192x192" href="icon-hd.png">
<!-- Android Devices Normal Resolution -->
<link rel="icon" sizes="128x128" href="icon.png">
Update Oct 2017 iOS 11:
iOS 11 checked, iPhone X and iPhone 8 introduced
Update Nov 2016 iOS 10:
New iOS version iPhone 7 and iPhone 7plus introduced, they have the same display resolution, dpi, etc as iPhone 6s and iPhone 7plus, until now no changes found respecting the update 2015
Update Mid 2016 Android:
Add Android Devices to the list as the apple-touch links are marked as deprecated by Google and will be not supported anytime for their devices
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="192x192" href="icon-hd.png">
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="128x128" href="icon.png">
Update 2015 iOS 9:
For iOS 9 and iPad pro
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
The new iPhones (6s and 6s Plus) are using the same sizes as the iPhone(6 and 6 Plus), the new iPad pro uses an image of size 167x167 px, the other resolutions are still the same.
Update 2014 iOS 8:
For iOS 8 and iPhone 6 plus
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">
Iphone 6 uses the same 120 x 120 px image as iphone 4 and 5 the rest is the same as for iOS 7
Update 2013 iOS7:
For iOS 7 the recommended resolutions changed:
for iPhone Retina from 114 x 114 px to 120 x 120 px
for iPad Retina from 144 x 144 px to 152 x 152 px
The other resolution are still the same
57 x 57 px default
76 x 76 px for iPads without retina
Source:
https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/
Use these sizes 57x57, 72x72, 114x114, 144x144 then do this in the head of your document:
<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />
This will look good on all apple devices. ;)
With the iPad (3rd generation) there are now four icon sizes 57x57, 72x72, 114x114, 144x144.
Because retina icons are exactly double the size of the standard icons we really only need to make 2 icons: 114 x 114 and 144 x 144. By setting the retina sized icon to the corresponding standard icon iOS will scale them accordingly.
<!-- Standard iPhone -->
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" />
<!-- Retina iPhone -->
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" />
<!-- Standard iPad -->
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" />
<!-- Retina iPad -->
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" />
The icon on Apple's site is 152x152 pixels.
http://www.apple.com/apple-touch-icon.png
Hope that answers your question.
TL;DR: use one PNG icon at 180 x 180 px # 150 ppi and then link to it like this:
<link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">
Details on the Approach
As of 2020-04, the canonical response from Apple is reflected in their documentation on iOS.
Officially, the spec says:
iPhone 180px × 180px (60pt × 60pt #3x)
iPhone 120px × 120px (60pt × 60pt #2x)
iPad Pro 167px × 167px (83.5pt × 83.5pt #2x)
iPad, iPad mini 152px × 152px (76pt × 76pt #2x)
In reality, these sizing differences are tiny, so the performance savings will really only matter on very high traffic sites.
For lower traffic sites, I typically use one PNG icon at 180 x 180 px # 150 ppi and get very good results on all devices, even the plus sized ones.
I have been developing and designing iOS apps for a while and This is the best iOS design cheat sheet out there!
have fun :)!
Update:
For iOS 8+, and the new devices (iPhone 6, 6 Plus, iPad Air) see this updated link.
Meta update:
Iphone 6s/6s Plus have the same resolutions as iPhone 6/6 Plus respectively
This is an image from the new version of the article:
The relevant documentation on Apple's site, Specifying a Webpage Icon for Web Clip.
There is no need to put anything in the head of your document. If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon or apple-touch-icon-precomposed prefix.
For example, if the appropriate icon size for the device is 57 x 57, the system searches for filenames in the following order:
apple-touch-icon-57x57-precomposed.png
apple-touch-icon-57x57.png
apple-touch-icon-precomposed.png
apple-touch-icon.png
Yes. If the size does not match, the system will rescale it. But it's better to make 2 versions of the icons.
iPad — 72x72.
iPhone (≥4) — 114x114.
iPhone ≤3GS — 57x57 — If possible.
You could differentiate iPad and iPhone by the user agent on your server. If you don't want to write script on server, you could also change the icon with Javascript by
<link ref="apple-touch-icon" href="iPhone_version.png" />
...
if (... iPad test ...) {
$('link[rel="apple-touch-icon"]').href = 'iPad_version.png'; // assuming jQuery
}
This works because the icon is queried only when you add the web clip.
(There's no public way to differentiate iPhone ≥4 from iPhone ≤3GS in Javascript yet.)
Yes, bigger than 60x60 are supported. For simplicity, create icons of these 4 sizes:
1) 60x60 <= default
2) 76x76
3) 120x120
4) 152x152
Now, it's preferable to add them as links in your HTML as:
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
You can choose to not declare the 4 links above but just declare a single link, in which case give the highest size of 152x152 or even a size higher than that, say 196x196. It will always trim down the size for re-purposing. Ensure you mention the size.
You can also choose not to declare even a single link. Apple mentions that in this scenario, it will lookup the server root first for the size immediately higher that the size it wants (naming format: apple-touch-icon-<size>.png), and if that's not found then it will next look for the default file: apple-touch-icon.png. It's preferable that you define the link(s) as that will minimize the browser querying your server.
Icon necessities:
- use PNG, avoid interlaced
- use 24-bit PNG
- not necessary to use web-safe colors
In versions older than iOS 7, if you don't want it to add effects to your icons, then just add the suffix -precomposed.png to the file name. (iOS 7 doesn't add effects even without it).
I think this question is about web icons. I've tried giving an icon at 512x512, and on the iPhone 4 simulator it looks great (in the preview) however, when added to the home-screen it's badly pixelated.
On the good side, if you use a larger icon on the iPad (still with my 512x512 test) it does seem to come out in better quality on the iPad. Hopefully the iPhone 4 rendering is a bug.
I've opened a bug about this on radar.
EDIT:
I'm currently using a 114x114 icon in hopes that it'll look good on the iPhone 4 when it is released. If the iPhone 4 still has a bug when it comes out, I'm going to optimize the icon for the iPad (crisp and no resize at 72x72), and then let it scale down for old iPhones.
For iPhone and iPod touch, create icons that measure:
57 X 57 pixels
114 X 114 pixels (high resolution #2X)
For iPad, create an icon that measures:
72 x 72 pixels
144 X 144 pixels (high resolution #2X)
I'm not sure what the correct size should be.
Many sites seem to repeat that the apple-touch-icon should be 57x57 pixels but cite a broken link as their source.
Hanselman's and playgroundblues's comments suggest different sizes including 163x163 and 60x60.
Apple's own apple.com icon is 129x129!
See my related question:
How do I give my web sites an icon for iPhone?
It seems that Apple guidelines as of August 3, 2010 now include the "High resolution" images (for iPhone 4) in their "required" icon sizes.
Looks like we need to provide both a 57x57 and a 114x114 image now, as well as a 640x960 title image.
See Custom Icon and Image Creation Guidelines (Javascript required) which is part of a whole document:
iOS Human Interface Guidelines (2013; by Apple Inc; PDF; 26,3 MB)
Depends on how much detail you want it to have, it needs to have the aspect ratio of 1:1 (basically - it needs to be square)
I would go with the Apple's own 129*129
Apple specs specify new sizes for iOS7:
60x60
76x76
120x120
152x152
Whereas old sizes for iOS6 and prior are:
57x57
72x72
114x114
144x144
By the way, precomposed icons are deprecated.
As a consequence, to support but new devices (running iOS7) and older (iOS6 and prior), these 8 pictures must be present and the generic code is:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
In addition, you should create a 152x152 picture named apple-touch-icon.png.
You might want to know that this favicon generator can generate all these pictures at once. Full disclosure: I'm the author of this site.
The official size is 57x57. I would recommend using the exact size simply due to the fact that it takes less memory when loaded (unless Apple caches the scaled representation). With that said, Rex is right that any square size will work
I don't think there is a "correct size". Since the iPhone really is running OSX, the icon rendering system is pretty robust. As long as you give it a high-quality image with the right aspect ratio and a resolution at least as high as the actual output will be, the OS will downscale very cleanly. My site uses a 158x158 and the icon looks pixel-perfect on the iPhone screen.
Updated list October 2014, iOS8
List for iPhone and iPad with and without retina
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">
Update 2014 iOS 8:
For iOS 8 and iPhone 6 plus
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">
iPhone 6 uses the same 120 x 120 px image as iPhone 4 and 5 the rest is the same as for iOS 7
Update 2013 iOS7:
For iOS 7 the recommended resolutions changed:
for iPhone Retina from 114 x 114 px to 120 x 120 px
for iPad Retina from 144 x 144 px to 152 x 152 px
The other resolution are still the same
57 x 57 px default
76 x 76 px for iPads without retina
You don't have to bother for correct size any more. If you have iTunes artwork file (i.e. file of 1024*1024 size) of your icon, then I have created this application which will provide you all the icons based on information provided here. Get the application from here, and follow the instructions in readme file to create all the required icons for iOS application.