When a user bookmarks or adds your website to their home screen on an iOS touch screen device an Apple Touch Icon is used. If you do not have an icon specified Apple will use a screenshot of your website often resulting in an unrecognizable square. Instead of displaying a substandard icon created by Apple to your end-users, we will teach you how to create a custom Apple Touch Icon for your responsive website.
Step 1: Create the Apple Touch Icon
The first step is to create your Apple Touch Icon in Photoshop or any image editor of your choice. Save it as a PNG file at the size of 180 pixels by 180 pixels and named “apple-touch-icon.png”.
Step 2: Add your Apple Touch Icon File to your Website
The next step is to add your Apple Touch Icon file to your website in any location you please; we suggest saving it in your main images folder. Remember where you saved your file because we will be referencing it in the following step.
Step 3: Specify your Apple Touch Icon using a Link Element
The final step is to add a link element inside of your websites HEAD element to specify and call your new Apple Touch Icon.
<linkhref=”images/apple-touch-icon.png"rel="apple-touch-icon"/>
Find Out More on Apple.com
Since changes often occur at any moment, please double check appropriate sizes and supplement information on Apple.com.