Многие сайты в настоящее время добавляют значок перед запуском, который виден на вкладках и закладках браузера вашего пользователя, но на многих сайтах по-прежнему отсутствуют значки для iOS. Добавив значок iOS, любой, кто решит сохранить вашу веб-страницу на главном экране своего iPhone, iPad или Android *, увидит симпатичный значок в виде приложения, а не изображение вашей страницы.
Первый шаг - создание изображения. Для поддержки новейших iPhone и iPad с высоким разрешением вам нужно будет создать несколько изображений разного размера (устройство будет иметь размер, ближайший к размеру по умолчанию, если у вас их нет все). Вы можете сохранить ваши изображения в формате PNG в любой каталог на вашем сайте.
С иконками в старых версиях iOS вы должны были определить, собираетесь ли вы использовать предварительно скомпонованный apple-touch-icon против того, чтобы позволить apple применить некоторые эффекты к вашему значку. Это больше не проблема. Вам просто нужно создать квадратную иконку, и она будет округлять края для вас.
Вот таблица текущего Размеры иконок iOS от Apple :
iPhone 6/7, iPhone 6 / 7s, iPhone SE iPad / iPad Mini iPad Pro iPhone 6/7 Plus, iPhone 6 / 7s Plus 120 × 120 152 × 152 167 × 167 180 × 180
Для значков Android вы хотите следовать следующим спецификациям:
Android Regular Android Hi-Res 128 × 128 192 × 192
Затем вы просто добавите немного кода в заголовок вашего сайта, чтобы устройства могли найти ваши изображения (iOS обнаружит их автоматически, если они находятся в корневом каталоге вашего сайта и названы так, но рекомендуется их включать) , Android использует две иконки с rel = ”icon”, а apple использует иконки с префиксом “apple-”:
<link href = "http://www.yoursite.com/apple-touch-icon.png" rel = "apple-touch-icon" /> <link href = "http://www.yoursite.com/apple -touch-icon-152x152.png "rel =" apple-touch-icon "sizes =" 152x152 "/> <link href =" http://www.yoursite.com/apple-touch-icon-167x167.png " rel = "apple-touch-icon" sizes = "167x167" /> <link href = "http://www.yoursite.com/apple-touch-icon-180x180.png" rel = "apple-touch-icon" sizes = "180x180" /> <link href = "http://www.yoursite.com/icon-hires.png" rel = "icon" sizes = "192x192" /> <link href = "http: // www .yoursite.com / icon-normal.png "rel =" icon "sizes =" 128x128 "/>
Сделайте первое яблоко размером 120 х 120.
Если вы не хотите создавать все эти изображения, вы должны по крайней мере создать изображения с большим разрешением. Таким образом, они будут хорошо смотреться на устройствах высокого разрешения. Старые устройства будут загружать ближайший доступный размер до требуемого размера и уменьшать их (это работает, но не идеально, если вы хотите получить полный контроль и быструю загрузку).
Если вы создаете изображение значка iOS, вы можете найти шаблоны для использования в Интернете; вот хороший: Значок приложения для iOS , Обратите внимание, что вам понадобятся только некоторые значки, представленные в этих шаблонах, если только вы не выпускаете приложение в App Store.
* Обновлена эта старая статья от 3 сентября 2010 г., чтобы отразить изменения с новым iPad и 30 октября 2013 г. для обновлений размеров значков iOS 7 и 12 декабря 2014 г., чтобы включить изменения Android и размеры значков iPhone 6, 12 января 2017 г., чтобы включить последний iPad и iPhone.