พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน Favicon

Favicon (ย่อมาจาก “favorite icon”) คือไอคอนขนาดเล็กที่แสดงบนแท็บของเบราว์เซอร์ โดยปกติจะแสดงโลโก้หรือภาพสัญลักษณ์ที่สื่อถึงเว็บไซต์นั้นๆ ในการใช้งาน HTML5 การเพิ่ม Favicon ให้กับเว็บไซต์เป็นเรื่องที่ง่ายและสามารถทำได้หลายวิธี

วิธีการใช้งาน Favicon ใน HTML5

การใช้งานรูปแบบพื้นฐาน

วิธีที่ง่ายที่สุดในการเพิ่ม Favicon คือการใช้แท็ก <link> ในส่วน <head> ของไฟล์ HTML ดังนี้

HTML
<head>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
  • href: ระบุไฟล์ไอคอนที่คุณต้องการใช้ (เช่น favicon.ico)
  • type: ระบุชนิดของไฟล์ไอคอน (ในที่นี้คือ image/x-icon)

รองรับไฟล์ที่มีหลายขนาดและหลายรูปแบบ

ปัจจุบัน Favicon ไม่จำกัดเฉพาะไฟล์ .ico เท่านั้น เราสามารถใช้ไฟล์ PNG หรือ SVG ที่เป็นฟอร์แมตที่คมชัดกว่าได้ โดยอาจรองรับหลายขนาดสำหรับอุปกรณ์ที่แตกต่างกัน

ตัวอย่างการใช้งาน

HTML
<head>
    <link rel="icon" href="favicon-16x16.png" sizes="16x16" type="image/png">
    <link rel="icon" href="favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="favicon-64x64.png" sizes="64x64" type="image/png">
</head>
  • sizes: ระบุขนาดของไฟล์ไอคอน เช่น 16×16, 32×32, หรือ 64×64 พิกเซล

การใช้ Favicon สำหรับอุปกรณ์ Apple (iPhone, iPad, macOS)

สำหรับอุปกรณ์ของ Apple เราสามารถกำหนดไอคอนเฉพาะด้วยแท็ก apple-touch-icon

HTML
<head>
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
</head>

ขนาดมาตรฐานที่แนะนำคือ 180×180 พิกเซล ซึ่งจะปรากฏบนหน้าจอหลักของ iPhone หรือ iPad เมื่อผู้ใช้บันทึกเว็บไซต์ไว้

การใช้งาน Favicon แบบหลายขนาด (สำหรับหลายอุปกรณ์)

บางครั้งเราอาจต้องการใช้ไอคอนที่รองรับหลายขนาดและหลายอุปกรณ์ในไฟล์เดียว โดยใช้รูปแบบ .ico ที่มีหลายขนาดในไฟล์เดียวกัน

HTML
<head>
    <link rel="icon" href="favicon.ico" sizes="16x16 32x32 64x64" type="image/x-icon">
</head>

เบราว์เซอร์จะเลือกขนาดที่เหมาะสมที่สุดตามอุปกรณ์ของผู้ใช้งาน

การใช้ Favicon แบบ SVG

หากต้องการใช้ภาพเวกเตอร์ที่สามารถปรับขนาดได้แบบไม่เสียความละเอียด เราสามารถใช้ไฟล์ SVG เป็น Favicon

HTML
<head>
    <link rel="icon" href="favicon.svg" type="image/svg+xml">
</head>

SVG เป็นฟอร์แมตที่เหมาะกับอุปกรณ์ที่มีหน้าจอความละเอียดสูง (HiDPI) เนื่องจากขนาดของไฟล์สามารถปรับได้โดยไม่สูญเสียคุณภาพ

สรุป

การใช้งาน Favicon ใน HTML5 นั้นสามารถทำได้หลากหลายวิธีและสามารถปรับใช้ตามความต้องการของเว็บไซต์ ไม่ว่าจะเป็นการใช้ไฟล์ .ico, .png, หรือ .svg รวมไปถึงการรองรับอุปกรณ์ที่หลากหลายเช่น Apple ซึ่งเป็นอีกหนึ่งปัจจัยที่ช่วยทำให้เว็บไซต์มีความเป็นเอกลักษณ์และสามารถจำได้ง่ายมากขึ้น

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ