บทช่วยสอนHTML

HTML หน้าแรก บทนำ HTML โปรแกรมแก้ไข HTML HTML พื้นฐาน องค์ประกอบ HTML แอตทริบิวต์ HTML ส่วนหัว HTML ย่อหน้า HTML รูปแบบ HTML การจัดรูปแบบ HTML ใบเสนอราคา HTML ความคิดเห็น HTML HTML สี HTML CSS ลิงค์ HTML รูปภาพ HTML HTML Favicon ตาราง HTML รายการ HTML บล็อก HTML & อินไลน์ คลาส HTML รหัส HTML HTML Iframes HTML JavaScript เส้นทางไฟล์ HTML หัวหน้า HTML เค้าโครง HTML HTML Responsive HTML รหัสคอมพิวเตอร์ HTML Semantics คู่มือสไตล์ HTML เอนทิตี HTML สัญลักษณ์ HTML HTML Emojis ชุดอักขระ HTML การเข้ารหัส URL HTML HTML กับ XHTML

แบบฟอร์มHTML

แบบฟอร์ม HTML คุณสมบัติแบบฟอร์ม HTML องค์ประกอบแบบฟอร์ม HTML ประเภทอินพุต HTML แอตทริบิวต์การป้อนข้อมูล HTML แอตทริบิวต์แบบฟอร์มการป้อนข้อมูล HTML

กราฟิกHTML

HTML Canvas HTML SVG

สื่อHTML

สื่อ HTML วิดีโอ HTML HTML Audio ปลั๊กอิน HTML HTML YouTube

HTML APIs

HTML Geolocation HTML ลาก/วาง HTML Web Storage HTML Web Workers HTML SSE

ตัวอย่างHTML

ตัวอย่าง HTML แบบทดสอบ HTML แบบฝึกหัด HTML ใบรับรอง HTML สรุป HTML การเข้าถึง HTML

ข้อมูลอ้างอิงHTML

รายการแท็ก HTML แอตทริบิวต์ HTML HTML Global Attributes รองรับ HTML Browser เหตุการณ์ HTML HTML สี HTML Canvas HTML เสียง/วิดีโอ HTML Doctypes ชุดอักขระ HTML การเข้ารหัส URL HTML HTML Lang Codes ข้อความ HTTP วิธี HTTP ตัวแปลง PX เป็น EM แป้นพิมพ์ลัด

HTML Favicon


favicon คือรูปภาพขนาดเล็กที่แสดงถัดจากชื่อหน้าในแท็บเบราว์เซอร์


วิธีเพิ่ม Favicon ใน HTML

คุณสามารถใช้รูปภาพใดก็ได้ที่คุณชอบเป็นไอคอน Fav คุณยังสามารถสร้าง favicon ของคุณเองบนเว็บไซต์เช่นhttps://favicon.cc

เคล็ดลับ: favicon เป็นรูปภาพขนาดเล็ก จึงควรเป็นรูปภาพธรรมดาที่มีคอนทราสต์สูง

รูปภาพ 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ของ เรา