What is an Apple Touch Icon?
In short, an Apple touch icon is basically a favicon for Apple mobile devices, and, if set, is displayed when a user saves a web page to their home screen. For example, the Apple touch icon for this website looks like this:
How Do I Create an Apple Touch Icon?
To create an Apple touch icon, you will likely need the assistance of a graphic designer or have access to and knowledge of graphic editing software, such as Photoshop. Begin by creating a square graphic that is sized to 129 by 129 pixels, and then saving it in .png format. 129-pixels is the perfect size for the Apple iPad, and will allow other devices to properly resize as needed.
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 of your website:
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:
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.
The following is a side-by-side comparison of what each looks like:
No comments:
Post a Comment