Apple mobile web clips icon

Источник

Мета-теги 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

Apple-Itunes-App

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

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

Format-Detection

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

Источник

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 рекомендует дает следующие рекомендации по размерам иконок

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

Источник