iOS Device Screen Icons for your Web Site

When a user adds a web site to their home screen on their iOS device (iPhone, iPod, iPad), how do I make my icon appear on their screen instead of the default icon.


Include an image file named apple-touch-icon.png in the root directory of your web site.
iOS takes care of adding the rounded corners, glossy shine, and drop shadows for you, so you don’t have to bother with all of that.
If you prefer to add your own effects for your icon, simply be sure to name your icon image file with a trailing -precomposed keyword at the end of the filename.

iPhone4 and the latest iPod Touch use 114 x 114 pixel icons
iPads use 72 x 72 pixel icons
All other iOS devices use 57 x 57 pixel icons

To include an icon image for all/any iOS device, and let each device automatically scale it up or down for you, simply go with the single file named apple-touch-icon.png

To include invidually sized icon images for each device name as follows:
apple-touch-icon-57×57.png …or… apple-touch-icon-57×57-precomposed.png
apple-touch-icon-72×72.png …or… apple-touch-icon-72×72-precomposed.png
apple-touch-icon-114×114.png …or… apple-touch-icon-114×114-precomposed.png

The steps above will use a default icon for all pages on your web site.
To include a specific icon for individual pages of your site, include an image reference in your web page code to the properly sized and formatted images for each iOS device as follows:

Multi device icon:
<link rel="apple-touch-icon" href="/your-custom-icon.png"/>

Icons sized individually for each device:
<link rel="apple-touch-icon" href="your-custom-icon-for-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="your-custom-icon-for-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="your-custom-icon-for-iphone4.png" />




Home Screen icon



By | 2017-12-01T23:47:40+00:00 July 9th, 2011|Apple, Cell Phone, Computers, Documentation, iOS|0 Comments