What is the Apple Touch Icon used for in 2019?

What is the Apple Touch Icon used for in 2019?

Apple-touch-icon.png is a thumbnail image that represents your site on (iOS) devices.

In the code of the page, it looks like this:

This image is primarily used on iOS, not available for macOS. For macOS, an svg image is used and the rel attribute will be mask-icon. It is important to understand this and not be confused in the future.

Also Apple Touch Icon can be used by other platforms and applications. After all, as a rule, this is a good quality image with a high resolution. For example, the Chrome browser on Android can use apple-touch-icon.png to save a link from the site to the desktop.

You can create it using the Web Clips function. Web Clips is the development of a web page icon on the desktop of an apple device.

If you are reading this article on an iOS device and do not know how to create Web Clips, you can do it right now.

For Safari browser

  1. Click the “Share” button

  2. In the panel that appears, click the “Home Screen” button

    Home button

  3. If you are not satisfied with the title of the page, you can write your own, for example, 1PS. Then click “Add”.

    Add button

  4. Everything is ready – this is how Web Clips looks on the device’s desktop.

    Web Clips on the device desktop

However, not all sites use the Apple Touch Icon. Let’s consider a situation where it is not.

We do the same, but at point 3 of the previous instruction we see the following picture:

Website without Apple touch icon at the stage of creating Web Clips

The image was created automatically, but in fact it is a screenshot of the upper part of the site. This is how Web Clips will look on the desktop of our device:

Web Clips without Apple touch icon on device desktop

Agree, in the first case, he looked better.

Apple Touch Icon is one of the things that shape your brand awareness. This icon could be your company logo, and it should attract attention and be recognizable. If a visitor on the desktop sees just a screenshot of the page, this is unlikely to have a positive effect on recognition.

It is possible that your site is full of interesting content, and the user decides to add a link to it on his desktop in order to visit the resource as often and conveniently as possible. But she will not look very attractive.

To avoid this, let’s take a look at the technical details of creating Apple-touch-icon.png.

The technical side

When creating Web Clips, requests will be sent from the device to the server in the following order:

  1. First of all to apple-touch-icon-precomposed.png.
  2. If it is not found (a 404 response is received from the server), then the device will make a new request to apple-touch-icon.png.
  3. If this method is not successful, the device will take a screenshot of the upper part of your site, and it will be used as Web Clips.

Apple-touch-icon-precomposed.png and apple-touch-icon.png, what are the differences?

Apple-touch-icon.png allows you to create images without fussing with Apple branding (rounded frames, highlights). Your device will do everything on its own.

Through apple-touch-icon-precomposed.png you can show some kind of creative vein and do everything by hand, but this format has its own requirements – be careful.

Dimensions for apple-touch-icon

In 2007, the size 57×57 was sufficient, as there was only one device on which to make Web Clips.

Today Apple has a fairly extensive product line. And to make the icon look aesthetically pleasing at every screen resolution, without soapy stretched pixels, you can add your own icon.

If the device does not find an icon of the required size, then it will use the closest icon in the largest size.

It is not necessary to create icons for all screen resolutions, it will be enough to make an icon 180 × 180 in size, as other devices can reduce the size to suit their requirements.

Keep in mind, though, that Apple devices aren’t the only ones using the Apple Touch Icon, so other sizes could be announced. You need to specify sizes using the – sizes attribute.

For example:

size table

Device model Apple-touch-icon size
IPhone – first generation, iPhone 2G, iPhone 3G, iPhone 3GS 57 × 57
iPhone 4, iPhone 4s, iPhone 5, iPhone 5c, iPhone 5s, iPhone se, iPhone 6, iPhone 6s, iPhone 7, iPhone8 120 × 120
iPhone X, iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus, iPhone 6 Plus 180 × 180
iPad mini 76 × 76
iPad, iPad mini 2 152 × 152
iPad Pro 167 × 167

Apple currently recommends the following guidelines for icon sizes

Device model Apple-touch-icon size
iPhone 120 × 120 or 180 × 180
iPad Pro 167 × 167
iPad, iPad mini 152 × 152

It can be concluded that the devices of the first generation and the ipad mini are no longer relevant, therefore, it is not necessary to prescribe an Apple-touch-icon of the appropriate size for them.

How to code apple-touch-icon?

It is registered in the of your site. Using the tag, similar to favicon.

For comparison, a reminder of how the favicon is prescribed:

How apple-touch-icon is written:

Use in search results

On May 22, 2019, Google announced on its blog that it was redesigning its mobile SERP to show the site icon in its mobile search results.

Site icon in search results

And for this icon, both Apple Touch Icon and other formats can be used, for example:

Read more about the requirements for the icon here.

If you have changed the icon or created a new one so that the search results will update it as soon as possible, you need to send the page for re-scanning.

How to do it is written here.

Conclusion

It has been many years since the first iPhone and, accordingly, the Apple-touch-icon appeared. Now it can be used not only to design beautiful Web Clips, but also to improve the appearance of a site snippet in Google search results. And the Apple Touch Icon has been popularized over time and is now used by other platforms and applications.

We’ve only covered some of the site customization options, but Apple has a few more interesting additions, such as Startup Image, Apple Mobile Web App Title, and other things that we’ll cover in future articles.

If you do not have Apple Touch Icon on your site yet, please contact us for help in rendering and posting on the site – we will be happy to help.

Leave a Reply

Your email address will not be published. Required fields are marked *