Apple คำแนะนำไอคอนสัมผัส
เมื่อมีคนเพิ่มเว็บไซต์ของคุณไปที่หน้าจอหลักของ iOS Safari จะใช้ apple-touch-icon — ไม่ใช่ favicon.ico ใช้ 180×180 PNG (หรือสี่เหลี่ยมจัตุรัสขนาดใหญ่ที่ลดขนาดลงอย่างหมดจด) และเชื่อมโยงเข้ากับ <head> ของคุณ
Apple ไม่ได้ใช้การมาสก์กับ iOS สมัยใหม่สำหรับคลิปเว็บเหมือนกับที่ใช้กับแอปแบบเนทีฟ แต่ไอคอนของคุณควรยังคงเป็นสี่เหลี่ยมจัตุรัสและมีระยะขอบที่ปลอดภัย — ให้แทรกโลโก้ไว้ประมาณ 10% ดังนั้นมุมโค้งมนจะไม่ตัดอาร์ตเวิร์ก
ใช้ <link rel="apple-touch-icon" size="180x180" href="/apple-touch-icon.png"> ไฟล์ขนาด 180 × 180 ไฟล์เดียวครอบคลุม iPhone ปัจจุบันทั้งหมด รายการเสริม 152×152 และ 167×167 ช่วยเค้าโครง iPad รุ่นเก่าได้
วิธีการทำงาน
- 1
ส่งออก 180×180 PNG
จากเครื่องมือสร้าง favicon หรือตัวปรับขนาดรูปภาพของเรา
- 2
อัปโหลดไปยังรูทของไซต์
/apple-touch-icon.png ควบคู่ไปกับ favicon.ico
- 3
เพิ่มแท็กลิงก์
<link rel="apple-touch-icon" size="180x180" href="/apple-touch-icon.png"> ใน <head>
ลองเลย
สร้าง apple-touch-icon
เครื่องมือสร้าง Faviconคำถามที่พบบ่อย
apple-touch-icon ไซส์อะไรครับ?+
180×180 พิกเซลสำหรับ iPhone ปัจจุบัน ส่งออกจากต้นแบบ 512×512 หรือ 1024×1024
PNG หรือ ICO สำหรับ iOS?+
PNG เท่านั้น iOS ละเว้น .ico สำหรับไอคอนบนหน้าจอหลัก
ฉันยังต้องการ favicon.ico หรือไม่?+
ใช่ แท็บและเบราว์เซอร์อื่นๆ ยังคงใช้ .ico Apple-touch-icon เป็นส่วนเสริม