It’s so easy to let users bookmark your website when browsing online with an Apple mobile device (iPod Touch, iPad and iPhone). You can do it by using your predefined icon. To enable users to add your web application or webpage link to Home screen, you can use such icons. They are links, represented by these icons, and they are called Web Clips.
What is an AppleIcon?
To cut a long story short, an AppleIcon is a favicon for Apple mobile devices. It is displayed when a user saves a web page to their Home screen. It’s so great because if you want to attract people or stand out, you can set a memorable icon.
Usually, when you save a page, there is automatically generated an icon. Users may use this icon to access that page, without having to launch their browser. The only problem is that by default, Apple generates “distasteful” icons, because it uses a screenshot of the page for the Home screen icon. However, you can change the icon by designing a specific icon graphic. This is your predefined Apple Icon, which will be used instead of the default one.
The importance of Apple Icons
The key factors to be considered when creating and implementing an AppleIcon are branding and design. If you are a website owner, it’s only natural that you want it to be Customized, Unique and with a design that will drive people to you, make you stand out and be remembered. The icon is user friendly, if you think of the impact images have online.
The icon is good for your branding, as you can create a long-lasting name for your website. It can be a growth strategy and one for increasing loyalty. You can include in your AppleIcon your brand’s name, logo and color range. It will all make you stand out. When people see your icon, they’d know who you are and that’s what you’re aiming for, isn’t it?
How to configure the AppleIcon
You can either create an icon or use your favicon( for earlier versions of iOS).
How to create an Apple Touch Icon:
- You need to be assisted by a graphic designer or use a graphic editing software.
- Create a square graphic. Size: 129 x 129 pixels. Save it in .png format
How to implement an AppleIcon
- To implement a standard icon (they have rendered corners and a gloss effect), put the following code into the Head section of your website:<LINK REL=”apple-touch-icon” HREF=”/apple-touch-icon.png” />
- To implement a precomposed AppleIcon (they are rendered with rounded corners, but with no gloss effect), put the following code into the Head section of your website: <LINK REL=”apple-touch-icon-precomposed” HREF=”/apple-touch-icon.png” />
So, this is how you create and implement an AppleIcon. Hope you find this useful!