Html apple touch icon precomposed

Мета-теги 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 запрещает распознавать номера телефонов и адреса.

Источник

Ошибка Apple Touch Icon: как избавиться? Скачать файл apple-touch-icon.png

Многие блогеры и веб-мастера, которые просматривают логи сервера (или журналы, создаваемые некоторыми плагинами) могли заметить, что часто ошибку с кодом 404 вызывают некоторые весьма интересные файлы с названиями вроде: apple-touch-icon.png и apple-touch-icon-precomposed.png или apple-touch-icon-120×120.png.

Что это за файлы такие и как устранить ошибки 404 из-за их отсутствия? Сейчас поговорим о том, как устранить эту ошибку.

Если в отчетах (логах) своего сервера или в журналах плагинов вы обнаруживаете ошибки 404, которые связаны с тем, что не найдены файлы:

• “apple-touch-icon.png”
• “apple-touch-icon-precomposed.png”
• “apple-touch-icon-120×120.png”
• “apple-touch-icon-120×120-precomposed.png”
• ( и любые спрефиксом “apple-touch-icon…”),

Файл на скачивание всех этих 4х файлов вы найдете в конце статьи. Можете не читать а просто прокрутить статью внизу и скачать!

То, это означает, что ваш блог посещают с iPhone, iPad или iPod Touch. Эти устройства ищут на сайте данные файлы для того, чтобы посетитель смог сохранить “закладку” сайта на рабочем столе (называется он Home Screen) своего iГаджета. Официально они называются Web Clip Icons.

То есть, эти файлы – это и есть те иконки, которые будут отображаться на Home Screen iДевайса. Что самое любопытное – эти файлы “ищутся” не только в момент добавления сайта на домашний экран, а при каждом посещении. И, если файлов apple-touch-icon.png или apple-touch-icon-precomposed.png не существует, то сервер фиксирует ошибку 404 (не найден файл, к которому было обращение), а это уже отдельная операция, которая требует определенного действия (запись на жесткий диск). И, как следствие – это дополнительная нагрузка на сервер.

Кроме того, если этих файлов нет, то на “рабочем столе” iPhone или iPad будет отображаться не красивенькая иконка, а миниатюра страницы.

И если о том, как отображается сайт на хоум скрине iOS-устройств, можно было бы особо себя не озадачивать (хотя, мы же создаем favicon, например, да и посетителей своих уважаем), то о нагрузках на сервер нужно помнить всегда. И по возможности их снижать и избегать.

Например сегодня я просмотрел журнал и увидел 15 декабря в журнале зафиксировано около 100 ошибок 404, связанных с apple-touch-icon. И это не очень уж посещаемый блог. Да и сам журнал я регулярно “чищу”.

А вот еще один прошлый скриншот, из Google Analytics:

Я специально оставил на нем данные не только об iOS-девайсах, но и обо всех мобильных устройствах, чтобы наглядно показать, что доля мобильного трафика высока (и она постоянно растет). И уже сейчас составляет примерно 7%, от общего числа посетителей (в моем случае). Это значит, что из ста человек, приблизительно семеро посещают сайт с мобильных платформ. А на долю apple-гаджетов приходится целая треть из них.

Почему я завел речь обо всех мобильных устройствах, а не только об Apple`овских? Все дело в том, что Android-девайсы также подхватывают файлы apple-touch-icon.png. Да-да! Несмотря на наличие в названии оных слова “apple”. Поэтому негодования многих блогеров, по типу “И чО? Мы теперь должны под “огрызок” подстраиваться? Специальные файлы для них создавать?”, выглядят смешно.

Справедливости ради, хочу заметить, что ОС Android намеренно не ищет эти иконки, а только в том случае, если пользователь решил добавить сайт на “рабочий стол”. А следовательно, при простом посещении с Android, при отсутствии данных файлов, ошибки 404 не будут появляться (в отличие от посещений с iOS).

И, как итог всего вышесказанного, можно сделать вывод, что нужно по максимуму адаптировать свои сайты к мобильным устройствам. В особенности, если такие недочеты вызывают ошибки (в нашем примере 404) и лишние нагрузки на сервер.

Так что, давайте исправлять ситуацию.

Первым делом нам необходимо создать нужную иконку в формате .png. Рисуете (или подбираете) ее. Желательно в хорошем разрешении.

Теперь нужно понять: какой размер в пикселях необходим для иконки, и куда ее помещать?

Качество (разрешение) экранов устройств от Apple постоянно растет и меняется, поэтому нужно оптимизировать эти “картинки” под разные устройства. На данный момент, в официальной эппловской документации приняты следующие размеры:

• 60 x 60 px – для iPhone
• 76 x 76 px – для iPad
• 120 x 120 px – для iPhone c экранами высокого разрешения (Retina)
• 152 x 152 px – для iPad с экранами высокого разрешения (Retina)

Так вот, самым простейшим способом будет создать иконку, размером 57×57 px 60×60 px, назвать ее apple-touch-icon.png и поместить в корень сайта. При добавлении сайта на домашний экран, iOS сама скруглит ей края и наложит глянцевые эффекты. Если же, вы не хотите наложения этих эффектов (тем более, сейчас “плоский дизайн” в тренде), то следует создать еще и файл apple-touch-icon-precomposed.png. На него будет наложено только скругление.

Размеры иконок сверены и актуализированы на дату 02.11.2015. Буду ли я и дальше корректировать и обновлять статью – не знаю. Поэтому, прежде чем создавать эти иконки, обязательно сверьтесь с официальной документацией Apple, ссылку на которую я давал чуть выше. Также хочу отметить, что информация о формате precomposed актуальна только для операционных систем iOS ниже 7-й версии.

Но вышеописанный метод не совсем правильный, по нескольким причинам:

• мы понимаем, что устройства у всех разные;
• при таком способе, Android-девайсы не смогут поместить на домашний экран данную иконку.

Так что, мы пойдем правильным путем, а именно – вставкой простого html-кода.

Для начала нам нужно будет создать либо четыре файла с вышеуказанными размерами (этот вариант правильней), либо два файла: 144×144 px и 114×114 px 152×152 px и 120×120 px. После чего, их нужно поместить в корень сайта (или в любую удобную для вас директорию), а в head сайта – код:

Источник

Safari Web Content Guide

Configuring Web Applications

A web application is designed to look and behave in a way similar to a native application—for example, it is scaled to fit the entire screen on iOS. You can tailor your web application for Safari on iOS even further, by making it appear like a native application when the user adds it to the Home screen. You do this by using settings for iOS that are ignored by other platforms.

For example, you can specify an icon for your web application used to represent it when added to the Home screen on iOS, as described in Specifying a Webpage Icon for Web Clip . You can also minimize the Safari on iOS user interface, as described in Changing the Status Bar Appearance and Hiding Safari User Interface Components , when your web application is launched from the Home screen. These are all optional settings that when added to your web content are ignored by other platforms.

Read Viewport Settings for Web Applications for how to set the viewport for web applications on iOS.

Specifying a Webpage Icon for Web Clip

You may want users to be able to add your web application or webpage link to the Home screen. These links, represented by an icon, are called Web Clips. Follow these simple steps to specify an icon to represent your web application or webpage on iOS.

To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png

To specify an icon for a single webpage or replace the website icon with a webpage-specific icon, add a link element to the webpage, as in:

In the above example, replace custom_icon.png with your icon filename.

To specify multiple icons for different device resolutions—for example, support both iPhone and iPad devices—add a sizes attribute to each link element as follows:

The icon that is the most appropriate size for the device is used. See the “Graphics” chapter of iOS Human Interface Guidelines for current icon sizes and recommendations.

If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used.

If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon. prefix. For example, if the appropriate icon size for the device is 58 x 58, the system searches for filenames in the following order:

Note: Safari on iOS 7 doesn’t add effects to icons. Older versions of Safari will not add effects for icon files named with the -precomposed.png suffix. See First Steps: Identifying Your App in iTunes Connect for details.

Specifying a Launch Screen Image

On iOS, similar to native applications, you can specify a launch screen image that is displayed while your web application launches. This is especially useful when your web application is offline. By default, a screenshot of the web application the last time it was launched is used. To set another startup image, add a link element to the webpage, as in:

In the above example, replace launch.png with your startup screen filename. See the “Graphics” chapter of iOS Human Interface Guidelines for current launch screen sizes and recommendations.

Adding a Launch Icon Title

On iOS, you can specify a web application title for the launch icon. By default, the tag is used. To set a different title, add a meta tag to the webpage, as in:

In the above example, replace AppTitle with your title.

Hiding Safari User Interface Components

On iOS, as part of optimizing your web application, have it use the standalone mode to look more like a native application. When you use this standalone mode, Safari is not used to display the web content—specifically, there is no browser URL text field at the top of the screen or button bar at the bottom of the screen. Only a status bar appears at the top of the screen. Read Changing the Status Bar Appearance for how to minimize the status bar.

Set the apple-mobile-web-app-capable meta tag to yes to turn on standalone mode. For example, the following HTML displays web content using standalone mode.

You can determine whether a webpage is displaying in standalone mode using the window.navigator.standalone read-only Boolean JavaScript property. For more on standalone mode, see apple-mobile-web-app-capable .

Changing the Status Bar Appearance

If your web application displays in standalone mode like that of a native application, you can minimize the status bar that is displayed at the top of the screen on iOS. Do so using the status-bar-style meta tag.

This meta tag has no effect unless you first specify standalone mode as described in Hiding Safari User Interface Components . Then use the status bar style meta tag, apple-mobile-web-app-status-bar-style , to change the appearance of the status bar depending on your application needs. For example, if you want to use the entire screen, set the status bar style to translucent black.

For example, the following HTML sets the background color of the status bar to black:

For more on status bar appearance, see the “UI Bars” chapter of iOS Human Interface Guidelines .

Linking to Other Native Apps

Your web application can link to other built-in iOS apps by creating a link with a special URL. Available functionality includes calling a phone number, sending an SMS or iMessage, and opening a YouTube video in its native app if it is installed. For example, to link to a phone number, structure an anchor element in the following format:

For a complete look of these capabilities, see Apple URL Scheme Reference.

Copyright © 2016 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2016-12-12

Источник

Многие блогеры и веб-мастера, которые просматривают логи сервера (или журналы, создаваемые некоторыми плагинами) могли заметить, что часто ошибку с кодом 404 вызывают некоторые весьма интересные файлы с названиями вроде: apple-touch-icon.png и apple-touch-icon-precomposed.png

Что это за файлы такие и как устранить ошибки 404 из-за их отсутствия? Об этом мы и поговорим в данной статье.

Если в отчетах (логах) своего сервера или в журналах плагинов (например, iThemes Security ведет такой журнал) вы обнаруживаете ошибки 404, которые связаны с тем, что не найдены файлы «apple-touch-icon.png» и «apple-touch-icon-precomposed.png» (с префиксом «apple-touch-icon. «), то это означает, что ваш блог посещают с iPhone, iPad или iPod Touch. Эти устройства ищут на сайте данные файлы для того, чтобы посетитель смог сохранить «закладку» сайта на рабочем столе (называется он Home Screen) своего iГаджета. Официально они называются Web Clip Icons.

То есть, эти файлы – это и есть те иконки, которые будут отображаться на Home Screen iДевайса. Что самое любопытное — эти файлы «ищутся» не только в момент добавления сайта на домашний экран, а при каждом посещении. И, если файлов apple-touch-icon.png или apple-touch-icon-precomposed.png не существует, то сервер фиксирует ошибку 404 (не найден файл, к которому было обращение), а это уже отдельная операция, которая требует определенного действия (запись на жесткий диск). И, как следствие – это дополнительная нагрузка на сервер.

Кроме того, если этих файлов нет, то на «рабочем столе» iPhone или iPad будет отображаться не красивенькая иконка, а миниатюра (скриншот) страницы. В общем, выглядит это примерно так:

И если о том, как отображается сайт на хоум скрине iOS-устройств, можно было бы особо себя не озадачивать (хотя, мы же создаем favicon, например, да и посетителей своих уважаем), то о нагрузках на сервер нужно помнить всегда. И по возможности их снижать и избегать.

Вот, для примера, скриншот журнала плагина iThemes Security на одном моем сайте:

Как видно из скриншота, на 19 августа в журнале зафиксировано 190 ошибок 404, связанных с apple-touch-icon. И это не очень уж посещаемый блог. Да и сам журнал я регулярно «чищу».

А вот еще один скриншот, из Google Analytics (эту статистику на указанный сайт я установил недавно, поэтому картина происходящего не совсем целостная):

Я специально оставил на нем данные не только об iOS-девайсах, но и обо всех мобильных устройствах, чтобы наглядно показать, что доля мобильного трафика высока (и она постоянно растет). И уже сейчас составляет примерно 7%, от общего числа посетителей (в моем случае). Это значит, что из ста человек, приблизительно семеро посещают сайт с мобильных платформ. А на долю apple-гаджетов приходится целая треть из них.

Почему я завел речь обо всех мобильных устройствах, а не только об Apple`овских? Все дело в том, что Android-девайсы также подхватывают файлы apple-touch-icon.png. Да-да! Несмотря на наличие в названии оных слова «apple». Поэтому негодования многих блогеров, по типу «И чО? Мы теперь должны под «огрызок» подстраиваться? Специальные файлы для них создавать?», выглядят смешно.

Справедливости ради, хочу заметить, что ОС Android намеренно не ищет эти иконки, а только в том случае, если пользователь решил добавить сайт на «рабочий стол». А следовательно, при простом посещении с Android, при отсутствии данных файлов, ошибки 404 не будут появляться (в отличие от посещений с iOS).

И, как итог всего вышесказанного, можно сделать вывод, что нужно по максимуму адаптировать свои сайты к мобильным устройствам. В особенности, если такие недочеты вызывают ошибки (в нашем примере 404) и лишние нагрузки на сервер.

Так что, давайте исправлять ситуацию.

Первым делом нам необходимо создать нужную иконку в формате .png. Рисуете (или подбираете) ее. Желательно в хорошем разрешении.

Теперь нужно понять: какой размер в пикселях необходим для иконки, и куда ее помещать?

Качество (разрешение) экранов устройств от Apple постоянно растет и меняется, поэтому нужно оптимизировать эти «картинки» под разные устройства. На данный момент, в официальной эппловской документации приняты следующие размеры:

• 60 x 60 px — для iPhone
• 76 x 76 px — для iPad
• 120 x 120 px — для iPhone c экранами высокого разрешения (Retina)
• 152 x 152 px — для iPad с экранами высокого разрешения (Retina)

Так вот, самым простейшим способом будет создать иконку, размером 57×57 px 60×60 px, назвать ее apple-touch-icon.png и поместить в корень сайта. При добавлении сайта на домашний экран, iOS сама скруглит ей края и наложит глянцевые эффекты. Если же, вы не хотите наложения этих эффектов (тем более, сейчас «плоский дизайн» в тренде), то следует создать еще и файл apple-touch-icon-precomposed.png. На него будет наложено только скругление.

Размеры иконок сверены и актуализированы на дату 02.11.2015. Буду ли я и дальше корректировать и обновлять статью — не знаю. Поэтому, прежде чем создавать эти иконки, обязательно сверьтесь с официальной документацией Apple, ссылку на которую я давал чуть выше. Также хочу отметить, что информация о формате precomposed актуальна только для операционных систем iOS ниже 7-й версии.

Но вышеописанный метод не совсем правильный, по нескольким причинам:

• мы понимаем, что устройства у всех разные;
• при таком способе, Android-девайсы не смогут поместить на домашний экран данную иконку.

Так что, мы пойдем правильным путем, а именно — вставкой простого html-кода.

Для начала нам нужно будет создать либо четыре файла с вышеуказанными размерами (этот вариант правильней), либо два файла: 144×144 px и 114×114 px 152×152 px и 120×120 px. После чего, их нужно поместить в корень сайта (или в любую удобную для вас директорию), а в head сайта — код:

В случае, если вам не нужны специфические эппловские эффекты, то:

Как видите, при второй схеме используются только два файла, а размеры задаются значением атрибута sizes (используется только в HTML5) /напоминаю, это устаревшая схема/

Итог всех этих несложных манипуляций:

• те, кто посещают ваш сайт с мобильных устройств и добавляют его на домашний экран для быстрого доступа, будут видеть симпатичную иконку, а не простую миниатюру-скриншот ;
• никаких лишних ошибок с кодом 404 и дополнительной, пусть и не очень большой, нагрузки на хостинг.

На этом все, друзья. В заключение, еще раз повторюсь: если не хотите заморачиваться со вставкой кода, подготовкой картинок разного размера, то хотя бы закиньте в корень сайта картинку (размером 57 на 57 60 на 60 пикселей) с названием «apple-touch-icon.png».

До встречи на страницах блога или в соцсетях!

Источник