Какого размера должен быть apple-touch-icon.png для iPad и iPhone?

Apple-touch-icon-precomposed.png и к apple-touch-icon.png, в чем различия?

Apple-touch-icon.png позволяет создать изображения, не запариваясь с фирменным оформлением Apple (закругленные рамки, блики). Ваше устройство все сделает самостоятельно.

Home screen quick action icons

Use the following icons in home screen quick action menus. For developer guidance, see UIApplicationShortcutIconType.

How to make app icon bigger on ipad (home screen layout)

Just like iPhones, Apple allows you to change the app icon size on your iPad real quick so that on the big screen you can have huge app icons. Here’s how to increase the App icon size on the iPad.

Ipados 14 & earlier

Note: Since you want Bigger App Icons on iPad, the iPad will automatically turn off (greyed out) the Today View on Home Screen. This Today View on Home Screen only works on the select “More” option, next to Bigger.

• iOS 12.2.1 and Earlier
• Settings app > Tap “Display & Brightness”.
• Tap on “Bigger”, under Home Screen Layout.

Make icons bigger on your apple iphone, ipad: increase text size and apps icons

So you’ll get an action sheet to ask you, ‘’changing Display Zoom will restart iPhone.’’

• So tap on Use Zoomed. Wait for few seconds until you get to wake up the iPhone automatically. Now click on the Home button to view Apps icons bigger on the iPhone.

Finally, enjoy Zoom images on the big-size retina display of the iPhone. Now you might be feeling easy to navigate the app and quite handy to touch and open an app. also, you get large size text in all apps, for instance, a big font in iMessage, Mail, Whatsapp, FB messenger, and remain apps.

Also Know & Useful: Change the text size on the iPhone.

→ Drawbacks of Display Zoom: One-Handed Keyboard Doesn’t work on my Test.

Tab bar icons

Use the following icons in tab bars. For developer guidance, see UITabBarSystemItem.

Turn off display zoom/ unzoom apps icon in ios

Follow-up the same steps given above and then tap on Standard.

Now select on Set, right-top side.

That’s it.

In the end, you will get the factory default Apps icon, text size, and visual graphics on your Apple iPhone.

Использование в поисковой выдаче

22 мая 2021 года Google в своем блоге объявили о редизайне мобильной выдачи.Теперь в результатах мобильной поисковой выдачи будет показываться иконка сайта.

Как прописать в коде apple-touch-icon?

Прописывается в <head> вашего сайта. С помощью тега <link>, по аналогии с favicon.

Для сравнения напоминание, как прописывается фавикон:

Какого размера должен быть apple-touch-icon.png для ipad и iphone?

<linkrel="apple-touch-icon"sizes="180x180"href="/apple-touch-icon.png"><linkrel="manifest"href="/site.webmanifest">

#### site.webmanifest{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"}],"display":"standalone"}

<!-- iPhone(first generation or 2G), iPhone 3G, iPhone 3GS --><linkrel="apple-touch-icon"sizes="57x57"href="touch-icon-iphone.png"><!-- iPad and iPad mini @1x --><linkrel="apple-touch-icon"sizes="76x76"href="touch-icon-ipad.png"><!-- iPhone 4, iPhone 4s, iPhone 5, iPhone 5c, iPhone 5s, iPhone 6, iPhone 6s, iPhone 7, iPhone 7s, iPhone8 --><linkrel="apple-touch-icon"sizes="120x120"href="touch-icon-iphone-retina.png"><!-- iPad and iPad mini @2x --><linkrel="apple-touch-icon"sizes="152x152"href="touch-icon-ipad-retina.png"><!-- iPad Pro --><linkrel="apple-touch-icon"sizes="167x167"href="touch-icon-ipad-pro.png"><!-- iPhone X, iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus, iPhone 6 Plus --><linkrel="apple-touch-icon"sizes="180x180"href="touch-icon-iphone-6-plus.png"><!-- Android Devices High Resolution --><linkrel="icon"sizes="192x192"href="icon-hd.png"><!-- Android Devices Normal Resolution --><linkrel="icon"sizes="128x128"href="icon.png">

<!-- Android Devices High Resolution --><linkrel="icon"sizes="192x192"href="icon-hd.png"><!-- Android Devices High Resolution --><linkrel="icon"sizes="128x128"href="icon.png">

<linkrel="apple-touch-icon"sizes="167x167"href="touch-icon-ipad-pro.png">

<linkrel="apple-touch-icon"sizes="180x180"href="touch-icon-iphone-6-plus.png">

Размеры для apple-touch-icon

В 2007 году было достаточно размера 57×57, так как было только одно устройство, на котором можно было сделать Web Clips.

На сегодняшний день у компании Apple довольно обширная линейка продукции. И чтобы иконка выглядела эстетично на каждом разрешении экрана, без мыльных растянутых пикселей, можно добавить свою иконку.

Если устройство не найдет иконку нужного размера, то оно будет использовать самую близкую по большему размеру иконку.

Необязательно создавать иконки для всех разрешений экранов, достаточно будет сделать иконку размером 180×180, так как другие устройства могут уменьшить размер под свои требования.

Однако не стоит забывать о том, что не только устройства Apple используют Apple Touch Icon, поэтому можно объявить и другие размеры. Указывать размеры нужно с помощью атрибута – sizes.

Например:

Техническая сторона

При создании Web Clips от устройства на сервер будут отправляться запросы в следующем порядке:

1. В первую очередь к apple-touch-icon-precomposed.png.
2. Если он не найден (от сервера получен ответ 404), то устройство сделает новый запрос к к apple-touch-icon.png.
3. Если и этот способ не увенчается успехом, то устройство сделает скриншот верхней части вашего сайта, и он будет использоваться в качестве Web Clips.

Заключение

Прошло уже много лет с тех пор, как появился первый iPhone и соответственно Apple-touch-icon. Теперь он может быть использован не только для оформления красивого Web Clips, но и для улучшения внешнего вида сниппета сайта в поисковой выдаче Google. А Apple Touch Icon со временем популяризировался и теперь используется другими платформами и приложениями.

Мы рассмотрели только часть возможностей для кастомизации сайта, но у Apple есть еще несколько интересных дополнений, например, Startup Image, Apple Mobile Web App Title и другие вещи, о которых расскажем в следующих статьях.

Если у вас на сайте еще нет Apple Touch Icon, обращайтесь к нам за помощью в отрисовке и размещении на сайте – с радостью поможем.