60×60보다 큰 Apple touch 아이콘이 지원됩니까? 그렇다면 iPad 및 iPhone에 어떤 크기를 사용해야합니까?
답변
업데이트 된 목록 2019 년 12 월, iOS13
iOS 180×180 px 용 아이콘 하나 및 android 192×192 px 용 아이콘 하나 (site.webmanifest에 선언 됨).
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
#### site.webmanifest
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
],
"display": "standalone"
}
사용 중단 된 목록 2017 년 10 월, iOS11
망막 유무에 관계없이 iPhone 및 iPad 용 목록
<!-- iPhone(first generation or 2G), iPhone 3G, iPhone 3GS -->
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png">
<!-- iPad and iPad mini @1x -->
<link rel="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 -->
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<!-- iPad and iPad mini @2x -->
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<!-- iPad Pro -->
<link rel="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 -->
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="192x192" href="icon-hd.png">
<!-- Android Devices Normal Resolution -->
<link rel="icon" sizes="128x128" href="icon.png">
2017 년 10 월 iOS 11 업데이트 :
iOS 11 확인, iPhone X 및 iPhone 8 도입
2016 년 11 월 iOS 10 업데이트 :
새로운 iOS 버전 iPhone 7 및 iPhone 7plus가 도입되었으며 iPhone 6s 및 iPhone 7plus와 동일한 디스플레이 해상도, dpi 등을 갖습니다.
2016 년 중반 Android 업데이트 :
Apple 터치 링크가 Google에서 더 이상 사용되지 않는 것으로 표시되어 해당 기기에서 언제든지 지원되지 않으므로 목록에 Android 기기 추가
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="192x192" href="icon-hd.png">
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="128x128" href="icon.png">
2015 iOS 9 업데이트 :
iOS 9 및 iPad Pro 용
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">새로운 iPhone (6s 및 6s Plus)은 iPhone (6 및 6 Plus)과 동일한 크기를 사용하고 새로운 iPad pro는 167×167 px 크기의 이미지를 사용하지만 다른 해상도는 여전히 동일합니다.
2014 iOS 8 업데이트 :
iOS 8 및 iPhone 6 plus
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png"> iPhone 6은 iphone 4 및 5와 동일한 120 x 120 px 이미지를 사용하고 나머지는 iOS 7과 동일합니다.
2013 iOS7 업데이트 :
iOS 7의 경우 권장 해상도가 변경되었습니다.
- iPhone Retina의 경우 114 x 114 픽셀에서 120 x 120 픽셀까지
- 144 x 144 px ~ 152 x 152 px의 iPad Retina 용
다른 해상도는 여전히 동일합니다
- 57 x 57 픽셀 기본값
- 망막이없는 iPad의 경우 76 x 76 픽셀
출처 :
https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/
답변
이 크기 57×57, 72×72, 114×114, 144×144를 사용하고 문서 헤드에서이 작업을 수행하십시오.
<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />
이것은 모든 애플 기기에서 잘 보일 것입니다. 😉
답변
iPad (3 세대)에서는 이제 4 개의 아이콘 크기가 57×57, 72×72, 114×114, 144×144입니다.
망막 아이콘은 표준 아이콘 크기의 두 배이기 때문에 114 x 114 및 144 x 144의 두 아이콘 만 만들면됩니다 . 망막 크기의 아이콘을 해당 표준 아이콘으로 설정하면 iOS가 그에 따라 크기를 조정합니다.
<!-- Standard iPhone -->
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" />
<!-- Retina iPhone -->
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" />
<!-- Standard iPad -->
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" />
<!-- Retina iPad -->
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" />
답변
Apple 사이트의 아이콘은 152×152 픽셀입니다.
http://www.apple.com/apple-touch-icon.png
그것이 귀하의 질문에 대답하기를 바랍니다.
답변
TL; DR : 180x180px @ 150ppi에서 PNG 아이콘 하나를 사용한 후 다음과 같이 링크하십시오.
<link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">접근법에 대한 세부 사항
2020-04 현재 Apple의 정식 응답은 iOS 문서에 반영되어 있습니다.
공식적으로 사양은 다음과 같이 말합니다.
- 아이폰 180px × 180px (60pt × 60pt @ 3x)
- 아이폰 120px × 120px (60pt × 60pt @ 2x)
- iPad Pro 167px × 167px (83.5pt × 83.5pt @ 2x)
- iPad, iPad mini 152px × 152px (76pt × 76pt @ 2x)
실제로 이러한 사이징 차이는 작기 때문에 트래픽 절감은 트래픽이 많은 사이트에서만 중요합니다.
트래픽이 적은 사이트의 경우 일반적으로 180ppi에서 180ppi로 PNG 아이콘 하나를 사용 하고 모든 장치에서 플러스 크기의 장치를 포함하여 매우 좋은 결과를 얻습니다.
답변
나는 한동안 iOS 앱을 개발하고 디자인 해 왔으며 이것은 최고의 iOS 디자인 컨닝 페이퍼입니다!
재미있게 보내세요 :)!
업데이트 :
iOS 8 이상 및 새로운 기기 (iPhone 6, 6 Plus, iPad Air)의 경우이 업데이트 된 링크를 참조하십시오 .
메타 업데이트 :
Iphone 6s / 6s Plus의 해상도는 각각 iPhone 6/6 Plus와 동일합니다.
이 기사의 새 버전에서 가져온 이미지입니다.
답변
Apple 사이트의 관련 문서, 웹 클립에 대한 웹 페이지 아이콘 지정 .
문서 헤드에 아무것도 넣을 필요가 없습니다. 링크 요소를 사용하여 아이콘을 지정하지 않으면 웹 사이트 루트 디렉토리에서 apple-touch-icon 또는 apple-touch-icon-precomposed 접두사 가있는 아이콘이 검색됩니다 .
예를 들어, 장치의 적절한 아이콘 크기가 57 x 57 인 경우 시스템은 다음 순서로 파일 이름을 검색합니다.
- apple-touch-icon-57×57-precomposed.png
- apple-touch-icon-57×57.png
- apple-touch-icon-precomposed.png
- apple-touch-icon.png
