วันนี้ผมมีโอกาศได้ใส่ favicon.ico ไอคอนแสดงบนเว็บไซต์ให้กับเว็บของตัวเอง เลยคิดว่าจะเขียนบทความสำหรับ Webmaster ท่านอื่น เพื่อต้องการจะทำบ้างและยังไม่รู้จะเริ่มต้นไหน บทความนี้จะเป็นเกี่ยวกับ ผู้ทำเว็บไซต์นะครับ ว่าแล้วมาเริ่มทำความเข้าใจกันก่อนดีกว่า
favicon.ico คืออะไร
favicon.ico เป็นไอคอนแสดงตัวอย่างของเว็บหรืออาจใช้ได้กับโปรแกรม ชื่อก็ตามนั้นเลยคือไอคอนแสดง สำหรับเว็บไซต์ก็เช่นกัน อธิบายเป็นคำพูดไม่เห็นภาพเรามาดูภาพตัวอย่างด้านล่างกันครับ
สังเกตุที่ลูกศรชี้ันั้นแหละครับ favicon สำหรับเว็บไซต์
ข้อดีของ favicon.ico คืออะไร
บางครั้งหากเปิดแท็บไว้หลายๆแทบสีของ icon จะสามารถทำให้เรามองผ่านๆแล้วรู้ทันทีว่ากลังใช้งานแท็บไหนอยู่ และเป็นการสร้างแบรนด์ของตัวเองให้เป็นที่จดจำได้ง่ายขึ้น
การสร้างไฟล์ favicon.ico
การสร้างไฟล์ favicon.ico ต้องใช้โปรแกรมเฉพาะ หรืออาจทำออนไลน์ได้ผ่านเว็บไซต์ ดังต่อไปนี้
- http://tools.dynamicdrive.com/favicon/#.U0dA2lcXImI
- http://www.favicon.cc/
- http://www.favicon.co.uk/
หรือดาวน์โหลดโปรแกรมที่มีชื่อว่า Ico Converter มาใช้งาน (หาดาวน์โหลดได้ไม่ยาก)
การติดตั้ง favicon.ico ให้กับเว็บไซต์ และใน WordPress
ไฟล์ที่ได้มาจะเป็นสกุล .ico ให้ทำการเปลี่ยนชื่อเป็น favicon.ico เพื่อง่ายต่อการจดจำ (จริงๆใช้ชื่ออะไรก็ได้)
จากนั้นให้อัพไฟล์ไปไว้ยังหน้าเว็บไชต์เช่น modify.in.th/favicon.ico
ให้แก้ไขที่ Code HTML ระหว่าง <head> </head> ดังภาพด้านล่าง
<link rel=”icon” href=”https://www.modify.in.th/favicon.ico” type=”image/x-icon” />
<link rel=”shortcut icon” href=”https://www.modify.in.th/favicon.ico” type=”image/x-icon” />
เปลี่ยน URL ให้เป็นเว็บของตัวเอง ดังภาพด้านบน
หรือหากเป็น WordPress ให้เข้าไปแก้ไขไฟล์ Head.php ในส่วนของการแก้ไขธีม และทำการใส่โค้ดด้านล่างนี้
<link rel=”icon” href=”<?php bloginfo(‘siteurl’); ?>/favicon.ico” type=”image/x-icon” />
<link rel=”shortcut icon” href=”<?php bloginfo(‘siteurl’); ?>/favicon.ico” type=”image/x-icon” />
หรือจะใส่แบบด้านบนก็ได้เพราะจริงๆแล้วจะแสดงคล้ายๆกัน
เพียงเท่านี้ก็สามารถใส่ favicon.ico ให้กับเว็บไซต์ของเราแล้วครับ
Leave a Reply