nicetool.dev logo

เครื่องมือสร้าง PWA Assets - สร้างไอคอนและ Manifest แอป

สร้างไอคอน PWA และ manifest ในเบราว์เซอร์ของคุณ รูปภาพของคุณจะไม่ออกจากอุปกรณ์

อัปโหลดรูปภาพ

ลากและวางรูปภาพที่นี่หรือคลิกเพื่อเลือกไฟล์

รองรับ PNG/JPEG ขนาดขั้นต่ำ 512x512px

การกำหนดค่า Manifest

ตัวอย่างไอคอน

192x192

192x192px

Android / Chrome

512x512

512x512px

หน้าเริ่มต้น (Splash Screen)

180x180

180x180px

หน้าจอหลัก iOS

512x512

512x512px

Maskable (ปรับเปลี่ยนได้)

ตัวอย่าง Manifest

ลิงก์ HTML สำหรับ Head
💡 การประมวลผลทั้งหมดจะทำที่ฝั่งไคลเอ็นต์เพื่อให้มั่นใจในความเป็นส่วนตัวและความเร็ว
PWA Asset Generator คืออะไร?
PWA Asset Generator เป็นเครื่องมือฟรีที่ช่วยให้คุณสร้าง assets ทั้งหมดที่จำเป็นสำหรับ Progressive Web Apps (PWA) จากภาพต้นฉบับเพียงภาพเดียว เครื่องมือจะสร้าง favicon.ico, apple-touch-icon, ไอคอนในขนาดต่างๆ (16x16, 32x32, 192x192, 512x512...) และไฟล์ manifest.json ที่สมบูรณ์โดยอัตโนมัติ การประมวลผลทั้งหมดเกิดขึ้นที่ฝั่งไคลเอนต์ เพื่อให้มั่นใจในความเร็วและความปลอดภัยสูงสุดสำหรับรูปภาพของคุณ
ขนาดไอคอน PWA มาตรฐาน
เครื่องมือจะสร้างไอคอนโดยอัตโนมัติตามมาตรฐาน PWA และ Apple รวมถึง:
Favicon
favicon.ico (32x32) - ไอคอนที่แสดงบนแท็บเบราว์เซอร์
มือถือและแท็บเล็ต
192x192, 384x384, 512x512 - ไอคอนสำหรับ Android และหน้าจอหลัก
Apple Touch Icon
180x180 - ไอคอนสำหรับ iOS เมื่อเพิ่มลงในหน้าจอหลัก
ขนาดต่างๆ
16x16, 32x32, 48x48, 72x72, 96x96, 120x120, 144x144, 152x152, 167x167
Manifest.json - หัวใจของ PWA
ไฟล์ manifest.json เป็นไฟล์กำหนดค่าที่สำคัญที่สุดสำหรับ PWA ซึ่งมีข้อมูลเกี่ยวกับ:
  • •ชื่อแอป (name, short_name) - แสดงเมื่อติดตั้ง
  • •ไอคอน - รายการไอคอนทั้งหมดที่มีขนาดและวัตถุประสงค์
  • •สีธีม - สีหลักสำหรับแถบแอปและแถบที่อยู่
  • •URL เริ่มต้น - URL ที่เปิดเมื่อเปิดแอปจากหน้าจอหลัก
  • •โหมดการแสดงผล - โหมดการแสดงผล (standalone, fullscreen...)
คุณสมบัติหลัก
1
อัปโหลดภาพ HD
รองรับ PNG/JPEG ขนาดขั้นต่ำ 512x512px เพื่อคุณภาพที่ดีที่สุด
2
สร้างไอคอนหลายขนาด
ปรับขนาดและสร้างไอคอนมากกว่า 13 ขนาดโดยอัตโนมัติตามแนวทางของ PWA และ Apple
3
Auto Manifest.json
สร้าง manifest.json มาตรฐานพร้อมข้อมูลเมตาครบถ้วนและการอ้างอิงไอคอน
4
Favicon.ico
สร้าง favicon.ico มาตรฐานสำหรับ SEO และการแสดงผลบนแท็บเบราว์เซอร์
5
การประมวลผลฝั่งไคลเอนต์
ประมวลผลผ่านเบราว์เซอร์ 100% รูปภาพจะไม่อัปโหลดไปยังเซิร์ฟเวอร์
6
ดาวน์โหลด ZIP
รวมไฟล์ทั้งหมดไว้ในไฟล์ .zip ที่สะดวกสบาย
การใช้งานจริง
1
การพัฒนา PWA
สร้าง assets สำหรับโปรเจ็กต์ Progressive Web App อย่างรวดเร็ว ประหยัดเวลาทำงานด้วยตนเองได้หลายชั่วโมง
2
การสร้างแบรนด์เว็บไซต์
สร้าง Favicon และ Touch Icons ระดับมืออาชีพสำหรับเว็บไซต์ เพื่อเพิ่มการจดจำแบรนด์
3
หน้า Landing Page ของแอปมือถือ
เตรียม assets สำหรับหน้าเว็บที่ติดตั้งได้ซึ่งทำงานเหมือนแอปเนทีฟบนมือถือ
ประโยชน์ด้าน SEO และ UX
✓
Favicon เพิ่ม CTR บน SERP - ผู้ใช้จดจำเว็บไซต์ของคุณได้ง่ายขึ้น
✓
PWA ปรับปรุง Core Web Vitals - อันดับ Google ดีขึ้น
✓
Apple Touch Icon - ประสบการณ์แบบเนทีฟเมื่อเพิ่มลงในหน้าจอหลัก iOS
✓
manifest.json ที่สมบูรณ์ - Google จัดทำดัชนีและเข้าใจแอปของคุณได้ดีขึ้น
หมายเหตุสำคัญ
  • •รูปภาพต้นฉบับควรมีขนาดขั้นต่ำ 512x512px แนะนำ 1024x1024px
  • •ใช้รูปภาพที่มีพื้นหลังโปร่งใส (PNG) เพื่อผลลัพธ์ที่ดีที่สุด
  • •การประมวลผลทั้งหมดเป็นแบบ local รูปภาพจะไม่อัปโหลดไปยังเซิร์ฟเวอร์
  • •ไฟล์ ZIP ประกอบด้วย: favicon.ico, ไอคอน (13 ขนาด), manifest.json
 วิธีใช้ เครื่องมือสร้าง PWA Assets
  1. 1
    อัปโหลดโลโก้ PNG หรือ JPEG ทรงสี่เหลี่ยมจัตุรัสขนาดอย่างน้อย 512 x 512 พิกเซล รูปทรงเรียบง่ายที่มีพื้นที่ว่างรอบ ๆ จะดูดีที่สุดในขนาดเล็ก
  2. 2
    กรอกข้อมูล manifest ได้แก่ ชื่อแอป ชื่อย่อ (แสดงใต้ไอคอนบนหน้าจอหลัก) คำอธิบาย URL เริ่มต้น สีธีม และสีพื้นหลัง
  3. 3
    เปิดมาสก์วงกลมหากต้องการไอคอนกลม แล้วดูตัวอย่างสำหรับ Android, iOS หน้าจอเริ่มต้น และไอคอน maskable
  4. 4
    กด Generate & Download เพื่อรับไฟล์ ZIP ที่มีไอคอนทุกขนาดและ manifest.json แล้วคัดลอกแท็ก link ของ HTML ที่แสดงด้านล่างไปใส่ใน <head> ของเว็บไซต์
 ตัวอย่างการใช้งานจริง
ทำให้เว็บไซต์ติดตั้งได้
Chrome และ Edge จะแสดง "ติดตั้งแอป" ก็ต่อเมื่อมี manifest ที่ถูกต้องพร้อมไอคอนขนาด 192 และ 512 พิกเซล ไฟล์ที่สร้างขึ้นครอบคลุมข้อกำหนดนี้
ไอคอนหน้าจอหลักบน iOS
Safari ไม่สนใจไอคอนใน manifest แต่ใช้ apple-touch-icon ไฟล์ ZIP มีไอคอน 180 x 180 พร้อมแท็ก link ที่ตรงกัน
ไอคอน maskable สำหรับ Android
Android ตัดไอคอนเป็นวงกลมหรือสี่เหลี่ยมมุมมนตามอุปกรณ์ ไอคอน maskable จะเก็บโลโก้ไว้ในพื้นที่ปลอดภัยจึงไม่ถูกตัด
เปลี่ยนแบรนด์ได้รวดเร็ว
เมื่อโลโก้เปลี่ยน แค่อัปโหลดไฟล์ใหม่ครั้งเดียวก็เปลี่ยนไอคอนได้ทั้งชุด ไม่ต้องส่งออกนับสิบขนาดจากโปรแกรมออกแบบเอง
 คำถามที่พบบ่อย
Web app manifest คืออะไร?+
manifest.json คือไฟล์ JSON ขนาดเล็กที่บอกเบราว์เซอร์ถึงชื่อ ไอคอน สี และ URL เริ่มต้นของเว็บแอป ทำให้เว็บไซต์ติดตั้งและเปิดใช้ได้เหมือนแอปเนทีฟ
ขนาดไอคอนใดที่จำเป็นจริง ๆ?+
เพื่อให้ติดตั้งได้ Chrome ต้องการไอคอนอย่างน้อย 192 x 192 และ 512 x 512 ส่วน iOS ใช้ apple-touch-icon ขนาด 180 x 180 ขนาดอื่นช่วยให้คมชัดขึ้นบน launcher บางตัวและอุปกรณ์รุ่นเก่า
theme_color กับ background_color ต่างกันอย่างไร?+
theme_color กำหนดสีแถบเครื่องมือเบราว์เซอร์และหน้าสลับแอป ส่วน background_color เป็นสีพื้นของหน้าจอเริ่มต้นขณะแอปโหลด ควรตรงกับพื้นหลังของหน้าแรก
รูปภาพของฉันถูกอัปโหลดหรือไม่?+
ไม่ การปรับขนาดและสร้าง ZIP ใช้ Canvas API ในเบราว์เซอร์ โลโก้ที่ยังไม่เปิดตัวและทรัพย์สินของแบรนด์จึงไม่ออกจากอุปกรณ์ของคุณ