What is an Apple Touch Icon and How to Add it to Your Website

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.

Add an Apple Touch Icon FastComet

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 are the base size for the first iPhone while the iPhone 6 plus needs a 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 the example:

<link rel="apple-touch-icon" sizes="57x57" href="https://yourdomain.com/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://yourdomain.com/apple-touch-icon-180x180.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.

Antoniy

Antoniy’s primary goal at FastComet is helping grow our client base through affiliates and strategic partnerships. It is all about statistics analysis, communication with our affiliates, working on various campaigns, searching the web for trends and generating ideas for future projects. You're likely to run across him at some point in the FastComet Community, too because he loves getting in and interacting with our great customers. You can always count on him to come up with strategic ideas for the team and is always searching for the smartest ways to spread our brand and services worldwide.