Firefox ไอคอนดิ้นได้ ในแท็บไฟร์ฟอกซ์

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

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

ก่อน อื่น เพื่อนๆ ต้องทราบคุณสมบัติของ Favicon เสียก่อน เริ่มด้วยขนาดของภาพที่ใช้ทำไอคอนจะอยู่ที่ 16x16 พิกเซล โดยมีนามสกุลไฟล์เป็น .ico ซึ่งในที่นี้ เรากำลังจะสร้าง Favicon ที่สามารถขยับได้ อืม...พอพูดถึงไฟล์กราฟิกขยับได้ นายเกาเหลาจะนึกถึงไฟล์กราฟิกฟอร์แมต GIF89A หรือ Animated Gif ทุกทีเลย และปรากฏว่า ตรงเป้าเข้าประเด็นพอดี การทำ Favicon ที่เคลื่อนไหวได้ สามารถทำได้โดยการสร้าง และจัดเก็บไฟล์กราฟิก Animated GIF ขนาด 16 x 16 พิกเซล จากนั้นแปลงร่างให้มันด้วยการเปลี่ยนนามสกุลไฟล์เป็น .ico นายเกาเหลาได้ทดลองทำตัวอย่างง่ายๆ เป็นรูปสี่เหลี่ยมที่ภายในมีสี่เหลี่ยมจัตุรัสย่อยๆ อีก 4 รูป 4 สี ค่อยโผล่ขึ้นมาวนตามเข็มนาฬิกาใน Image Ready ของ Photoshop หลังจากเตรียมไฟล์ Favicon.ico ก็เสร็จเรียบร้อยแล้ว ขั้นต่อไปก็เป็นการติดตั้ง Animated Favicon ครับ

Animated Favicon(ลำดับภาพจากซ้ายไปขวา)สร้างจากไฟล์ GIF89A ขนาด 16x16 พิกเซล





สำหรับ การติดตั้ง Favicon บนเว็บไซต์ สามารถทำได้โดยจัดเก็บไฟล์ favicon เข้าไปในไดเรกทอรีเดียวกันกับไดเรกทอรีหลักที่ใช้เก็บเว็บเพจต่างๆ เช่น www.arip.co.th/2006/favicon.ico ซึ่งเป็นที่เดียวกันกับที่เก็บ www.arip.co.th/2006/index.html เป็นต้น โดยการทำงานในขั้นแรก บราวเซอร์จะค้นหาไฟล์ favicon.ico ถ้าไม่พบ มันจะตรวจสอบที่ไดเรกทอรีระดับสูงสุดของเซิร์ฟเวอร์ เช่น www.arip.co.th/favicon.ico เป็นต้น อย่าง ไรก็ตาม การเก็บไฟล์ favicon.ico ไว้บนเซิร์ฟเวอร์ บางครั้งมันก็อาจไม่ถูกโหลดโดยบราวเซอร์ได้เหมือนกัน เนื่องจากมันยังขึ้นอยู่กับชนิดและคอนฟิกของบราวเซอร์ด้วย ดังนั้น อีกวิธีหนึ่งที่ทำได้เหมือนกันก็คือ การประกาศไฟล์ favicon.ico ไว้ในเซกชัน ของหน้าเว็บ โดยเพิ่มแท็ก 2 บรรทัดล่างนี้เข้าไปครับ


กรณีบราวเซอร์ Firefox เมื่อมันตรวจพบไฟล์ favicon.ico (Animated GIF ที่เราสร้างขึ้นและเปลี่ยนนามสกุลเป็น .ico) โปรแกรมจะเรนเดอร์กราฟิกดิ้นได้ออกมาให้เห็นกันจะจะ เลยครับ เท่จริงๆ แต่ก็น่าเสียดายนะครับที่คุณสมบัติการทำงานลักษณะนี้ใช้ได้ใน Firefox เท่านั้น





ทดลอง เปิดหน้าเว็บที่ติดตั้งแท็กให้โหลด Favicon ที่ทำขึ้นมา ปรากฏว่า Favicon ทั้งที่อยู่บนแท็บ และหน้า URL ในช่องแอดเดรสเคลื่อนไหวได้อย่างสวยงามครับ

Credit - arip.co.th

ขอบคุงๆๆๆ