Favicon คืออะไร
Favicon คือรูปภาพขนาดเล็กที่แสดงอยู่ถัดจากชื่อหน้าในแท็บของเบราว์เซอร์
วิธีการเพิ่ม Favicon ใน HTML
คุณสามารถใช้รูปภาพใดก็ได้ที่ต้องการเป็น Favicon หรือสร้าง Favicon ของคุณเองได้จากเว็บไซต์ เช่น favicon.cc
เคล็ดลับ: ไอคอน Favicon เป็นภาพขนาดเล็ก ดังนั้นควรเป็นภาพธรรมดาที่มีความชัดเจนไม่ซับซ้อน
รูป Favicon จะแสดงทางด้านซ้ายของชื่อหน้าในแท็บเบราว์เซอร์ แบบนี้
ในการเพิ่มไอคอน Favicon ลงในเว็บไซต์ของคุณ ให้บันทึกรูป Favicon ไว้ใน Root Directory ของเว็บไซต์ หรือสร้างโฟลเดอร์ชื่อ image แล้วบันทึกไอคอนลงในโฟลเดอร์นั้น ชื่อไฟล์ที่นิยมใช้สำหรับ Favicon คือ favicon.ico
หลังจากนั้น ให้เพิ่มองค์ประกอบ
<link> ในไฟล์ “index.html” ของคุณ ต่อจากองค์ประกอบ <title> ดังนี้
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
จากนั้นให้บันทึกไฟล์ “index.html” และโหลดหน้าเว็บซ้ำในเบราว์เซอร์ของคุณ จากนั้น แท็บของเบราว์เซอร์ ควรจะแสดงรูปภาพ Favicon ทางด้านซ้ายของชื่อหน้าเว็บ
รองรับรูปแบบไฟล์ Favicon
ตารางต่อไปนี้แสดงรูปแบบไฟล์ที่รองรับสำหรับรูป Favicon:
| Browser | ICO | PNG | GIF | JPEG | SVG |
|---|---|---|---|---|---|
| Edge | Yes | Yes | Yes | Yes | Yes |
| Chrome | Yes | Yes | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes | Yes | Yes |
| Opera | Yes | Yes | Yes | Yes | Yes |
| Safari | Yes | Yes | Yes | Yes | Yes |
สรุป
- ใช้องค์ประกอบ HTML
<link>เพื่อแทรก Favicon