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
Click the “Share” button
In the panel that appears, click the “Home Screen” button
If you are not satisfied with the title of the page, you can write your own, for example, 1PS. Then click “Add”.
Everything is ready – this is how Web Clips looks on the device’s 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:
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:
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:
- First of all to apple-touch-icon-precomposed.png.
- 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.
- 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.
|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 theof 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.
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.
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.