What is apple touch icons

Use Apple touch icon

Development flow integration

Use Apple touch icon ( apple-touch-icons )

apple-touch-icons requires that at least one Apple touch icon is present and of a standard size.

Why is this important?

Since iOS 1.1.3 , Safari for iOS has supported a way for developers to specify an image that will be used to represent the web site or app on the home screen. The image is known as the touch icon.

Per Apple’s current guidance, default touch icon sizes are as follows:

Device or context	Icon size
iPhone	180px × 180px (60pt × 60pt @3x)
iPhone (X/Plus)	120px × 120px (60pt × 60pt @2x)
iPad Pro	167px × 167px (83.5pt × 83.5pt @2x)
iPad, iPad mini	152px × 152px (76pt × 76pt @2x)

Not declaring the touch icon in the page and having it in the root of the site is not recommended, as Apple may change what is requested by default.

In older versions of Safari for iOS, the precomposed keyword could be used to prevent iOS from adding different visual effects to the touch icon (i.e., rounded corners, drop shadow, reflective shine). Starting with iOS 7, no special effects are applied to touch icons, so there is no need to use the precomposed keyword anymore.

When using one image, there is no need to use the sizes attribute.

As of iOS 11.1.0 , Safari for iOS supports the web app manifest file which provides a standard, cross-browser way of defining, among other, the icons browsers can use in various contexts (home screen, application menu, etc.). However, Safari ignores the icons defined in the web app manifest and still uses the non-standard apple-touch-icon .

What does the hint check?

The hint checks if one or more apple-touch-icon declarations exist in the , and:

• each has rel=»apple-touch-icon»
• each declared image is accessible (e.g., doesn’t result in a 404 ),
• each declared image is a PNG of one of the resolutions specified above

Examples that trigger the hint

No apple-touch-icon was specified:

The apple-touch-icon is not specified in :

The apple-touch-icon has a rel attribute different than apple-touch-icon :

The apple-touch-icon is not accessible:

Response for apple-touch-icon.png :

The apple-touch-icon is not a PNG file:

One or more apple-touch-icon files is not a recommended size:

Examples that pass the hint

How to use this hint?

This package is installed automatically by webhint:

To use it, activate it via the .hintrc configuration file:

Note: The recommended way of running webhint is as a devDependency of your project.

Источник

Knowledge Base Overview

Apple touch icon

Created: 13 июля 2012 г., 11:35:11 CST Last updated: 14 июля 2012 г., 11:17:12 CST

It was quiet in my log files for quite some time but recently I see more and more of these error requests for various types of png image files containing some apple-touch-icon string in their names. Time for some digging and what this is all about.

Apple mobile devices

One thing seems to be clear. According to the names it has something to do with Apple’s mobile devices. Also looking at the User Agent string in the requests indicates that it is related to mobile devices. However, for some unknown reason I also have some Android devices in between. However, with these requests the browser seems to be Apple’s Safari mobile browser for Android although I could not find this browser for installation on my Android phone. Well, never mind that’s not important for our discussion here.

Now the picture gets clearer that all is related to Apple’s mobile browser Safari but the final information can be found somewhere else.

Web Applications for Apple

Search for information at Apple’s websites is not that easy but I came across the iOS Developer Library which is primarily about writing native applications for their mobile devices.

You have to do quite some digging in this library and it is not listed under the regular menu but there is a Safari Web Content Guide. Within this guide we will find a chapter labeled «Configure Web Applications» and the first document is Specifying a Webpage Icon for Web Clip and this is the answer for our apple-touch-icon images.

So, Apple uses these icons for what they call Web Clip.

What is Web Clip

So our new question would be about this Web Clip thingy. The Web Clip is labeled as a feature but we will see it is more than that. This Web Clip feature is available for quite some time and since iOS 4.2 for different device resolutions.

A Web Clip is basically what we have or know in Windows as an icon for links. We can add an icon to a shortcut link or an application provides its own set of icons, often in a dll file. In iOS (as the mobile operating system) and hence on your Apple mobile device all the images for your app buttons are called Web Clips.

When you go to your App Store and install an app from there the application will have this Web Clip. Additionally you can also add a link for a webpage to your Home Screen. For this webpage/app link the Safari browser will look for these png files on your website.

If you are in your web browser on your Apple mobile device and click the link symbol at the bottom you will see the «Add to Home Screen» button. When you click this option you have a link on your screen to this webpage.

Image formats

Now lets look and talk about the format for this images for the Web Clips. There is three things we have look at: the image size, name and location.

Image size

The default size for a Web Clip is 57×57 pixels but as mentioned above there is support for different sizes. There seems to be two other standard sizes whit one being a 72 pixel square and the square is 114 pixels. Looking at document and information we see for these two squares it gets a little weird. Apparently the 72 pixels square is for the iPad while the 114 pixels square is for iPhone4.

There is also this Custom Icon and Image Creation Guidelines document in the same library and here we get some more information about the actual sizes. In Table 8.1 we look at the first row for «Application icon (required for all apps)».

• iPhone and iPod touch (regular display) 57 pixels
• iPhone and iPod touch (high-res display) 114 pixels
• iPad (regular display) 72 pixels
• iPad (high-res display) 144 pixels

Hence we have one more size which is the 144 pixels square. The High-Resolution definition is the other word for what is known as the Retina display.

Image names

For the names we have to either work with the defaults or we set our own definition. Lets see the defaults first and another funny definition—precomposed.

If you prepare a perfectly square image then iOS will add rounded corners and a drop shadow to the image. However you can create, i.e. style your own Web Clip and then the iOS will not add any effects to the icon. These images have to be labeled as «precomposed«.

These indicates that we can (or must) have two images files for basically every image size. That would be 8 images but according to the documentation the scan should only look for 4 file names. Following is what we will end up with

• An option for the size
  apple-touch-icon-57×57-precomposed.png
  apple-touch-icon-57×57.png
• The default image names
  apple-touch-icon-precomposed.png
  apple-touch-icon.png

So, how do we have to define the other dimensions? That would be where the location comes into place.

Image location

The default location for the images is the root of your web server. Depending on the setup of your web server this could be tricky or maybe you don’t even have proper access or rights to add the images to this location.

The only valid option here is to add a link element with this information to the document head on your webpages. In a perfect world you will identify the USER_AGENT string first and add this meta tag only for the appropriate requests and not just as a default to every request you get to your website.

The link element will have rel attribute name «apple-touch-icon» with a href attribute and a path information. Plus you can add the size here to provide more information for the use of the image. This would all look something like this in your document’s head:

As you can see here you could use any name and path as the location but you have to provide the appropriate information with multiple link elements in your document head.

Personally I still don’t know what to think of it but Apple seems to really give a damn about web designers and developers. To some degree it’s nice to have this option but not everyone is surfing our site with a iPhone or iPad and yet we have to set up and design our websites to make it work just as if.

Источник

Для чего используется Apple Touch Icon в 2019 году?

Apple-touch-icon.png – это миниатюрное изображение, представляющее ваш сайт на устройствах с операционной системой (iOS).

В коде страницы имеет следующий вид:

Это изображение в основном используется на iOS, не распространяется для macOS. Для macOS используется изображение в формате svg, а атрибут rel будет иметь значение mask-icon. Важно это понимать и не путать в будущем.

Также Apple Touch Icon могут использовать другие платформы и приложения. Ведь, как правило, это изображение хорошего качества, имеющее высокое разрешение. Так, например, браузер Chrome на Android может использовать apple-touch-icon.png для сохранения ссылки с сайта на рабочий стол.

Создать его можно с помощью функции Web Clips. Web Clips – это разработка значка веб-страницы на рабочем столе яблочного девайса.

Если вы читаете эту статью на устройстве с установленной iOS и не знаете, как создавать Web Clips, можно сделать это прямо сейчас.

Для браузера Safari

Нажать кнопку «Поделиться»

В появившейся панели нажать кнопку «На экран Домой»

Если вас не устраивает название страницы, можно написать свое, например, 1PS. Затем нажать «Добавить».

Все готово – вот так выглядит Web Clips на рабочем столе устройства.

Однако не все сайты используют Apple Touch Icon. Давайте рассмотрим ситуацию, когда его нет.

Делаем все тоже самое, но на пункте 3 предыдущей инструкции видим такую картину:

Изображение создалось автоматически, но по факту это скриншот верхней части сайта. Вот как Web Clips будет выглядеть на рабочем столе нашего устройства:

Согласитесь, в первом случае он выглядел лучше.

Apple Touch Icon можно отнести к разряду вещей, формирующих узнаваемость вашего бренда. Этой иконкой может быть логотип вашей компании, и он должен привлекать к себе внимание и быть узнаваемым. Если посетитель на рабочем столе будет видеть просто скриншот страницы, это вряд ли положительно скажется на узнаваемости.

Возможна ситуация, что ваш сайт полон интересного контента, и пользователь решит добавить себе на рабочий стол ссылку на него, чтобы как можно чаще и удобней посещать ресурс. Но выглядеть она будет не очень привлекательно.

Чтобы этого избежать, давайте рассмотрим технические особенности создания Apple-touch-icon.png.

Техническая сторона

При создании Web Clips от устройства на сервер будут отправляться запросы в следующем порядке:

1. В первую очередь к apple-touch-icon-precomposed.png.
2. Если он не найден (от сервера получен ответ 404), то устройство сделает новый запрос к к apple-touch-icon.png.
3. Если и этот способ не увенчается успехом, то устройство сделает скриншот верхней части вашего сайта, и он будет использоваться в качестве Web Clips.

Apple-touch-icon-precomposed.png и к apple-touch-icon.png, в чем различия?

Apple-touch-icon.png позволяет создать изображения, не запариваясь с фирменным оформлением Apple (закругленные рамки, блики). Ваше устройство все сделает самостоятельно.

С помощью apple-touch-icon-precomposed.png вы можете проявить некую творческую жилу и сделать все вручную, однако к этому формату есть свои требования – будьте внимательны.

Размеры для apple-touch-icon

В 2007 году было достаточно размера 57×57, так как было только одно устройство, на котором можно было сделать Web Clips.

На сегодняшний день у компании Apple довольно обширная линейка продукции. И чтобы иконка выглядела эстетично на каждом разрешении экрана, без мыльных растянутых пикселей, можно добавить свою иконку.

Если устройство не найдет иконку нужного размера, то оно будет использовать самую близкую по большему размеру иконку.

Необязательно создавать иконки для всех разрешений экранов, достаточно будет сделать иконку размером 180×180, так как другие устройства могут уменьшить размер под свои требования.

Однако не стоит забывать о том, что не только устройства Apple используют Apple Touch Icon, поэтому можно объявить и другие размеры. Указывать размеры нужно с помощью атрибута – sizes.

Таблица размеров

Модель устройства	Размер apple-touch-icon
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 рекомендует дает следующие рекомендации по размерам иконок

Модель устройства	Размер apple-touch-icon
iPhone	120×120 или 180×180
iPad Pro	167×167
iPad, iPad mini	152×152

Можно сделать вывод что устройства первого поколения, и ipad mini уже неактуальны, поэтому для них необязательно прописывать Apple-touch-icon соответствующего размера.

Как прописать в коде apple-touch-icon?

Прописывается в вашего сайта. С помощью тега
, по аналогии с favicon.

Для сравнения напоминание, как прописывается фавикон:

Как прописывается apple-touch-icon:

Использование в поисковой выдаче

22 мая 2019 года Google в своем блоге объявили о редизайне мобильной выдачи.Теперь в результатах мобильной поисковой выдачи будет показываться иконка сайта.

И для этой иконки может быть использован как Apple Touch Icon, так и другие форматы к примеру:

Подробнее о требованиях к иконке тут.

Если вы изменили иконку или создали новую, чтобы в выдаче она обновилась как можно скорее, нужно отправить страницу на повторное сканирование.

Как это сделать, написано тут.

Заключение

Прошло уже много лет с тех пор, как появился первый iPhone и соответственно Apple-touch-icon. Теперь он может быть использован не только для оформления красивого Web Clips, но и для улучшения внешнего вида сниппета сайта в поисковой выдаче Google. А Apple Touch Icon со временем популяризировался и теперь используется другими платформами и приложениями.

Мы рассмотрели только часть возможностей для кастомизации сайта, но у Apple есть еще несколько интересных дополнений, например, Startup Image, Apple Mobile Web App Title и другие вещи, о которых расскажем в следующих статьях.

Если у вас на сайте еще нет Apple Touch Icon, обращайтесь к нам за помощью в отрисовке и размещении на сайте – с радостью поможем.

Источник