- Apple-touch-icon-precomposed.png и к apple-touch-icon.png, в чем различия?
- Home screen quick action icons
- How to make app icon bigger on ipad (home screen layout)
- Ipados 14 & earlier
- Make icons bigger on your apple iphone, ipad: increase text size and apps icons
- Tab bar icons
- Turn off display zoom/ unzoom apps icon in ios
- Использование в поисковой выдаче
- Как прописать в коде apple-touch-icon?
- Какого размера должен быть apple-touch-icon.png для ipad и iphone?
- Размеры для apple-touch-icon
- Техническая сторона
- Заключение
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?
Обновленный список Декабрь 2021, iOS13
Один значок для iOS 180×180 px и один для Android 192×192 px (объявлено в site.webmanifest).
<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"}Список устарел Октябрь 2021 г., iOS11
Список для iPhone и iPad с сетчаткой и без нее
<!-- 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">Обновление октябрь 2021 iOS 11:
iOS 11 проверена, iPhone X и iPhone 8 представлены
Обновление ноябрь 2021 г. iOS 10: представлены
новые версии iOS для iPhone 7 и iPhone 7plus, они имеют такое же разрешение экрана, dpi и т. Д., Что и iPhone 6s и iPhone 7plus, до сих пор не было обнаружено никаких изменений относительно обновления 2021 г.
Обновление Android в середине 2021 года:
добавьте устройства Android в список, так как ссылки с сенсорным экраном Apple отмечены Google как устаревшие и больше не будут поддерживаться для их устройств.
<!-- Android Devices High Resolution --><linkrel="icon"sizes="192x192"href="icon-hd.png"><!-- Android Devices High Resolution --><linkrel="icon"sizes="128x128"href="icon.png">Обновление 2021 iOS 9:
для iOS 9 и iPad pro
<linkrel="apple-touch-icon"sizes="167x167"href="touch-icon-ipad-pro.png">Новые iPhone (6s и 6s Plus) имеют те же размеры, что и iPhone (6 и 6 Plus), в новом iPad Pro используется изображение размером 167×167 пикселей, остальные разрешения остаются такими же.
Обновление 2021 iOS 8:
Для iOS 8 и iPhone 6 плюс
<linkrel="apple-touch-icon"sizes="180x180"href="touch-icon-iphone-6-plus.png">Iphone 6 использует то же изображение размером 120 x 120 px, что и iphone 4, а 5 — то же, что и для iOS 7
Обновление 2021 iOS7:
Для iOS 7 рекомендованные разрешения изменены:
- для iPhone Retina от 114 x 114 пикселей до 120 x 120 пикселей
- для iPad Retina от 144 x 144 пикселей до 152 x 152 пикселей
Другое разрешение осталось прежним
- 57 x 57 пикселей по умолчанию
- 76 x 76 пикселей для iPad без сетчатки
Источник:
https://ipad-mobile.ru/ios/human-interface-guidelines/icons-and-images/app-icon/
Размеры для apple-touch-icon
В 2007 году было достаточно размера 57×57, так как было только одно устройство, на котором можно было сделать Web Clips.
На сегодняшний день у компании Apple довольно обширная линейка продукции. И чтобы иконка выглядела эстетично на каждом разрешении экрана, без мыльных растянутых пикселей, можно добавить свою иконку.
Если устройство не найдет иконку нужного размера, то оно будет использовать самую близкую по большему размеру иконку.
Необязательно создавать иконки для всех разрешений экранов, достаточно будет сделать иконку размером 180×180, так как другие устройства могут уменьшить размер под свои требования.
Однако не стоит забывать о том, что не только устройства Apple используют Apple Touch Icon, поэтому можно объявить и другие размеры. Указывать размеры нужно с помощью атрибута – sizes.
Например:
Техническая сторона
При создании Web Clips от устройства на сервер будут отправляться запросы в следующем порядке:
- В первую очередь к apple-touch-icon-precomposed.png.
- Если он не найден (от сервера получен ответ 404), то устройство сделает новый запрос к к apple-touch-icon.png.
- Если и этот способ не увенчается успехом, то устройство сделает скриншот верхней части вашего сайта, и он будет использоваться в качестве Web Clips.
Заключение
Прошло уже много лет с тех пор, как появился первый iPhone и соответственно Apple-touch-icon. Теперь он может быть использован не только для оформления красивого Web Clips, но и для улучшения внешнего вида сниппета сайта в поисковой выдаче Google. А Apple Touch Icon со временем популяризировался и теперь используется другими платформами и приложениями.
Мы рассмотрели только часть возможностей для кастомизации сайта, но у Apple есть еще несколько интересных дополнений, например, Startup Image, Apple Mobile Web App Title и другие вещи, о которых расскажем в следующих статьях.
Если у вас на сайте еще нет Apple Touch Icon, обращайтесь к нам за помощью в отрисовке и размещении на сайте – с радостью поможем.
