How Do I Create an Apple-Touch-Icon?
To create an Apple touch icon, you will likely need knowledge of a graphic editing software, such as Photoshop. Begin by creating a square graphic that is sized to 158 x 158 pixels, (you can also use 129 x 129 pixels) and then saving it in .png format.
Also, when creating your icon, don’t worry about adding fancy rounded corners or glowing effects. While these are key characteristics of Apple icons, the device will do this automatically.
How Do I Implement My Apple-Touch-Icon?
You will be pleased to know that Apple has made implementing touch icons very easy to do. You have the following two options:
Option 1: Standard Icon
Standard Apple touch icons are rendered with a gloss effect and rounded corners. To implement a standard icon, apply the following code into the head section (between <head> </head> of your website:
<LINK REL=”apple-touch-icon” HREF=”/apple-touch-icon.png” />
Option 2: Precomposed Icon
Precomposed Apple touch icons are rendered with rounded corners, but without a gloss effect. To implement a precomposed icon, apply the following code into the head section of your website:
<LINK REL=”apple-touch-icon-precomposed” HREF=”/apple-touch-icon.png” />
With either option, your icon will need to be hosted online. This means that you will need to edit the code provided above and specify the correct path location of your icon (within the ‘HREF’ section). Also, you can only implement one of these options, not both.