Favicon คือรูปภาพขนาดเล็กที่แสดงถัดจากชื่อหน้าในแท็บเบราว์เซอร์
วิธีการเพิ่ม Favicon ใน HTML
คุณสามารถใช้รูปภาพใดก็ได้ที่คุณชอบเป็น Favicon ของคุณ คุณยังสามารถสร้าง Favicon ของคุณเองบนเว็บไซต์ เช่น https://www.favicon.cc
เคล็ดลับ: ไอคอน Favicon เป็นภาพขนาดเล็ก ดังนั้นควรเป็นภาพธรรมดาที่มีความชัดเจนไม่ซับซ้อน
รูป Favicon จะแสดงทางด้านซ้ายของชื่อหน้าในแท็บเบราว์เซอร์ แบบนี้
ในการเพิ่มไอคอน Favicon ลงในเว็บไซต์ของคุณ ให้คุณทำการบันทึกรูป Favicon ไว้ใน Root Directory ของเว็บคุณ หรือทำการสร้างโฟลเดอร์ใน 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