favicon มาจาก favorite+icon ก็คือ icon ที่อยู่ตรง url นั่นเอง
ตำแหน่งของมันจะอยู่หน้า http:// ที่บ่งบอกความเป็นเว็บของคุณนั่นเอง เช่นเดียวกับ icon ที่อยู่บนหน้า desktop
ทำไมต้องมี favicon?
1. ทำให้เว็บเราดูสวยขึ้นเล็กน้อย อย่างผิดหูผิดตา (ถ้ามีคนช่างสังเกต เพราะว่ามันเล็กมาก 16×16 เท่านั้น)
2. ทำให้ผู้เยี่ยมชมสามารถจดจำเว็บเราได้ จากภาพ หรือสัญลักษณ์
(ทางวิทยาศาสตร์เขาว่า..ในเชิงการใช้สีหรือรูปสัญลักษณ์แทน สิ่งของหรือบุคคลนั้นๆ จะช่วยให้มนุษย์จดจำได้ดี)
3. เวลาเรากด Bookmarks หรือ บันทึกหน้านั้นไว้เป็น รายการโปรด ของเราก็จะเห็นไอคอนนั้นได้เด่นชัด
ทำยังไง?
ก่อนอื่นก็ต้องมีโปรแกรมที่สามารถสร้าง .ico ได้ แล้วเราก็สร้าง icon ของเรา
อาจจะใช้ paint ที่ติดมากับ windows โดยตั้งค่าขนาดภาพที่ 16×16 และ save เป็นชื่ออะไรก็ได้ และ นามสกุล ico แค่นี้ก็เรียบร้อย
มีวิธีง่ายกว่านั้นมั้ย
ปัจจุบันนี้มีเว็บ tool ที่ช่วยให้เราสร้าง favicon ได้เพียงแค่ อัพ, คลิก, save 3 ขั้นตอนง่ายๆ ง่ายมั่กๆ
ไปที่เว็บนี้ http://tools.dynamicdrive.com/favicon/
ทีนี้ก็จะเห็น ปุ่ม Browser ใต้ปุ่มเขียนว่า “Supported file formats: gif, jpg, png, and bmp.”
เขารองรับภาพเกือบทุก format จริงๆ ทีนี้ท่านก็เลือกภาพเลย อยากให้ภาพไหนมาเป็น icon ของคุณก็ยัดมันเข้าไปเลย
# Use a gif or png with transparency if you require it.
# Maximum file size: 150.00 kB.
ถ้าภาพของเราเป็นแบบโปรงใส icon ก็จะโปร่งใสด้วยนะ ว้าวว แจ๋วจริงๆ และขนาดไฟล์ของรูปที่เราจะใช้ทำ icon ก็ต้องไม่เกิน 150.00kb นะ
เมื่อเลือกรูปแล้ว มาดูตรงนี้กันหน่อย สำหรับคนที่ไม่ได้ทำ Favicon สำหรับบนเว็บ ท่านสามารถทำ icon ใช้เองได้ เพียงแค่ติ๊กเครื่องหมาย ถูก ในช่องที่ท่านต้องการ
เอามาใส่เว็บไซต์เรายังไง?
การติดตั้ง Favicon บนเว็บไซต์ สามารถทำได้โดยจัดเก็บไฟล์ favicon เข้าไปใน directory เดียวกันกับ directory หลักที่ใช้เก็บ Files webpage ต่างๆ เช่น www.cymiz.com/insurance/favicon.ico link ซึ่งเป็นที่เดียวกันกับที่เก็บ www.cymiz.com/insurance/index.html link
การทำงานในขั้นแรก browser จะค้นหาไฟล์ favicon.ico ถ้าไม่พบ มันก็จะตรวจสอบใน “directory ระดับสูงสุดของ server” * เช่น www.cymiz.com/favicon.ico link
แต่ก็ใช่ว่า เราเอา favicon.ico ไปใส่แล้ว จะเห็น icon ของเว็บเราเสมอไป เนื่องจากมันยังขึ้นอยู่กับ “ชนิด” และ “การตั้งค่า” ของ browser ด้วย ดังนั้น อีกวิธีหนึ่งที่ทำได้เหมือนกันก็คือ การประกาศไฟล์ favicon.ico ไว้ใน section <head> ของหน้าเว็บ โดยเพิ่ม tag บรรทัดล่างนี้เข้าไป
<link rel=”shortcut icon” href=”favicon.ico”>
หรือ
<link href=”/templates/ชื่อโฟลเดอร์ของแทมเพลตที่ใช้งาน/favicon.ico” rel=”shortcut icon” type=”image/x-icon” />
ตำแหน่งที่เอาโค๊ดไปวาง ตามตัวอย่างด้านล่าง
<html>
<head>
<title>...</title>
<meta http-equiv="Content-Type" content="text/html; charset=TIS-620">
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
...
..