Most brands understand the value of consistent branding and will do all the little things like creating a custom favicon for their websites. One thing most companies have not done yet is create a custom Apple Touch Icon.
What is an Apple Touch Icon? These are the apps and other icons you see on your home screen of your Apple mobile device. Many people don’t know that these are easy to create. If someone visits your website, clicks the arrow icon and then “Add to Home Screen” Apple will create what looks like an application icon on that person’s iPad, iTouch, iPod, or iPhone. The great thing about this from a brand perspective is that the website owner has control over what that icon looks like. They just need to take the time to create an icon and specify its location properly. (If they don’t specify it, Apple tries to create their own icon based upon a screen shot of your site.)
Apple’s specification for this can be found here. It’s really as simple as adding the following code in the header section of your website: <link rel=”apple-touch-icon” href=”/custom_icon.png”/>. You’ll want to create an icon that is 57×57 pixels and upload it to your webserver.
Here are some instructions for Nexternal Customers that would like to create an Apple Touch Icon for their stores:
- Upload your 57×57 pixel image to our servers (Layout/Import Images).
- Add code to the reference code to your header (Layout/Edit Advanced Layout/Head Addendum). Sample: <link rel=”apple-touch-icon” href=”https://www.nexternal.com/ACCOUNT_NAME/images/CUSTOM_IMAGE.png”>This will create the icon for iPads.
- Add the code to the mobile header (Layout/Edit Mobile Layout/Head Addendum). Sample: <link rel=”apple-touch-icon” href=” https://www.nexternal.com/ACCOUNT_NAME/images/CUSTOM_IMAGE.png “> This will create the icon for people using iPhones.
It’s that simple! Now, your customers can have a branded direct link to your shop from their mobile Apple device.