สร้างไอคอน Favicon
การสร้าง Favicon ที่ใช้เสริมสร้างภาพลักษณ์เว็บไซต์นั้น บางท่านคงยังไม่เข้าใจว่ามันคืออะไร และอยู่ตรงส่วนไหน ให้ดูรูประกอบที่ 1
หมายเลข 1 และหมายเลข 2 คือ favicon หลังจากที่เราได้ออกแบบเว็บไซต์โดยเพิ่มเทคนิคนี้เข้าไป
วิธีการสร้าง Favicon
การสร้าง Favicon มีสามารถสร้างได้แบบรูปภาพนิ่งปกติ หรือเป็นภาพอนิเมชั่นก็ได้ครับ
เว็บไซต์ http://www.html-kit.com/favicon/ นี้มี Tools ที่ช่วยในการสร้าง Favicon ลองเข้าไปแล้วทำตามน่ะครับ
- เริ่มจากสร้างรูปภาพหรือนำรูปภาพที่ต้องการ (นามสกุล jpg, gif, png ) มาเตรียมไว้
- ในตำแหน่งที่ 1 ให้เลือก Browse.. รูปภาพที่ต้องการ
- ในตำแหน่งที่ 2 ใส่ข้อความที่จะให้ปรากฎสลับเปลี่ยนกับรูปภาพ เป็นแบบอนิเมชั่น
- ในตำแหน่งที่ 3 คลิ๊ก Checkbox กรณีที่ต้องการสร้าง Favicon แบบอนิเมชั่น
- หลังจากนั้นให้คลิ๊กปุ่ม Generate FavIcon.ico จะมีตัวอย่างให้ดูในแล้วเราสามารถ Download Favicon มาเก็บไว้ที่เครื่องได้ครับ
- เมื่อได้ไฟล์ favicon.ico มาเรียบร้อยแล้วให้ทำการอัปโหลดไปยังเว็บไซต์ของคุณ โดยให้อยู่ในตำแหน่ง Root ซึ่งโดยส่วนใหญ่จะเป็นตำแหน่งที่เก็บไฟล์หน้าแรกของคุณนั่นเอง
- ต่อมาให้เปิดไฟล์หน้าแรกของเว็บไซต์คุณขึ้นมา เพิ่ม Tag นี้เข้าไปในส่วนของ Html Tag <head>
<link rel="shortcut icon" href="favicon.ico" >
อย่าลืมปิด Tag น่ะครับถ้าใช้รูปแบบ xhtml
<link rel="shortcut icon" href="favicon.ico" /> - อัปโหลดไฟล์นี้ขึ้น server แล้วดูผลลัพธ์เลยครับ