วิธีเตรียม Favicon สำหรับปี 2025

 (evilmartians.com)
50 คะแนน โดย xguru 2025-02-13 | 4 ความคิดเห็น | แชร์ทาง WhatsApp
  • เมื่อวิธีสร้าง favicon ซับซ้อนขึ้น จึงมักเกิดสถานการณ์ที่ต้องใช้ไฟล์ PNG มากกว่า 20 ไฟล์ เพียงเพื่อแสดงโลโก้เว็บไซต์บนแท็บเบราว์เซอร์หรือหน้าจอสัมผัส
  • เพื่อทดแทนแนวทางนั้น จึงมีการเสนอวิธีที่ใช้ไฟล์ไอคอนจำนวนน้อยกว่าและตั้งค่าน้อยที่สุด แต่ยังครอบคลุมสภาพแวดล้อมส่วนใหญ่ได้

เวอร์ชันที่เรียบง่ายมาก

  • หากไม่ต้องการตั้งค่าซับซ้อน แค่มีไอคอนหลัก 5 รายการและไฟล์ JSON 1 ไฟล์ก็เพียงพอ

  • ตัวอย่างลิงก์พื้นฐานที่ใส่ใน HTML

    <link rel="icon" href="/favicon.ico" sizes="32x32">  
<link rel="icon" href="/icon.svg" type="image/svg+xml">  
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->

  • หากรองรับ PWA (Progressive Web App) ให้เพิ่มรายการต่อไปนี้ด้วย

    <link rel="manifest" href="/manifest.webmanifest">

  • ตัวอย่างโครงสร้างไฟล์ manifest.webmanifest

    {  
  "icons": [  
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },  
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },  
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }  
  ]  
}

  • สำหรับไอคอนแบบ maskable ขอบบางส่วนอาจถูกตัดได้ จึงควรกำหนดพื้นที่วงกลม 409×409 เป็น safe zone

  • แค่จัดองค์ประกอบตามนี้ favicon ก็จะทำงานได้ดีบนเบราว์เซอร์และอุปกรณ์หลักส่วนใหญ่

เวอร์ชันอธิบายแบบละเอียด

  • favicon มาจากคำว่า “favorite icon” เป็นไอคอนขนาดเล็กที่แสดงบนแท็บเบราว์เซอร์และจุดอื่น ๆ
  • ช่วงหลัง Safari ก็รองรับ favicon ได้อย่างเหมาะสมแล้วเช่นกัน
  • แทนที่จะสร้างชุดไอคอนหลายความละเอียด สามารถใช้ SVG, ไอคอน PNG ไม่กี่ไฟล์ และ manifest แบบเรียบง่ายเพื่อจัดการได้อย่างมีประสิทธิภาพ

ชุด Favicon แบบสมบูรณ์ที่สุด

  • ด้วยไฟล์ SVG 1 ไฟล์ ไฟล์ PNG ขั้นต่ำไม่กี่ไฟล์ และไฟล์ web manifest ก็สามารถแสดงไอคอนได้อย่างสม่ำเสมอบนเบราว์เซอร์และอุปกรณ์หลากหลายประเภท
  • SVG เป็นฟอร์แมตเวกเตอร์ จึงย่อขยายได้อย่างอิสระตามต้องการ และมีภาระด้านประสิทธิภาพต่ำเพราะดาวน์โหลดในพื้นหลัง
  • สำหรับ PNG ให้เตรียมเฉพาะขนาดที่จำเป็นจริง เช่น ไอคอนสำหรับ Apple (apple-touch-icon) และไอคอนสำหรับ PWA
  • ฟอร์แมตเก่าอย่างไอคอนไทล์ของ Windows, Safari Pinned Icon, rel=“shortcut” เป็นต้น แทบไม่จำเป็นมากแล้วในเบราว์เซอร์ยุคปัจจุบัน
  • ในเบราว์เซอร์หรือเครื่องมือรุ่นเก่าบางตัว อาจดึงไอคอนจากพาธ /favicon.ico โดยตรง ดังนั้น favicon.ico ที่อยู่ใน root path จึงยังคงสำคัญ

วิธีสร้าง Ultimate Favicon Set

  • ขั้นตอนด้านล่างเป็นกระบวนการสร้างและปรับแต่งไอคอนด้วยตนเอง
  • ขั้นตอนที่ 1: เตรียม SVG
    • ต้องมีไฟล์ icon.svg ที่รักษาอัตราส่วนแบบสี่เหลี่ยมจัตุรัส
    • ภายใน <svg> สามารถใช้ CSS media query เพื่อสลับสีให้รองรับโหมดสว่างและโหมดมืดได้
    • ตามตัวอย่าง สามารถใช้ @media (prefers-color-scheme: dark) เพื่อกำหนดสีสำหรับโหมดมืดได้
  • ขั้นตอนที่ 2: สร้างไฟล์ ICO
    • แปลง icon.svg เป็นภาพแรสเตอร์ขนาด 16×16 หรือ 32×32 เพื่อสร้าง favicon.ico
    • ใช้เครื่องมืออย่าง GIMP หรือ Inkscape+ImageMagick ได้
    • ควรระวังไม่ให้โลโก้เบลอหรือจับกันจนเกินไปเมื่ออยู่ในความละเอียดต่ำ
  • ขั้นตอนที่ 3: สร้างภาพ PNG
    • เตรียมไอคอน PNG ขนาด 512×512, 192×192, 180×180 และ 512×512 (maskable)
    • สำหรับ apple-touch-icon ของ iOS ควรทำที่ขนาด 180×180 และอาจใส่สีพื้นหลังหรือเว้นระยะขอบที่เหมาะสม
    • ไอคอนแบบ maskable ต้องกำหนดพื้นที่ 409×409 เป็น safe zone
  • ขั้นตอนที่ 4: ปรับแต่ง PNG และ SVG ให้เหมาะสม
    • SVG สามารถบีบอัดด้วย SVGO และ PNG สามารถเพิ่มอัตราการบีบอัดด้วย Squoosh
    • ผู้ใช้อาจอยู่ในสภาพแวดล้อมที่มีข้อจำกัดด้านข้อมูล ดังนั้นการลดขนาดไฟล์ให้เล็กที่สุดจึงเป็นประโยชน์
  • ขั้นตอนที่ 5: เชื่อมโยงไอคอนใน HTML
    • โดยพื้นฐานแล้วให้เชื่อม favicon.ico, icon.svg และ apple-touch-icon.png ไว้ในแท็ก <head> 
      <link rel="icon" href="/favicon.ico" sizes="32x32">  
<link rel="icon" href="/icon.svg" type="image/svg+xml">  
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
    • หากใช้ Webpack เป็นต้น ก็อาจจัดการแคชโดยใส่แฮชตอน build ได้
    • อาจใช้ favicon คนละชุดเพื่อแยกสภาพแวดล้อม staging (พัฒนา) และ production ออกจากกันได้
  • ขั้นตอนที่ 6: สร้าง Web Manifest
    • ใส่ข้อมูลไอคอนสำหรับ PWA ลงในไฟล์ manifest.webmanifest แล้วเชื่อมด้วย <link rel="manifest" href="/manifest.webmanifest">
    • ตัวอย่างด้านล่างกำหนดไอคอน 192×192, 512×512 (maskable) และ 512×512 
      {  
  "name": "My website",  
  "icons": [  
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },  
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },  
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }  
  ]  
}
    • ในสภาพแวดล้อม Webpack สามารถใช้ปลั๊กอินอย่าง webpack-pwa-manifest เพื่อทำให้เป็นอัตโนมัติได้
  • เมื่อผ่านกระบวนการตามนี้ ก็สามารถแสดง favicon ที่เหมาะสมได้บนเบราว์เซอร์และอุปกรณ์ส่วนใหญ่ด้วยไฟล์เพียงไม่กี่รายการ
  • หากทำเครื่องมืออัตโนมัติไว้ใช้งานก็จะสะดวกยิ่งขึ้น

บทความที่เกี่ยวข้อง

4 ความคิดเห็น

 
carnoxen 2025-02-15

SVG Favicon ยังไม่รองรับบน Firefox...
 
carnoxen 2025-02-15

อ้อ เป็น Safari นี่เอง
 
yeppyshiba 2025-02-13

เคยทำเว็บเกมเป็นโปรเจกต์ที่บริษัทเก่า
พอว่างเลยลองทำ favicon แบบแอนิเมชันเป็น easter egg
พอทำแอนิเมชันด้วย sprite sheet แล้วมันออกมาดูดีใช้ได้เลย
 
xguru 2025-02-13

สรุป Favicon สำหรับปี 2021
เคยโพสต์ไว้ครั้งหนึ่งเมื่อ 4 ปีก่อน และตอนนี้ได้อัปเดตให้เข้ากับยุคปัจจุบันแล้ว