Favicon คืออะไร? สำคัญต่อการทำเว็บไซต์อย่างไร?

พูดถึง Favicon อาจมีหลายคนที่สงสัยว่ามันคืออะไร แตกต่างจาก Icon (ไอคอน) ทั่วไปหรือไม่ คำตอบคือมันเป็นสิ่งที่เราพบเห็นได้เวลาเปิด Web Browser (เว็บเบราว์เซอร์) บนคอมพิวเตอร์ โน้ตบุ๊ก สมาร์ทโฟน รวมถึงอุปกรณ์ที่ใช้เชื่อมต่ออินเทอร์เน็ตอื่นๆ เพื่อให้การใช้งาน Web Browser ง่ายขึ้น และยังเป็นโลโก้ที่ช่วยบ่งบอกความเป็นเว็บไซต์ต่างๆ ด้วย

Favicon คืออะไร?

Favicon คือรูปเล็กๆ ที่เป็นสัญลักษณ์แทนเว็บไซต์ เกิดจากกานผสมคำสองคำ คือ Favorite และ Icon เดิมเป็นไฟล์รูปภาพนามสกุล .ico ที่มีขนาด 16 x 16 pixel นิยมใช้เป็นรูปโลโก้ของเว็บไซต์ ใช้บนบราว์เซอร์ โดยเป็นรูปที่มีขนาดเล็กจึงไม่รบกวนการโหลดของเว็บไซต์ ปัจจุบันมีนามสกุลไฟล์เป็นได้ทั้ง .co, .gif และ .png รวมถึงขนาดก็เพิ่มขึ้นเป็น 32 x 32, 48 x 48 และ 64 x 64 pixel

• 

ตัวอย่าง Favicon จาก favicon-generator.org

ประโยชน์ของ Favicon

1. ทำให้จดจำเว็บไซต์นั้นได้ง่ายขึ้น

Icon เป็นสิ่งที่เป็นเหมือนสัญลักษณ์ และ Favicon เป็น Icon เล็กๆ ที่ทำให้คนจดจำและรู้ทันทีว่านี่หมายถึงเว็บไซต์อะไร เพราะประกอบด้วยเส้น สี รูปร่างที่เป็นเอกลักษณ์ จดจำง่าย ไม่เหมือนข้อความยาวๆ หรือรูปภาพ

2. แสดงบน Address Bar ของ Web Browser

เวลาเราใช้งาน Web Browser เป็นเรื่องปกติที่เราจะเปิดหน้าต่างไว้หลายแท็บ การที่มี Favicon ปรากฏอยู่ที่ Address Bar จะทำให้การใช้งานง่ายขึ้น เพราะดูง่ายว่าหน้าต่างไหนคือเว็บไซต์อะไร

3. แสดงบนแถบบุ๊กมาร์ก

Favicon เป็นไอคอนเล็กๆ ที่ปรากฏบนแถบ Bookmark เมื่อเรากด Favorite หน้าเว็บไซต์นั้นเอาไว้ โดยเราสามารถคลิกเพื่อไปยังเว็บไซต์นั้นได้อย่างรวดเร็ว

การสร้างไฟล์ Favicon

1. เตรียมไฟล์ภาพสำหรับทำ Favicon

โดยไฟล์ภาพต้องมีนามสกุลเป็น .ico, .gif หรือ .png และมีขนาดภาพตั้งแต่ 16×16, 32×32, 48×48, ไปจนถึง 64×64 pixel ขึ้นอยู่กับ Web Browser ซึ่งสามารถแปลงไฟล์ภาพโดยใช้โปรแกรมต่างๆ เช่น Photoshop หรือใช้บริการแปลงไฟล์จากเว็บไซต์ต่างๆ ก็ได้

2. อัพโหลดไฟล์แล้วติดโค้ด

อัพโหลดไฟล์ลงบน Host แล้ว Path ชื่อไฟล์ให้มีลักษณะตามโค้ดด้านล่างนี้ โดยตรงชื่อเว็บไซต์ (yourwebsite) ต้องเป็นเว็บไซต์ของเรา จากนั้นนำไปใส่ส่วน head ของไฟล์ index.html

<link rel=”shortcut icon” type=”image/x-icon” href=” http://yourwebsite.com/favicon.ico”>

ถ้าใช้เว็บไซต์สำเร็จรูปอย่าง WordPress ให้หาเมนูสำหรับการแก้ Favicon โดยอาจอยู่ในส่วนของ Site Setting หรือ Theme Option (ขึ้นอยู่กับ Theme ที่ใช้) จากนั้นกด Browse เพื่อเลือกไฟล์ Favicon ได้เลย

Favicon เป็นสิ่งสำคัญอย่างหนึ่งที่ทำให้คนจดจำเว็บไซต์ของเราได้พอๆ กับรูปร่างหน้าตาโดยรวมของเว็บไซต์ ดังนั้นการเลือก รูปภาพที่มีความสวยงามและบ่งบอกตัวตนของเว็บไซต์จึงเป็นเรื่องสำคัญและไม่ควรละเลย ทั้งนี้ควรเลือกให้มีเอกลักษณ์ พยายามอย่าให้ซ้ำหรือคล้ายคลึงกับเว็บไซต์อื่นๆ จนผู้ใช้งานเกิดความสับสน