ตัวสร้างไอคอน PWA
สร้างไอคอนที่เว็บแอปแบบติดตั้งได้ต้องมี — PNG ขนาด 192 และ 512px พร้อม site.webmanifest — จากรูปเดียว ทั้งหมดในเบราว์เซอร์ของคุณ
ความเป็นส่วนตัวมาก่อน: ทุกภาพถูกประมวลผลภายในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลด จัดเก็บ หรือส่งไปยังเซิร์ฟเวอร์ใดๆ
ไอคอนที่ทำให้แอปติดตั้งได้
โปรเกรสซีฟเว็บแอปจะถูกตัดสินว่าติดตั้งได้หรือไม่ ส่วนหนึ่งจากไอคอนของมัน เบราว์เซอร์จะมองหา web manifest ที่ประกาศ PNG ขนาดอย่างน้อย 192×192 และ 512×512 ก่อนที่จะเสนอให้ติดตั้งหรือวางไอคอนที่ดูดีบนหน้าจอโฮม ตัวสร้างนี้เรนเดอร์ทั้งสองขนาดจากรูปต้นฉบับของคุณ และเขียน site.webmanifest ที่อ้างอิงถึงมัน พร้อมด้วย apple-touch-icon ที่ iOS ต้องการ และ favicon.ico สำหรับแท็บทั่วไป
จัดรูปทรงให้เข้ากับตัวเรียกใช้แอป
ตัวเรียกใช้แอปบน Android อาจมาสก์ไอคอนให้เป็นวงกลมหรือจัตุรัสมุมมน อาร์ตที่ชนขอบจึงอาจถูกตัดออกได้ เพิ่มระยะขอบและพื้นหลังทึบที่นี่ แล้วส่วนสำคัญจะยังอยู่ในพื้นที่ปลอดภัยไม่ว่าจะโดนมาสก์แบบไหน พรีวิวสดแสดงผลลัพธ์ที่แต่ละขนาด ทุกอย่างเรนเดอร์บนอุปกรณ์ของคุณด้วย Canvas API — โลโก้ของคุณไม่เคยถูกอัปโหลด — และชุดทั้งหมดดาวน์โหลดมาเป็นไฟล์ zip
คำถามที่พบบ่อย
- ภาพของฉันถูกอัปโหลดเพื่อสร้าง 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 ไปใช้โดยอัตโนมัติ