Just Blog about nothing

Назначение иконки веб-страницы (веб-приложения) для Web Clip

Пост является вольным переводом текста из документации Apple Configuring Web Applications.

Примечание: Web Clip функционал доступен в iOS 1.1.3 и выше. Имя файла apple-touch-icon-precomposed.png доступно в iOS 2.0 и выше. Поддержка нескольких иконок для разных разрешений устройств доступна в iOS 4.2 и выше.

Вы можете захотеть, чтобы у пользователя была возможность добавить ваше web приложение или web-страницу на домашний экран (Home screen).  Такие ссылки, представленные иконками, называются Web Clip. Следуйте следующим простым шагам, чтобы указать иконку, отображающую ваше web-приложение или web-страницу в iOS.

• Чтобы указать иконку для всего сайта (каждой страницы сайта), разместите файл иконки в формате PNG с именем apple-touch-icon.png или apple-touch-icon-precomposed.png в корневой директории сайта. Если вы используете имя apple-touch-icon-precomposed.png, то Safari в iOS не будет добавлять к иконке никаких эффектов.
• Чтобы определить иконку для одной страницы или заменить иконку сайта специальной иконкой для конкретной страницы, добавьте тег link, например так:

  <link rel="apple-touch-icon" href="/custom_icon.png"/>

  В примере выше, замените custom_icon.png на имя файла иконки. Если вы не хотите, чтобы Safari в iOS добавлял какие-нибудь эффекты к иконке, замените apple-touch-icon на apple-touch-icon-precomposed.

• Чтобы указать несколько иконок для различных разрешений устройств - например для iPhone и iPad - добавьте атрибут sizes в каждый элемент link, как в примере ниже:

  <link rel="apple-touch-icon" href="touch-icon-iphone.png" />
  <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
  <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

  Используется иконка, имеющая наиболее подходящий размер для устройства. Если атрибут sizes не определён, размер элемента берётся по умолчанию 57 x 57.

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

Если нет иконок, указанных с использованием элемента link, то в корневой директории сайта ищутся иконки с префиксом  apple-touch-icon... или apple-touch-icon-precomposed.... Например, если подходящий размер иконки для устройства 57 x 57, то система в следующем порядке ищет иконки с именами:

1. apple-touch-icon-57x57-precomposed.png
2. apple-touch-icon-57x57.png
3. apple-touch-icon-precomposed.png
4. apple-touch-icon.png

Для получения  информации о размерах иконок веб-страниц смотрите “Custom Icon and Image Creation Guidelines”.

В конце поста приведу основную информацию об иконках, для получения более подробных сведений, следуйте по ссылке, приведённой выше. Итак, размеры для iPhone и iPod touch:

• 57 x 57 пикселей;
• 114 x 114 пикселей (высокое разрешение,  iPhone/iPod touch 4).

Для iPad:

• 72 x 72 пискеля.

Если вы не используете ключевое слово precomposed, то iOS автоматически добавит к иконке следующие эффекты:

• закруглённые углы;
• тень;
• отражающий блеск.

Например, иконка выглядящая так:

На домашнем экране будет выглядеть так:

Если вы используете автоматическое добавление эффекта iOS, то изображение иконки должно удовлетворять следующим требованиям:

• иметь прямые углы;
• не иметь свечения или блеска.