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
