아이패드와 아이폰의 애플터치 아이콘.png은 어떤 크기여야 합니까?

아이패드와 아이폰의 애플터치 아이콘.png은 어떤 크기여야 합니까?

60x60보다 큰 Apple 터치 아이콘이 지원되며, 지원된다면 iPad와 iPhone에 어떤 치수를 사용해야 합니까?

업데이트된 목록 2019년 12월, iOS13 iOS 180x180px용 아이콘 하나와 안드로이드 192x192px용 아이콘 하나(사이트에서 선언됨).웹 매니페스트).

<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 확인, 아이폰 X와 아이폰 8 도입

2016년 11월 업데이트 iOS 10: 새로운 iOS 버전 iPhone 7 및 iPhone 7plus가 도입되었으며, 현재까지 업데이트 2015와 관련하여 변경된 사항이 없습니다.

2016년 중반 안드로이드 업데이트:Apple-Touch 링크가 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 및 아이패드 프로용

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

새 iPhone(6s 및 6s Plus)은 iPhone(6s 및 6s Plus)과 동일한 크기를 사용하고, 새 iPad Pro는 167x167px 크기의 이미지를 생성하며, 다른 해상도는 여전히 동일합니다.

2014 iOS 8 업데이트:

iOS 8 및 iPhone 6 plus

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

아이폰 6은 아이폰 4와 동일한 120 x 120 px 이미지를 사용하고 나머지는 iOS 7과 동일합니다.

2013 iOS7 업데이트:

iOS 7의 경우 권장 해상도가 변경되었습니다.

• 아이폰 Retina의 경우 114 x 114 px ~ 120 x 120 px
• iPad Retina의 경우 144 x 144 px ~ 152 x 152 px

다른 해상도는 여전히 동일합니다.

• 57 x 57px 기본값
• 레티나가 없는 iPad의 경우 76 x 76 px

출처: 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세대)를 사용하면 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" />

애플 사이트의 아이콘은 152x152 픽셀입니다.
http://www.apple.com/.pnghttp ://www.apple.com/apple-touch-icon.png

그게 당신의 질문에 대답하길 바랍니다.

TL;DR: 180 x 180 px @ 150 ppi에서 하나의 PNG 아이콘을 사용한 다음 다음과 같이 링크합니다.

<link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">

접근법에 대한 세부 정보

2020-04년 현재 Apple의 표준 응답은 iOS 문서에 반영되어 있습니다.

공식적으로 사양은 다음과 같습니다.

• 아이폰 180pxx180px(60ptx60pt@3x)
• 아이폰 120pxx120px(60ptx60pt@2x)
• 아이패드 프로 167pxx167px(83.5ptx83.5pt@2x)
• 아이패드, 아이패드 미니 152pxx152px(76ptx76pt@2x)

실제로 이러한 사이징 차이는 매우 작기 때문에 성능 절감은 매우 높은 트래픽 사이트에서만 중요합니다.

더 낮은 트래픽 사이트의 경우, 저는 일반적으로 180 x 180 px @ 150 ppi에서 PNG 아이콘 하나를 사용하며, 더 큰 크기의 장치를 포함한 모든 장치에서 매우 좋은 결과를 얻습니다.

저는 한동안 iOS 앱을 개발하고 디자인해왔는데 이것은 최고의 iOS 디자인 치트 시트입니다!

재미있게 놀아요 :)!

업데이트: iOS 8+ 및 새 장치(아이폰 6, 6 Plus, iPad Air)의 경우 이 업데이트된 링크를 참조하십시오.

메타 업데이트:iPhone 6s/6s Plus의 해상도는 iPhone 6/6 Plus와 동일합니다.

다음은 새 버전의 기사 이미지입니다.

Apple 사이트의 웹 클립용 웹 페이지 아이콘 지정 관련 설명서입니다.

당신의 문서 머리에 어떤 것도 넣을 필요가 없습니다.링크 요소를 사용하여 아이콘을 지정하지 않은 경우 웹 사이트 루트 디렉토리에서 애플-터치 아이콘 또는 애플-터치 아이콘 사전 구성 접두사가 있는 아이콘을 검색합니다.

예를 들어 장치에 적합한 아이콘 크기가 57 x 57이면 시스템은 다음 순서로 파일 이름을 검색합니다.

• 사과-터치-아이콘-57x57-사전 작곡.png
• 애플터치-아이콘-57x57.png
• 사과-터치-아이콘 사전 작곡의png
• 애플 터치 아이콘.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
}

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

(자바스크립트에서 iPhone≥4와 iPhone33GS를 구별할 수 있는 공개적인 방법은 아직 없습니다.)

예, 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은 먼저 서버 루트에서 원하는 크기(이름 지정 형식: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로 아이콘을 제공하려고 시도했는데 아이폰4 시뮬레이터에서는 (미리보기에서) 보기에 좋지만 홈 스크린에 추가하면 픽셀화가 잘 되지 않습니다.

좋은 면은 아이패드에서 더 큰 아이콘을 사용하면 (512x512 테스트에서도) 아이패드에서 더 좋은 품질로 나오는 것 같습니다.아이폰 4 렌더링이 버그이기를 바랍니다.

제가 레이더에 이에 대한 버그를 열었습니다.

편집:

아이폰4가 출시되면 잘 어울릴 것이라는 기대감으로 114x114 아이콘을 사용하고 있습니다.iPhone 4가 출시될 때 버그가 계속 발생하면 iPad용 아이콘을 최적화하고(72x72에서 크립 및 크기 조정 없음) 구형 iPhone용 아이콘을 축소합니다.

iPhone 및 iPod touch의 경우 다음을 측정하는 아이콘을 만듭니다.

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

iPad의 경우 다음을 측정하는 아이콘을 만듭니다.

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

언급URL : https://stackoverflow.com/questions/2997437/what-size-should-apple-touch-icon-png-be-for-ipad-and-iphone