apple-touch-icon.png ควรมีขนาดเท่าใดสำหรับ iPad และ iPhone

รองรับไอคอน Apple touch ที่ใหญ่กว่า 60x60 หรือไม่และถ้าเป็นเช่นนั้นฉันควรใช้ขนาดใดสำหรับ iPad และ iPhone

อัปเดตรายการธันวาคม 2019 ไอคอน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, 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 iOS 11: ตรวจสอบ iOS 11, เปิดตัว iPhone X และ iPhone 8

อัปเดตพฤศจิกายน 2016 iOS 10: เปิดตัว iOS เวอร์ชันใหม่ iPhone 7 และ iPhone 7plus มีความละเอียดการแสดงผล dpi และอื่น ๆ เช่นเดียวกับ iPhone 6s และ iPhone 7plus จนถึงขณะนี้ไม่พบการเปลี่ยนแปลงที่เกี่ยวข้องกับการอัปเดต 2015

อัปเดต Android กลางปี ​​2016: เพิ่มอุปกรณ์ Android ลงในรายการเนื่องจากลิงก์ apple-touch ถูกทำเครื่องหมายว่าเลิกใช้งานโดย Google และจะไม่รองรับอุปกรณ์ของพวกเขาเมื่อใดก็ได้

<!-- 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 พิกเซลส่วนความละเอียดอื่น ๆ ยังคงเท่าเดิม

อัปเดต 2014 iOS 8:

สำหรับ iOS 8 และ iPhone 6 plus

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

iPhone 6 ใช้ภาพขนาด 120 x 120 พิกเซลเช่นเดียวกับ iPhone 4 และ 5 ส่วนที่เหลือเหมือนกับ iOS 7

อัปเดต 2013 iOS7:

สำหรับ iOS 7 ความละเอียดที่แนะนำมีการเปลี่ยนแปลง:

• สำหรับ iPhone Retina จาก 114 x 114 พิกเซลเป็น 120 x 120 พิกเซล
• สำหรับ iPad Retina จาก 144 x 144 px เป็น 152 x 152 px

ความละเอียดอื่น ๆ ยังคงเดิม

• ค่าเริ่มต้น 57 x 57 พิกเซล
• 76 x 76 พิกเซลสำหรับ iPad ที่ไม่มีเรตินา

ที่มา: 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" />

สิ่งนี้จะดูดีในทุกอุปกรณ์ของ apple ;)

ด้วย iPad (รุ่นที่ 3) ตอนนี้มีไอคอนสี่ขนาดคือ 57x57, 72x72, 114x114, 144x144

เนื่องจากไอคอนเรติน่ามีขนาดใหญ่กว่าไอคอนมาตรฐานถึงสองเท่าเราจึงจำเป็นต้องสร้าง2 ไอคอนเท่านั้น : 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: ใช้ไอคอน PNG หนึ่งไอคอนที่ 180 x 180 px @ 150 ppiจากนั้นเชื่อมโยงดังนี้:

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

รายละเอียดเกี่ยวกับแนวทาง

ในฐานะของ 2020-04 การตอบสนองที่ยอมรับจากแอปเปิ้ลจะปรากฏในเอกสารของพวกเขาบน iOS

อย่างเป็นทางการข้อมูลจำเพาะกล่าวว่า:

• iPhone 180px × 180px (60pt × 60pt @ 3x)
• iPhone 120px × 120px (60pt × 60pt @ 2x)
• iPad Pro 167px × 167px (83.5pt × 83.5pt @ 2x)
• iPad, iPad mini 152px × 152px (76pt × 76pt @ 2x)

ในความเป็นจริงความแตกต่างของขนาดเหล่านี้มีเพียงเล็กน้อยดังนั้นการประหยัดประสิทธิภาพจะมีความสำคัญกับไซต์ที่มีการเข้าชมสูงมากเท่านั้น

สำหรับไซต์ที่มีการเข้าชมต่ำโดยปกติฉันจะใช้ไอคอน PNG หนึ่งไอคอนที่ 180 x 180 px @ 150 ppiและได้ผลลัพธ์ที่ดีมากในทุกอุปกรณ์แม้แต่ขนาดบวก

ฉันพัฒนาและออกแบบแอป iOS มาระยะหนึ่งแล้วและนี่คือเอกสารสรุปการออกแบบ iOS ที่ดีที่สุด!

มีความสุข :)!

อัปเดต: สำหรับ iOS 8+ และอุปกรณ์ใหม่ (iPhone 6, 6 Plus, iPad Air) ดูลิงก์ที่อัปเดตนี้

การอัปเดต Meta: Iphone 6s / 6s Plus มีความละเอียดเท่ากับ iPhone 6/6 Plus ตามลำดับ

นี่คือภาพจากบทความเวอร์ชันใหม่:

เอกสารที่เกี่ยวข้องในเว็บไซต์ของ Apple, ระบุไอคอนหน้าเว็บสำหรับเว็บคลิป

ไม่จำเป็นต้องใส่อะไรลงในส่วนหัวของเอกสารของคุณ หากไม่มีการระบุไอคอนโดยใช้องค์ประกอบลิงก์ไดเรกทอรีรากของเว็บไซต์จะค้นหาไอคอนที่มีคำนำหน้าไอคอนแอปเปิ้ลทัชหรือไอคอนแอปเปิ้ลแตะไอคอนล่วงหน้า

ตัวอย่างเช่นหากขนาดไอคอนที่เหมาะสมสำหรับอุปกรณ์คือ 57 x 57 ระบบจะค้นหาชื่อไฟล์ตามลำดับต่อไปนี้:

• apple-touch-icon-57x57-precomposed.png
• apple-touch-icon-57x57.png
• apple-touch-icon-precomposed.png
• apple-touch-icon.png

ใช่. หากขนาดไม่ตรงกันระบบจะทำการปรับขนาดใหม่ แต่จะดีกว่าถ้าสร้างไอคอน 2 เวอร์ชัน

• iPad - 72x72
• iPhone (≥4) - 114x114
• iPhone ≤3GS - 57x57 - ถ้าเป็นไปได้

คุณสามารถแยกความแตกต่างระหว่าง iPad และ iPhone โดยตัวแทนผู้ใช้บนเซิร์ฟเวอร์ของคุณ หากคุณไม่ต้องการเขียนสคริปต์บนเซิร์ฟเวอร์คุณสามารถเปลี่ยนไอคอนด้วย Javascript โดย

<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จาก iPhone ≤3GSใน Javascript)

ใช่รองรับขนาดใหญ่กว่า 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 แล้วและบนเครื่องจำลอง iPhone 4 มันดูดีมาก (ในภาพตัวอย่าง) อย่างไรก็ตามเมื่อเพิ่มลงในหน้าจอหลักจะมีพิกเซลไม่ดี

ในด้านดีหากคุณใช้ไอคอนขนาดใหญ่บน iPad (ยังคงใช้การทดสอบ 512x512 ของฉัน) ดูเหมือนว่าจะมีคุณภาพที่ดีกว่าบน iPad หวังว่าการเรนเดอร์ iPhone 4 จะเป็นบั๊ก

ฉันได้เปิดจุดบกพร่องเกี่ยวกับเรดาร์แล้ว

แก้ไข:

ตอนนี้ฉันใช้ไอคอน 114x114 โดยหวังว่ามันจะดูดีบน iPhone 4 เมื่อเปิดตัว หาก 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)