ตัวสร้างไอคอน 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 ไปใช้โดยอัตโนมัติ