HTML Favicon
favicon คือรูปภาพขนาดเล็กที่แสดงถัดจากชื่อหน้าในแท็บเบราว์เซอร์
วิธีเพิ่ม Favicon ใน HTML
คุณสามารถใช้รูปภาพใดก็ได้ที่คุณชอบเป็นไอคอน Fav คุณยังสามารถสร้าง favicon ของคุณเองบนเว็บไซต์เช่นhttps://favicon.cc
เคล็ดลับ: favicon เป็นรูปภาพขนาดเล็ก จึงควรเป็นรูปภาพธรรมดาที่มีคอนทราสต์สูง
รูปภาพ favicon จะแสดงที่ด้านซ้ายของชื่อหน้าในแท็บเบราว์เซอร์ ดังนี้:
ในการเพิ่ม favicon ลงในเว็บไซต์ของคุณ ให้บันทึกภาพ favicon ของคุณไปที่ไดเร็กทอรี root ของเว็บเซิร์ฟเวอร์ของคุณ หรือสร้างโฟลเดอร์ในไดเร็กทอรีรากที่เรียกว่า images และบันทึกภาพ favicon ของคุณในโฟลเดอร์นี้ ชื่อสามัญของรูปภาพ 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
แท็กลิงก์ HTML
Tag | Description |
---|---|
<link> | Defines the relationship between a document and an external resource |
สำหรับรายการแท็ก HTML ทั้งหมดที่มีอยู่ โปรดไปที่การอ้างอิงแท็ก HTMLของ เรา