นักพัฒนาเว็บและเจ้าของเว็บไซต์ให้ความสนใจ คุณต้องตั้งค่าไอคอนบุ๊กมาร์ก iOS ที่พร้อมใช้งานเรตินา ไอคอนบุ๊กมาร์กเรียกว่า Apple Touch Icon และภาพที่กำหนดเองเหล่านี้จะกลายเป็นไอคอนที่แสดงบนหน้าจอหลักของผู้ใช้เมื่อพวกเขาบุ๊กมาร์กเว็บไซต์บน iPad iPhone หรือ iPod touch ใน iOS หรือแผงบุ๊กมาร์กของ Safari สำหรับ OS Xหากไม่มีการตั้งค่าไฟล์ apple-touch-icon แบบกำหนดเอง ผู้ใช้จะได้รับภาพขนาดย่อของหน้าเว็บที่น่าเบื่อและมักจะน่าเกลียด และหากไม่ใช้ไอคอนที่รองรับเรตินา ไอคอนบุ๊กมาร์กจะดูเป็นพิกเซลและน่ากลัวโดยทั่วไปบนหน้าจอ iPad ใหม่

นี่คือสิ่งที่คุณต้องทำเพื่อสร้างไอคอน Apple Touch ที่สมบูรณ์แบบสำหรับทุกเว็บไซต์ด้วยขั้นตอนง่ายๆ ไม่กี่ขั้นตอน

1) สร้างไอคอนเว็บไซต์ iOS ที่พร้อมใช้งาน Retina

ใช้เทมเพลตหรือออกแบบเอง ฉันใช้ชุดไอคอนเรตินา DIY อย่างง่ายที่กล่าวถึงในโพสต์ก่อนหน้านี้ มันเป็นไฟล์ PSD ที่ทำให้การออกแบบไอคอน iOS ที่ดูดีเป็นเรื่องง่ายเพียงแค่คลิกหรือสองครั้ง วางเว็บไซต์หรือโลโก้บริษัท แล้วคุณก็พร้อมไปต่อ หากคุณไม่มีสิ่งที่จะแก้ไขไฟล์ PSD Photoshop CS6 beta นั้นยอดเยี่ยมและสามารถดาวน์โหลดและใช้งานได้ฟรีจนกว่าเวอร์ชั่นสุดท้ายจะออกมาในปลายปีนี้

2) บันทึกเป็น PNG & ตั้งชื่อไอคอนบุ๊กมาร์กเว็บไซต์ Retina

ไอคอนต้องเป็น PNG และต้องมีชื่ออย่างใดอย่างหนึ่งจากสองอย่าง ชื่อไฟล์แต่ละชื่อมีลักษณะที่แตกต่างกันเล็กน้อยของไอคอนที่แสดงบนหน้าจอหลักของผู้ใช้:

• “apple-touch-icon.png” จะเพิ่มฟองไฮไลท์ซ้อนทับไปที่ไอคอน
• “apple-touch-icon-precomposed.png” จะแสดงไอคอนตามที่สร้างขึ้นครั้งแรกโดยไม่มีไฮไลท์ซ้อนทับ

ใช้ตัวเลือกหลัง -precomposed หากคุณสร้างไฮไลท์ของคุณเอง หรือถ้าคุณต้องการให้ไอคอนดูเรียบขึ้นโดยไม่มีฟองอากาศที่แพร่หลาย ซึ่งปรากฏบนไอคอนเริ่มต้นส่วนใหญ่ของ Apple

3) อัปโหลดไอคอนสัมผัสที่คั่นหน้าเว็บไซต์ไปยัง Base Web Directory

ใช้ไคลเอ็นต์ SFTP (OS X มี FTP ใน Finder และ CyberDuck หรือ Filezilla ฟรี) เพื่อคัดลอกไฟล์ apple-touch-icon.png ไปยังไดเร็กทอรีเว็บรูท โดยปกติจะเป็นตำแหน่งเดียวกับที่ตั้งของไฟล์ดัชนีหลักของไซต์ เมื่ออัปโหลดแล้ว ให้ยืนยันว่าอยู่ในตำแหน่งที่ถูกต้องโดยเปิดเว็บเบราว์เซอร์และไปที่ “http://SITEURL.com/apple-touch-icon.png” และตรวจสอบว่าโหลดได้

นี่คือตัวอย่างไอคอนบุ๊กมาร์กขนาด 512×512 ที่พร้อมใช้งานเรตินาจาก OSXDaily.com:

สังเกตว่าหากไม่มีแฟล็ก -precomposed ไอคอนด้านบนจะแสดงลูกโป่งไฮไลท์ คุณสามารถเห็นความแตกต่างระหว่างทั้งสองได้โดยการเปรียบเทียบไอคอนจริงกับที่แสดงในภาพหน้าจอเป็นบุ๊กมาร์ก

4) ใช้อุปกรณ์ iOS และบุ๊กมาร์กไซต์

นี่คือส่วนที่ง่ายที่สุด คว้าอุปกรณ์ iOS (ควรเป็น iPad 3 เพื่อยืนยันด้านเรตินา) และเปิด Safariรีเฟรชเว็บไซต์ที่คุณอัปโหลดไอคอน จากนั้นแตะไอคอนลูกศรแล้วเลือก "เพิ่มไปที่หน้าจอหลัก" ตั้งชื่อบุ๊กมาร์ก จากนั้นกลับไปที่หน้าจอหลักเพื่อยืนยันว่าอยู่ที่นั่น

แม้ว่าจะมีขนาด 512 x 512 พิกเซล ไอคอนเรตินาจะลดขนาดลงใน iPhone รุ่นเก่าและอุปกรณ์ที่ไม่ใช่เรตินา ถ้าคุณต้องการจริงๆ คุณสามารถใช้ CSS และ HTML เพื่อแสดงไอคอนขนาดต่างๆ บนอุปกรณ์ต่างๆ ได้ แต่ก็ไม่จำเป็นจริงๆ

ตอนนี้ หากมีคนบุ๊กมาร์กเว็บไซต์ของคุณบน iPad ที่มีจอภาพเรตินา ก็จะดูดีขึ้นมากบนหน้าจอหลักของพวกเขา นั่นคือทั้งหมดที่มีให้ และใช่ เราเคยเขียนเกี่ยวกับไอคอนระบบสัมผัสของ Apple มาก่อน แต่ตอนนี้สมควรได้รับการกล่าวถึงอีกครั้งว่า iPad 3 ต้องการไอคอนและกราฟิกที่มีความละเอียดสูงขึ้นอย่างมาก