ไอคอน Apple Touch: ขนาด รูปแบบ และโค้ด

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

คำแนะนำเก่าให้ใช้แปดไฟล์ ตั้งแต่ 57×57 ถึง 152×152 พร้อมแอตทริบิวต์ sizes ของแต่ละไฟล์ รูปแบบเหล่านั้นไม่จำเป็นแล้ว มีแต่เพิ่ม HTML และคำขอโดยได้ผลเหมือนเดิม

ไฟล์ต้องเป็น PNG เพราะ iOS ไม่อ่าน SVG หรือ WebP สำหรับไอคอนนี้ และ JPEG ทำให้ขอบคมของภาพสีเรียบเสียคุณภาพ

พื้นหลังโปร่งใสอาจให้ผลไม่คาดคิดตามรุ่นระบบและบริบทการแสดงผล หากต้องการควบคุมภาพบนหน้าจอหลัก ให้ใช้ภาพบนพื้นหลังทึบที่เลือกเอง

แก้โดยรวมภาพกับพื้นหลังทึบก่อนส่งออก เลือกสีแบรนด์หรือสีขาวหากสัญลักษณ์มีสีสัน และเว้นระยะรอบภาพประมาณ 10% เพื่อไม่ให้ดูอึดอัด

อย่าทำมุมโค้งเอง เพราะ iOS ใช้หน้ากากมุมโค้งทับอีกชั้น ภาพที่โค้งอยู่แล้วจะเกิดขอบโค้งซ้อนและมุมที่ไม่สวย

ใส่เพียงบรรทัดเดียวใน head ของหน้าเว็บ: link rel="apple-touch-icon" href="/apple-touch-icon.png" ไม่จำเป็นต้องมี sizes เมื่อใช้ไฟล์เดียว

จะเพิ่ม meta name="apple-mobile-web-app-title" content="Your brand" เพื่อกำหนดชื่อใต้ไอคอนก็ได้ หากไม่มี iOS จะใช้ชื่อหน้าเว็บซึ่งมักยาวเกินไปจนถูกตัด

วางสำเนาไฟล์ไว้ที่รากในชื่อ apple-touch-icon.png ด้วย เช่นเดียวกับ favicon.ico หากไม่พบแท็ก iOS จะค้นหาที่อยู่นี้

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

หากยังไม่พบไอคอน ตรวจสามอย่าง: ไฟล์ตอบกลับ 200 แทน 404 ใช้ชนิดเนื้อหา image/png และไม่ถูกกฎ robots.txt หรือการยืนยันตัวตนบล็อก

เครื่องมือตรวจสอบ LFFavicon ทดสอบกรณีเหล่านี้กับ URL สาธารณะและแสดงไอคอนที่ดึงมาได้จริง