แนวทางเพื่อเพิ่มไอคอนเว็บไซต์ใน HTML

เรียนรู้ว่าจะเพิ่มไอคอนเว็บไซต์ (Favicon) ใน HTML

แนวทางเพื่อเพิ่มไอคอนเว็บไซต์ใน HTML

ไอคอนเว็บไซต์ (favicon) คือรูปภาพเล็กที่แสดงขึ้นในแทบบับของเบราเซอร์ของหน้าเว็บ

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

คำแนะนำ：ไอคอนเว็บไซต์เป็นรูปภาพเล็ก ดังนั้นมันควรเป็นรูปภาพที่มีความเปรียบเทียบสีสดใสและง่ายขนาด

ไอคอนเว็บไซต์แสดงขึ้นที่ด้านซ้ายของชื่อหน้าเว็บในแทบบับของเบราเซอร์ อย่างเช่นนี้：

ตัวอย่างสัญลักษณ์เว็บไซต์

เพื่อเพิ่มไอคอนเว็บไซต์ของคุณ เอาไอคอนรูปภาพของคุณไว้ในไดเรกทอรีรίζซ์ของเว็บเซิร์ฟเวอร์ของคุณ หรือสร้างไดเรกทอรีชื่อ images ในรίζซ์และเอาไอคอนรูปภาพของคุณไว้ในไดเรกทอรีนี้ ชื่อไอคอนรูปภาพที่ตามปกติใช้คือ "favicon.ico"。

ต่อไป ในไฟล์ "index.html" ของคุณ <title> เพิ่มอันใหม่ <link> อย่างเช่นต่อไปนี้：

<!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" และโหลดมันอีกครั้งในเบราเซอร์ของคุณ แทบบับที่ของเบราเซอร์ของคุณควรจะแสดงภาพไอคอนของเว็บไซต์ของคุณที่ด้านซ้ายของชื่อหน้าเว็บ