แปลงรูปภาพเป็น Favicon
เปลี่ยนรูปถ่ายหรือโลโก้ให้เป็นชุด favicon ครบชุด — favicon.ico, apple-touch-icon และ PNG สำหรับเว็บแอป — ได้ในเบราว์เซอร์ของคุณ โดยไม่มีอะไรถูกอัปโหลด
ความเป็นส่วนตัวมาก่อน: ทุกภาพถูกประมวลผลภายในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลด จัดเก็บ หรือส่งไปยังเซิร์ฟเวอร์ใดๆ
จากรูปเดียวสู่ชุดเต็ม
วางรูปใดก็ได้ลงไปแล้วรับไอคอนทุกตัวที่เว็บต้องการกลับมา: favicon.ico หลายขนาดสำหรับแท็บ, apple-touch-icon ขนาด 180px สำหรับ iOS, PNG ขนาด 192 และ 512px สำหรับ Android และ PWA, web manifest และ HTML ที่ใช้เชื่อมทั้งหมดเข้าด้วยกัน รูปที่ไม่เป็นจัตุรัสจะถูกครอปจากกึ่งกลางให้พอดี และตัวควบคุมรูปทรง ระยะขอบ และพื้นหลัง ช่วยให้คุณจัดเฟรมผลลัพธ์ได้
เป็นส่วนตัวโดยการออกแบบ
เว็บทำ favicon ส่วนใหญ่จะอัปโหลดอาร์ตของคุณก่อนถึงจะคืนอะไรกลับมา แต่ที่นี่ชุดทั้งหมดถูกสร้างบนอุปกรณ์ของคุณด้วย Canvas API โลโก้ของคุณจึงไม่เคยถูกส่ง จัดเก็บ หรือบันทึกไว้ มันเกิดขึ้นทันที ทำงานแบบออฟไลน์ได้เมื่อโหลดแล้ว และสิ่งที่คุณดาวน์โหลดคือสิ่งที่เบราว์เซอร์ของคุณสร้างขึ้นเป๊ะ ๆ
คำถามที่พบบ่อย
- ภาพของฉันถูกอัปโหลดเพื่อสร้าง favicon หรือไม่?
- ไม่ ทั้ง favicon.ico ไอคอน PNG และไฟล์ manifest ถูกสร้างขึ้นภายในเบราว์เซอร์ของคุณด้วย Canvas API ภาพของคุณไม่เคยออกจากอุปกรณ์
- ฉันจะได้ขนาดและไฟล์อะไรบ้าง?
- favicon.ico หลายความละเอียด (16, 32 และ 48px), ไอคอน PNG ขนาด 16, 32, 48, 180 (apple-touch-icon), 192 และ 512px, ไฟล์ site.webmanifest และสตริป HTML สำหรับวางลงใน <head> ของคุณ
- ฉันแปลง PNG หรือ SVG เป็น ICO ได้หรือไม่?
- ได้ ลากไฟล์ PNG, JPG, SVG หรือ WebP เข้ามาแล้วดาวน์โหลด favicon.ico ของจริง โลโก้ SVG จะถูกแปลงเป็นภาพแรสเตอร์ภายในเครื่องที่ความละเอียดสูงก่อน
- ภาพแบบไหนได้ผลดีที่สุด?
- ภาพสี่เหลี่ยมจัตุรัสที่มีโลโก้เรียบง่ายและคอนทราสต์สูง ภาพที่ไม่เป็นสี่เหลี่ยมจัตุรัสจะถูกครอบตัดจากกึ่งกลางให้พอดี ใช้ตัวควบคุมระยะขอบในและรูปทรงเพื่อจัดกรอบตามที่คุณต้องการ
- ฉันติดตั้ง favicon อย่างไร?
- แตกไฟล์แพ็กเกจลงในโฟลเดอร์รากของเว็บไซต์ แล้ววางสตริป HTML ที่ให้มาไว้ใน <head> ของหน้าเว็บ เบราว์เซอร์ส่วนใหญ่จะรับ favicon.ico ไปใช้โดยอัตโนมัติ