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 screen shot 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.

<link href=”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.

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.