Get Adobe Flash player

Favicon Best Practice 2017 ฉบับภาษาไทย

ในอดีดเราสามารถใช้ไฟล์ favicon.ico ขนาด 16×16 pixels ไฟล์เดียววางไว้บน root directory ของเว็บไซต์ เพื่อให้ Web Browser สามารถนำ Icon มาแสดงไว้หน้า Web Title ซึ่งก็ยังคงใช้งานได้จนถึงทุกวันนี้บนเว็บไซต์ แต่ในปัจจุบันเว็บไซต์ถูกนำไปเปิดบนหลากหลายอุปกรณ์ซึ่งมีความละเอียดของหน้าจอแตกต่างกัน นอกจากนั้นหากผู้ใช้ Add Website เป็น Bookmark หรือเพิ่มลงใน Home Screen ของโทรศัพท์ก็จะต้องใช้ Icon ขนาดใหญ่กว่าเดิม จึงทำให้ใน HTML5 มีคุณสมบัติใหม่เพิ่มเพื่อช่วยแก้ไขปัญหาเหล่านี้

Favicon ใน link (HTML5) จะมีคุณสมบัติเพิ่มขึ้นใหม่ประกอบด้วย

  1. รองรับไฟล์ชนิด png และ svg เพิ่ม นอกเหนือจาก ico (แต่รองรับไม่ครบทุก Web Browser)
  2. Attribute ใหม่คือ size ใช้กำหนดขนาดของ Icon เพื่อให้ Web Browser เลือกใช้ตามความเหมาะสม

ตัวอย่าง

ถ้าต้องการให้ Favicon ของเรารองรับทุก ๆ หน้าจอและอุปกรณ์จะต้องใส่ไฟล์ครบทุกขนาดตามตารางนี้

Size Name Purpose
32×32 favicon-32.png Standard for most desktop browsers
57×57 favicon-57.png Standard iOS home screen (iPod Touch, iPhone first generation to 3G)
76×76 favicon-76.png iPad home screen icon
96×96 favicon-96.png GoogleTV icon
120×120 favicon-120.png iPhone retina touch icon (Change for iOS 7: up from 114×114)
128×128 favicon-128.png Chrome Web Store icon & Small Windows 8 Star Screen Icon*
144×144 favicon-144.png IE10 Metro tile for pinned site*
152×152 favicon-152.png iPad touch icon (Change for iOS 7: up from 144×144)
167×167 favicon-167.png iPad Retina touch icon
(change for iOS 10: up from 152×152, not in action. iOS 10 will use 152×152)
180×180 favicon-180.png iPhone 6 plus
195×195 favicon-195.png Opera Speed Dial icon
(Not working in Opera 15 and later)
196×196 favicon-196.png Chrome for Android home screen icon
228×228 favicon-228.png Opera Coast icon

* Microsoft ต้องการ Meta tag msapplication-TileColor และ msapplication-TileImage สำหรับ IE10 บน Windows 8 และ Windows10 IE11 ขึ้นไปต้องการ browserconfig.xml.

จะเห็นว่าหากต้องการให้ Favicon สามารถรองรับแบบ Cross platform ได้เราจะต้องเหนื่อยมากในการเตรียมไฟล์และ Config ดังนั้นอาจจะพิจารณาเพื่อตัดตัวเลือกที่ไม่จำเป็นทิ้ง หรือใช้บริการเว็บไซต์ https://www.favicon-generator.org/ เพียงแค่ Upload ไฟล์ icon ที่มีขนาดมากกว่า 228×228 pixels จากนั้นระบบจะ generate ไฟล์ icon และ confg ที่จำเป็นทั้งหมด โดยมีขั้นตอนดังนี้

1) เลือกไฟล์ icon ที่ต้องการและเลือก Generate icons for Web, Androidm Microsoft and iOS

2) คลิกปุ่ม Create Favicon ระบบจะให้ Download ไฟล์สามารถ Extract ได้รายการไฟล์ดังนี้

3) จากนั้นให้นำไฟล์ทั้งหมด Upload เข้าสู่เว็บไซต์ และแทรก Script ด้านล่างนี้ไว้ใน Tag head สามารถแก้ไข path ให้ตรงกับที่อยู่ของไฟล์ได้ตามสะดวก

 

Leave a Reply

Your email address will not be published. Required fields are marked *