Сервис для
сео - оптимизаторов

Найди ошибки на сайте
Ошибки мешают продвижению сайта
Исправь ошибки на сайте
Сайт без ошибок продвигать легче
Получи новых клиентов
Новые клиенты принесут больше прибыль

Как добавить иконки на iPhone, iPad и Android на свой сайт

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

Если вы создаете изображение значка iOS, вы можете найти шаблоны для использования в Интернете;  вот хороший:   Значок приложения для iOS   ,  Обратите внимание, что вам понадобятся только некоторые значки, представленные в этих шаблонах, если только вы не выпускаете приложение в App Store

* Обновлена ​​эта старая статья от 3 сентября 2010 г., чтобы отразить изменения с новым iPad и 30 октября 2013 г. для обновлений размеров значков iOS 7 и 12 декабря 2014 г., чтобы включить изменения Android и размеры значков iPhone 6, 12 января 2017 г., чтобы включить последний iPad и iPhone.