หากคุณมีเว็บไซต์ของคุณเองหรือกำลังพัฒนาเว็บไซต์สำหรับผู้อื่น คุณควรปรับแต่งไอคอนบุ๊กมาร์กที่บันทึกไว้ซึ่งปรากฏบนหน้าจอหลักของผู้ใช้ iOS ในภาพหน้าจอด้านบน คุณจะเห็นไอคอน Favicon OSXDaily แบบกำหนดเองอยู่บนหน้าจอของ iPhone

การตั้งค่า Apple Touch Icon เป็นความคิดที่ดี เพราะโดยค่าเริ่มต้น iOS จะบันทึกภาพขนาดเล็กของไซต์ ภาพขนาดย่อขนาดเล็กมักระบุได้ยากและโดยทั่วไปแล้วดูไม่สวยงาม ดังนั้นมาตั้งค่าภาพไอคอนโปรดของคุณเองแทน

วิธีปรับแต่งและตั้งค่าไอคอน Apple Touch สำหรับเว็บไซต์

• สร้างไอคอน ตรวจสอบให้แน่ใจว่ามันเป็นรูปสี่เหลี่ยมจัตุรัส ไอคอนใน OSXDaily.com จะมีขนาด 512×512 พิกเซล แต่คุณสามารถเลือกขนาดสี่เหลี่ยมจัตุรัสอื่น ๆ ได้หากต้องการ – บันทึกที่ใหญ่กว่าเหมาะสำหรับ จอภาพเรตินา
• บันทึกไอคอนหน้าจอหลักเป็นไฟล์ PNG และติดป้ายกำกับ: apple-touch-icon.png
• วาง apple-touch-icon.png ลงในไดเร็กทอรีเว็บเซิร์ฟเวอร์ราก เพื่อให้สามารถเข้าถึงได้ที่ domain.com/apple-touch-icon.png
• ทดสอบไอคอนบุ๊กมาร์กหน้าจอหลักของเว็บไซต์ของคุณโดยไปที่ไซต์จาก Safari ใน iOS แล้วแตะที่ “เพิ่มไปที่หน้าจอหลัก”
• ดูที่หน้าจอหลักของอุปกรณ์ iOS แล้วคุณจะเห็นบุ๊กมาร์กที่บันทึกไว้ที่นั่นพร้อมกับไอคอนใหม่ที่คุณกำหนดเอง เช่นภาพหน้าจอด้านบน

ตราบใดที่ไฟล์มีชื่อถูกต้องและอยู่ในไดเร็กทอรีรูทของเว็บเซิร์ฟเวอร์ Mobile Safari จะรู้ว่าต้องทำอย่างไร ดังนั้นจึงไม่จำเป็นต้องทำการปรับแต่งเพิ่มเติมเพื่อให้ไอคอน favicon เฉพาะ iOS ปรากฏขึ้น

สำหรับการอ้างอิง นี่คือรูปภาพ 'apple-touch-icon.png' ที่เราใช้สำหรับ OSXDaily.com ตัวอย่างไอคอนบุ๊กมาร์กนี้ถูกสร้างขึ้นและมีขนาดที่เหมาะสมสำหรับจอภาพเรตินา ():

คุณจะสังเกตเห็นว่าไฟล์ไอคอนจริงไม่มีการหักเหของแสงที่บันทึกไว้ในไอคอน iOS จัดการสิ่งนี้ด้วยตัวเอง คุณสามารถใช้รูปภาพใดก็ได้ที่คุณต้องการ แต่ฉันขอแนะนำให้สร้างภาพที่จับ UI ที่คุ้นเคยของไอคอน iOS ที่มีอยู่

เห็นได้ชัดว่าสิ่งนี้ไม่เหมือนกับการมีแอป iOS เฉพาะ แต่ประสบการณ์ผู้ใช้มือถือที่ดีจากเว็บเป็นความคิดที่ดี และเป็นการหลีกเลี่ยงสิ่งที่อาจมีราคาสูงในการพัฒนาแอป iOS

แล้วถ้าคุณกังวลเรื่องแบบนี้ อย่างน้อยคุณคงใช้ Photoshop ออกแบบไอคอนใช่ไหม? ลองดูบ้างในขณะที่คุณอยู่ที่นี่