เครื่องมือสร้าง Favicon
อัปโหลดรูปภาพหรือโลโก้เพื่อสร้างขนาด favicon PNG, favicon.ico และตัวเลือก Apple Touch Icon
แนวคิด
Favicon คือสัญลักษณ์อัตลักษณ์ของหน้าเว็บในแท็บ เบราว์เซอร์, Bookmark, และหน้า Home ของ PWA
การสร้าง favicon ไม่ได้เป็นแค่ตัวอย่างรูปภาพ แต่ต้องเชื่อมตั้งค่า tab, bookmark และหน้า home ของอุปกรณ์ให้ทำงานครบถ้วน
แท็บเบราว์เซอร์มักใช้ขนาด 16-48px, ส่วน bookmark และ PWA มักต้องการ PNG ขนาด 180/192/512px ร่วมด้วย
ตรวจสอบความคมชัดด้วยพื้นหลังโปร่งใส และความชัดในโหมดมืด ก่อนทดสอบใน tab, bookmark และมุมมองติดตั้งจริง
ใช้ที่ไหน
เหมาะกับการเตรียม favicon.ico, manifest และชุด link rel icon/apple-touch-icon สำหรับ tab, bookmark และหน้า home ของ PWA
ขนาดที่แนะนำ
ควรมี PNG 16/32/48/180/192/512px, favicon.ico และอาจเพิ่ม SVG เพื่อความเข้ากันได้บนเว็บและมือถือ
ตรวจสอบก่อนปล่อย
เช็กพื้นหลังโปร่งใส contrast ในโหมดมืด ค่า href ที่รวม base path และการแสดงผลจริงใน tab/bookmark
วัตถุประสงค์ไม่ใช่แค่ดูตัวอย่างไอคอนเท่านั้น ต้องยืนยันการตั้งค่า manifest และการเชื่อมโยงใน HTML ทำงานใน UI จริงของเบราว์เซอร์ด้วย
เครื่องมือสร้าง Favicon พื้นที่ทำงานสร้าง favicon
วิธีใช้
- 1 เลือกรูปภาพหรือลากวางรูปที่ใกล้เคียงสี่เหลี่ยมจัตุรัส
- 2 คลิกสร้างเพื่อสร้าง favicon PNG หลายขนาดและ favicon.ico
- 3 ดาวน์โหลดไฟล์ทีละรายการหรือเป็น ZIP แล้วตรวจสอบพาธสัมพัทธ์หรือ base path ในโค้ดลิงก์ HTML สำหรับการ deploy
กรณีใช้งานทั่วไป
- สร้างไฟล์ favicon PNG/ICO
- ทำ favicon จากรูปโลโก้
- สร้างตัวเลือก Apple Touch Icon
- เตรียมโค้ดลิงก์ HTML สำหรับ favicon
คำถามที่พบบ่อย
เครื่องมือนี้สร้างไฟล์ ICO ด้วยหรือไม่?
ใช่ V2 สร้างขนาด favicon PNG, favicon.ico และโค้ดลิงก์ HTML พร้อมดาวน์โหลดทั้งชุดเป็น ZIP ตัวอย่าง HTML ใช้พาธสัมพัทธ์เป็นค่าเริ่มต้น ดังนั้นหาก deploy ใต้ subpath ให้เพิ่ม base path ก่อนแต่ละ href การสร้างในเบราว์เซอร์เป็นค่าเริ่มต้น ส่วนโหมดปรับแต่งบนเซิร์ฟเวอร์ใช้การปรับขนาดด้วย Cloud Run