Apple คำแนะนำไอคอนสัมผัส

apple-touch-icon เป็นสินทรัพย์ที่แยกจาก favicon.ico ของคุณโดยสิ้นเชิง แท็บเบราว์เซอร์ใช้ favicon.ico (หรือ PNG/SVG ที่เชื่อมโยงของคุณ) การติดตั้งหน้าจอหลัก iOS ใช้ apple-touch-icon หากไม่มี apple-touch-icon Safari จะจับภาพหน้าจอที่มีความละเอียดต่ำของวิวพอร์ตของเพจของคุณ และใช้เป็นไอคอนบนหน้าจอหลัก ซึ่งเป็นผลลัพธ์ที่พร่ามัว ไร้แบรนด์ ซึ่งดูไม่เป็นมืออาชีพเมื่อเทียบกับแอปที่มาพร้อมเครื่อง

Apple เปิดตัว apple-touch-icon ใน iOS 1.1.3 ย้อนกลับไปในปี 2550 และตั้งแต่นั้นมาก็ได้พัฒนาขนาดที่รองรับ เนื่องจากความหนาแน่นของหน้าจอ iPhone และ iPad เพิ่มขึ้น คำแนะนำในปัจจุบันสำหรับไฟล์เดียวทุกอุปกรณ์คือ 180×180 พิกเซล ขนาดนี้จะแสดงที่ความหนาแน่น 60pt @3x บน iPhone 6 Plus, iPhone X และ iPhone รุ่นต่อๆ ไปทั้งหมด รุ่นเก่า (iPhone SE รุ่นที่ 1, iPhone รุ่นพรีพลัส) ใช้ 120×120 ที่ 2x — iOS จะลดขนาดไฟล์ 180×180 ให้พอดีโดยอัตโนมัติ

สำหรับการครอบคลุมของ iPad Apple แนะนำ 167×167 สำหรับ iPad Pro (3x) และ 152×152 สำหรับ iPad รุ่นมาตรฐาน ในทางปฏิบัติ ไฟล์ 180×180 ไฟล์เดียวที่ทำหน้าที่เป็น apple-touch-icon ครอบคลุมทุกกรณีเหล่านี้อย่างเป็นที่ยอมรับ เนื่องจาก iOS ลดขนาดลงด้วยการกรองไบลิเนียร์คุณภาพสูง หากความคมชัดของพิกเซลสมบูรณ์แบบบน iPad Pro เป็นสิ่งสำคัญ ให้เพิ่มแท็ก `<link rel='apple-touch-icon' size='167x167' href='/apple-touch-icon-167x167.png'>` เพิ่มเติม

รูปแบบ PNG จำเป็นสำหรับ apple-touch-icon iOS ละเว้น .ico, JPEG, SVG และ GIF สำหรับไอคอนบนหน้าจอหลัก ส่งออก PNG-32 (พร้อมช่องอัลฟ่า) หรือ PNG-24 เสมอ (โดยไม่มีความโปร่งใส หากไอคอนของคุณมีพื้นหลังทึบ) รองรับและแนะนำให้ใช้ความโปร่งใส — ไอคอนพื้นหลังโปร่งใสช่วยให้ iOS ใช้เอฟเฟกต์มุมมนและเงามาตรฐานกับเวอร์ชัน iOS ที่เก่ากว่าได้

อัตรากำไรขั้นต้นที่ปลอดภัยมีความสำคัญสำหรับ apple-touch-icon แม้ว่า iOS จะไม่ใช้การซ้อนทับแบบเงาแบบเก่าอีกต่อไป (นำออกใน iOS 7) แต่จะตัดไอคอนให้เป็นรูปทรงสี่เหลี่ยมผืนผ้าโค้งมน เก็บโลโก้หลักของคุณไว้ประมาณ 10% ในทุกด้าน เพื่อให้แน่ใจว่าไม่มีสิ่งใดที่สำคัญถูกตัดออกด้วยมุมโค้งมน พื้นที่ปลอดภัยมีขนาดประมาณ 162×162 พิกเซลภายในผืนผ้าใบขนาด 180×180

การวางไฟล์ apple-touch-icon ไว้ที่รากของโดเมนเป็นสิ่งสำคัญ แม้ว่าคุณจะสามารถใช้ URL ใดๆ ผ่านทางแท็กลิงก์ href ได้ แต่โปรแกรมรวบรวมข้อมูล iOS Safari บางเวอร์ชันและโปรแกรมรวบรวมข้อมูล Apple บางตัว (สำหรับการผสานรวมเครื่องมือค้นหาของ Spotlight) จะพยายามดึงข้อมูล /apple-touch-icon.png หรือ /apple-touch-icon-precomposed.png โดยตรงจากรูทโดยไม่ต้องอ่านแท็กลิงก์ HTML การวางไฟล์ไว้ที่รูทจะทำให้มีความเข้ากันได้ดีที่สุด

แท็กรูปแบบ `precomposed` — `<link rel='apple-touch-icon-precomposed'>` — แจ้งเวอร์ชัน iOS ที่เก่ากว่าว่าอย่าใส่เอฟเฟ็กต์ภาพเพิ่มเติม (มันเงา มุมโค้งมน เงาตกกระทบ) กับไอคอนของคุณ Apple ลบเอฟเฟกต์เหล่านี้ใน iOS 7 ดังนั้นในปี 2026 ความแตกต่างระหว่าง `apple-touch-icon` และ `apple-touch-icon-precomposed` จึงไม่เกี่ยวข้องกับ iOS สมัยใหม่ ใช้ค่า rel `apple-touch-icon` ธรรมดา

รองรับการประกาศหลายขนาดโดยใช้แท็กลิงก์หลายแท็ก เพื่อความแม่นยำสูงสุดในอุปกรณ์ Apple ทั้งหมด คุณสามารถประกาศ: `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon-180x180.png'>` สำหรับ iPhone 6 Plus และใหม่กว่า `<link rel='apple-touch-icon' size='167x167' href='/apple-touch-icon-167x167.png'>` สำหรับ iPad Pro และ `<link rel='apple-touch-icon' size='152x152' href='/apple-touch-icon-152x152.png'>` สำหรับ iPad รุ่นเก่า iOS เลือกคู่ที่ใกล้เคียงที่สุด

Apple Watch ไม่ได้ใช้ apple-touch-icon สำหรับไอคอนแอปนาฬิกา ซึ่งมาจากชุดแอปแบบเนทีฟ อย่างไรก็ตาม หากผู้ใช้นำทางไปยังเว็บไซต์ของคุณจากเบราว์เซอร์ Apple Watch Safari Watch จะแสดง apple-touch-icon ในรายการบุ๊กมาร์ก 180×180 PNG แบบเดียวกันนี้ใช้งานได้โดยไม่มีการเปลี่ยนแปลงใดๆ

macOS Safari บน Mac ยังใช้ apple-touch-icon เมื่อเพิ่มเว็บไซต์ลงใน Dock เป็นเว็บแอพ (macOS Sonoma และใหม่กว่าอนุญาตให้ปักหมุดเว็บไซต์เป็นเว็บแอพจาก Safari) apple-touch-icon ถูกใช้เป็นไอคอน Dock สิ่งนี้ทำให้ apple-touch-icon มีความสำคัญไม่เพียงแต่สำหรับอุปกรณ์พกพาเท่านั้น แต่ยังรวมถึงผู้ใช้ Mac บน macOS สมัยใหม่ด้วย

เมื่ออัปเดต apple-touch-icon นั้น iOS จะแคชไอคอนเก่าบนอุปกรณ์ของผู้ใช้ และจะไม่ตรวจสอบการอัปเดต เว้นแต่ผู้ใช้จะลบไอคอนบนหน้าจอหลักออกและเพิ่มเข้าไปใหม่ หรือล้างแคชของ Safari ไม่มีการควบคุมฝั่งเซิร์ฟเวอร์สำหรับแคชนี้ — มันเป็นพฤติกรรม iOS ฝั่งไคลเอ็นต์ การสื่อสารสิ่งนี้กับผู้มีส่วนได้ส่วนเสียช่วยกำหนดความคาดหวังว่าการรีแบรนด์จะเผยแพร่ไปยังการบันทึกหน้าจอหลักที่มีอยู่ได้รวดเร็วเพียงใด

การทดสอบ apple-touch-icon ของคุณอย่างถูกต้องต้องใช้อุปกรณ์ iOS จริงหรือ Xcode iOS Simulator บนอุปกรณ์ ให้เปิด Safari นำทางไปยังไซต์ของคุณ แตะปุ่มแชร์ และเลือก "เพิ่มไปยังหน้าจอหลัก" การแสดงตัวอย่างในกล่องโต้ตอบควรแสดง apple-touch-icon ของคุณ หากแสดงภาพหน้าจอแทน อาจเป็นเพราะไม่สามารถเข้าถึงไฟล์ได้ที่ URL ที่ประกาศไว้ หรือแท็กลิงก์หายไปจาก HTML ของคุณ

favicon generator ส่งออก 180×180 apple-touch-icon.png ซึ่งเป็นส่วนหนึ่งของแพ็คเกจ favicon มาตรฐาน หลังจากสร้างแล้ว ให้วางไฟล์ไว้ที่รากไซต์ของคุณ และเพิ่มแท็กลิงก์ไปที่ HTML `<head>` ของคุณ หากต้องการคำแนะนำฉบับสมบูรณ์เกี่ยวกับขนาดไอคอนทั้งหมดที่อยู่ข้างๆ apple-touch-icon โปรดดูที่ข้อมูลอ้างอิง favicon sizes explained