With more and more people using their phones to check everything online – from traveling tickets and hotel reservations to stock trading and news viewing, webmasters have to make sure their products are optimized for mobile devices.

Furthermore, a lot of our customers who have reviewed their SEO Audit report came and asked us how to add an Apple Icon to their websites.

This is why we just had to share how to easily add this to your website. Of course, you can order the SEO Audit for your website by going to your client area with us and clicking on Order->Product Addons.


What is the Apple Icon

As a large portion of the mobile devices consists of apple products, you should be mindful about the apple icon (touch icon) of your website. The Apple icon is the visual representation of your website when being accessed by the home screen of a user on iOS. In nature, it has a lot of similarities with a favicon, however, the latter does not work with iOS which creates the need for yet another method for brand awareness. If you haven’t defined a proper apple icon, the user will see a minified version of your website’s home page which will have many indistinguishable details and won’t look as good as your brand’s logo for example.


How to make one and apply it to your website

Having the proper icon will make the user remember its location on the device much easier and will increase the odds of it being clicked more often. Once you have selected a simplistic element or your logo for the job of an apple icon, create a square .png file of it called apple-touch-icon with dimensions up to 180×180. We say up to 180×180 because there are 9 different main sizes for apple icons starting from 57×57 which is the base size for the first iPhone while the iPhone 6 plus needs an 180×180 icon for its upgraded display and PPI (pixels per inch).

Alternatively, you can use this useful website to generate the apple icon and even test its functionality or use this plugin from the same author if your website is WordPress based.

Also make sure that you define the icon or icons in the header by using these HTML snippets as example:

<link rel=”apple-touch-icon” sizes=”57×57″ href=”https://yourdomain.com/apple-touch-icon-57×57.png”>

<link rel=”apple-touch-icon” sizes=”180×180″ href=”https://yourdomain.com/apple-touch-icon-180×180.png”>

This will help with the identification of the icon by the appropriate iOS device and will guarantee a smooth viewing experience for your visitors.

Find this post useful? Share ...Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInBuffer this pageShare on RedditDigg this