iPad 및 iPhone 용 apple-touch-icon.png 크기는 얼마입니까?

60x60보다 큰 Apple touch 아이콘이 지원됩니까? 그렇다면 iPad 및 iPhone에 어떤 크기를 사용해야합니까?

업데이트 된 목록 2019 년 12 월, iOS13 iOS 180x180 px 용 아이콘 하나 및 android 192x192 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는 167x167 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/

이 크기 57x57, 72x72, 114x114, 144x144를 사용하고 문서 헤드에서이 작업을 수행하십시오.

<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 개의 아이콘 크기가 57x57, 72x72, 114x114, 144x144입니다.

망막 아이콘은 표준 아이콘 크기의 두 배이기 때문에 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 사이트의 아이콘은 152x152 픽셀입니다.
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-57x57-precomposed.png
• apple-touch-icon-57x57.png
• apple-touch-icon-precomposed.png
• apple-touch-icon.png

예. 크기가 일치하지 않으면 시스템이 크기를 조정합니다 . 그러나 두 가지 버전의 아이콘을 만드는 것이 좋습니다.

• iPad — 72x72.
• iPhone (≥4) — 114x114
• iPhone ≤3GS — 57x57 — 가능하면.

서버 의 사용자 에이전트로 iPad와 iPhone을 구별 할 수 있습니다. 서버에서 스크립트를 작성하지 않으려면 다음과 같이 자바 스크립트로 아이콘을 변경할 수도 있습니다

<link ref="apple-touch-icon" href="iPhone_version.png" />
...

if (... iPad test ...) {
  $('link[rel="apple-touch-icon"]').href = 'iPad_version.png'; // assuming jQuery
}

웹 클립을 추가 할 때만 아이콘이 쿼리되기 때문에 작동합니다.

(Javascript에서 iPhone ≥4와 iPhone ≤3GS를 구별하는 방법은 아직 없습니다.)

예, 60x60보다 큰 것이 지원됩니다. 간단하게하기 위해 다음 4 가지 크기의 아이콘을 만드십시오.

1) 60x60  <= default
2) 76x76
3) 120x120
4) 152x152

이제 다음과 같이 HTML에 링크로 추가하는 것이 좋습니다.

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

위의 4 개 링크를 선언하지 않고 단일 링크 만 선언하면됩니다 (이 경우 최대 크기 152x152또는 최대 크기) 196x196. 용도 변경을 위해 항상 크기를 줄입니다. 을 언급해야합니다 size.

단일 링크조차 선언하지 않도록 선택할 수도 있습니다. 애플은이 시나리오에서 원하는 크기보다 즉시 더 큰 크기 (이름 형식 :)를 서버 루트 apple-touch-icon-<size>.png에서 찾아보고 찾을 수없는 경우 다음을 찾습니다 default file: apple-touch-icon.png. 서버를 쿼리하는 브라우저를 최소화 할 수 있도록 링크를 정의하는 것이 좋습니다.

아이콘 필수품 :

- use PNG, avoid interlaced
- use 24-bit PNG
- not necessary to use web-safe colors

iOS 7 이전 버전에서는 아이콘에 효과를 추가하지 않으려면 -precomposed.png파일 이름에 접미사 를 추가하십시오 . (iOS 7은 효과가 없어도 효과를 추가하지 않습니다).

이 질문은 웹 아이콘에 관한 것입니다. 512x512에서 아이콘을 제공하려고 시도했지만 iPhone 4 시뮬레이터에서는 미리보기에서 멋지게 보이지만 홈 화면에 추가하면 픽셀 화가 잘못됩니다.

좋은면에서, iPad에서 더 큰 아이콘을 사용하면 (여전히 512x512 테스트로) iPad에서 더 나은 품질로 나타나는 것처럼 보입니다. 잘만되면 iPhone 4 렌더링은 버그입니다.

레이더에서 이것에 대한 버그를 열었습니다.

편집하다:

나는 현재 114x114 아이콘을 사용하고 있습니다. 아이폰 4가 출시 될 때 잘 보일 것입니다. iPhone 4가 나올 때 여전히 버그가 발생하면 iPad 아이콘을 최적화하고 (72x72에서는 선명하고 크기가 조정되지 않음) 오래된 iPhone의 경우 축소합니다.

들어 아이폰 과 아이팟 터치 , 그 측정 아이콘을 만들 :

    57 X 57 pixels
    114 X 114 pixels (high resolution @2X)

iPad의 경우 다음 을 측정하는 아이콘을 작성하십시오.

    72 x 72 pixels
    144 X 144 pixels (high resolution @2X)