Many websites use special 'Apple touch icon' image files that allow home screen bookmarks to look good alongside app icons. However, Apple’s original specification of a 59 x 59 pixel icon now looks rather low-resolution on an iPad screen or an iPhone 4 Retina Display.
Perhaps Apple themselves were aware of the need to future-proof icon sizes, or perhaps they updated their files while developing higher-resolution iOS device screens, but the Apple site has a larger, 129 x 129 pixel home screen icon that looks much better than the smaller versions. With the help of an old hint from the time of the first iPhone, you can create your own high-res home screen icons too.
There are a few steps to carry out before you can set the icon. First, you need to bookmark the Set Touch Icon bookmarklet found on this page in Safari on your iPad or iPhone 4.
Next, create a 129 x 129 pixel PNG icon for the site you want to bookmark. Most sites use a version of their own logo, so it should be easy to find an image of the logo that fits and get it down to size in Preview or Photoshop.
Finally, upload the file to a service that allows direct linking to your image file, and copy the URL to the clipboard on your iOS device. A good free solution is http://tinypic.com (I have no affiliation with this site). You can upload the image on your computer and mail yourself the URL so that it can be copied on your device. You can, of course, also just type the URL in.
Now you’re ready to set the icon. On your iOS device, navigate to the site to be bookmarked, then open the Set Touch Icon bookmarklet. Paste or type the image URL and touch OK. Nothing will appear to happen; this is normal. Now touch the + icon and select Add to Home Screen. The site thumbnail should be replaced with your high-res touch icon. Edit the bookmark name if necessary and touch 'Add' and you’re done! If you already bookmarked the low-res version of the icon, you should instantly see what a difference it makes. Find a comparison for one site here, the high-res version I created is much better than the official one.
[crarko adds: I haven't tested this one.]
Perhaps Apple themselves were aware of the need to future-proof icon sizes, or perhaps they updated their files while developing higher-resolution iOS device screens, but the Apple site has a larger, 129 x 129 pixel home screen icon that looks much better than the smaller versions. With the help of an old hint from the time of the first iPhone, you can create your own high-res home screen icons too.
There are a few steps to carry out before you can set the icon. First, you need to bookmark the Set Touch Icon bookmarklet found on this page in Safari on your iPad or iPhone 4.
Next, create a 129 x 129 pixel PNG icon for the site you want to bookmark. Most sites use a version of their own logo, so it should be easy to find an image of the logo that fits and get it down to size in Preview or Photoshop.
Finally, upload the file to a service that allows direct linking to your image file, and copy the URL to the clipboard on your iOS device. A good free solution is http://tinypic.com (I have no affiliation with this site). You can upload the image on your computer and mail yourself the URL so that it can be copied on your device. You can, of course, also just type the URL in.
Now you’re ready to set the icon. On your iOS device, navigate to the site to be bookmarked, then open the Set Touch Icon bookmarklet. Paste or type the image URL and touch OK. Nothing will appear to happen; this is normal. Now touch the + icon and select Add to Home Screen. The site thumbnail should be replaced with your high-res touch icon. Edit the bookmark name if necessary and touch 'Add' and you’re done! If you already bookmarked the low-res version of the icon, you should instantly see what a difference it makes. Find a comparison for one site here, the high-res version I created is much better than the official one.
[crarko adds: I haven't tested this one.]
•
[16,734 views]

