Apple touch icon web

Мета-теги HTML для Apple Safari

Обзор html мата-тегов для браузеров Safari на платформах Mac OS X и iOS.

Apple Touch Icon

Иконка сайта в iOS на экране закладок и домашнем экране.

Иконки разных размеров указываются атрибутом sizes :

Apple Touch Icon Precomposed

Тоже самое что и apple touch icon , но с наложенными эффектами в стиле iOS с закругленными углами и т.д.

Mask Icon

Используется в MacOS при сохранении сайта на рабочий стол. Элементы SVG должны быть черного цвета, цвет задается атрибутом color .

Apple-Mobile-Web-App-Title

При добавлении сайта на домашний экран в iOS задает имя иконки.

Apple-Mobile-Web-App-Capable

В Safari iOS для закрепленных сайтов на экране «Домой» включает полноэкранный режим.

Apple-Mobile-Web-App-Status-Bar-Style

Задает стиль панели состояния при полноэкранном режиме.

Может иметь следующее значение:

default	Белый фон
black	Черный фон
black-translucent	Прозрачный фон и белый цвет иконок и шрифтов

default

black

black-translucent

Apple-Itunes-App

В iOS Safari выводит баннер с приложением в App Store.

Баннер не отобразится, если устройство не поддерживает приложение или оно недоступно для данной локали, подробнее на developer.apple.com.

Format-Detection

В iOS запрещает распознавать номера телефонов и адреса.

Источник

Add an Apple touch icon to your Progressive Web App

This codelab uses Chrome DevTools. Download Chrome if you don’t already have it.

Safari for iOS users can manually add Progressive Web Apps (PWAs) to their home screen. The icon that appears on the iOS home screen when a PWA is added is called the Apple touch icon. This codelab shows you how to add an Apple touch icon to a PWA. It assumes that you have access to an iOS device.

iOS Safari users can add any webpage to their home screen. It doesn’t have to be a PWA. In fact, the example app used in this codelab isn’t a PWA. But in most cases a PWA would be the kind of app that a user would most likely want to add to their home screen.

Measure #

Open the example app in a new tab:

Click Remix to Edit to make the project editable.

To preview the site, press View App. Then press Fullscreen .

Note the URL of your example app. It’ll be something like https://example.glitch.me .

Run a Lighthouse PWA audit on your example app in Chrome DevTools:

1. Press Control+Shift+J (or Command+Option+J on Mac) to open DevTools.
2. Click the Lighthouse tab.
3. Make sure the Progressive Web App checkbox is selected in the Categories list.
4. Click the Generate report button.

In the PWA Optimized section, Lighthouse reports that the example app doesn’t provide a valid Apple touch icon.

The Does not provide a valid apple-touch-icon audit

Add the example app to an iOS home screen #

To demonstrate how an Apple touch icon provides a more polished user experience, first try adding the example app to your iOS device’s home screen when an Apple touch icon hasn’t been specified.

1. Open Safari for iOS.
2. Open the URL of your example app. This is the URL like https://example.glitch.me that you noted earlier.
3. Tap Share>Add to Home Screen. You’ll probably have to swipe left to see this option.
4. Tap Add.

Because the site hasn’t specified an Apple touch icon, iOS just generates an icon for the site from the page’s content.

An auto-generated home screen icon.

Источник

Does not provide a valid apple-touch-icon

When iOS Safari users add Progressive Web Apps (PWAs) to their home screens, the icon that appears is called the Apple touch icon. You can specify what icon your app should use by including a
tag in the of your page. If your page doesn’t have this link tag, iOS generates an icon by taking a screenshot of the page content. In other words, instructing iOS to download an icon results in a more polished user experience.

How the Lighthouse Apple touch icon audit fails #

Lighthouse flags pages without a
tag in the :

A rel=»apple-touch-icon-precomposed» link passes the audit, but it has been obsolete since iOS 7. Use rel=»apple-touch-icon» instead.

Lighthouse doesn’t check whether the icon actually exists or whether the icon is the correct size.

In the Lighthouse report UI the full PWA badge is given when you pass all of the audits in all of the PWA subcategories (Fast and reliable, Installable, and PWA optimized).

How to add an Apple touch icon #

Add
to the of your page:

Replace /example.png with the actual path to your icon.

Try it! Check out the Add an Apple touch icon to your Progressive Web App codelab to see how adding an Apple touch icon creates a more polished user experience.

To provide a good user experience, make sure that:

• The icon is 180×180 pixels or 192×192 pixels
• The specified path to the icon is valid
• The background of the icon is not transparent

Источник

Для чего используется 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, обращайтесь к нам за помощью в отрисовке и размещении на сайте – с радостью поможем.

Источник

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.

Источник