ImageConver · Day 17 · Browser icon tool
PWA Icon Generator
Generate standard 192×192 and 512×512 PWA icon PNG files and a ready-to-review web app manifest icon list. Choose fit, padding, and background, then download a local ZIP for integration and installation testing.
Pemrosesan lokal. Gambar sumber tetap ada di tab browser ini. Simpan master yang dapat diedit dan validasi aset yang dihasilkan di alat resmi platform.
Pilih gambar untuk memulai.
Jawaban langsung
Apa yang dihasilkan halaman ini dan di mana tempatnya
Generate standard 192×192 and 512×512 PWA icon PNG files and a ready-to-review web app manifest icon list. Choose fit, padding, and background, then download a local ZIP for integration and installation testing. The package supplies general-purpose raster icons and manifest JSON. It does not create a full manifest, service worker, installability audit, maskable-specific artwork, monochrome icons, screenshots, shortcuts, or platform store assets.
Pekerjaan ikon adalah sistem pengiriman, bukan pengubahan ukuran tunggal. Suatu platform dapat menggunakan identitas yang sama di toko, peluncur, notifikasi, layar pengaturan, tab browser, aplikasi web yang diinstal, pintasan, atau hasil pencarian sistem operasi. Setiap konteks dapat menerapkan masker, kepadatan, cache, aturan pengomposisian, atau langkah validasi yang berbeda. Oleh karena itu, paket yang dihasilkan harus diperlakukan sebagai turunan teruji dari master merek yang dapat diedit.
Mulailah dengan karya seni sumber bersih. Pertahankan subjek utama tetap di tengah, hapus teks yang tidak perlu, hindari detail garis rambut, dan nilai desain berdasarkan ukuran tampilan sebenarnya terkecil. Jangan menambahkan penutup luar platform atau bayangan sistem ke sumbernya kecuali pedoman resmi saat ini secara eksplisit mengharuskan perlakuan tersebut. Pratinjau besar dapat menyembunyikan masalah yang terlihat jelas pada ukuran 16, 32, atau 48 piksel.
Dimensi file saja tidak membuktikan kebenarannya. Konfirmasikan ruang warna, perilaku alfa, jalur file, tipe MIME, metadata manifes atau katalog aset, deklarasi tujuan, penamaan, perilaku cache, dan presentasi perangkat sebenarnya. Pertahankan file sumber dan dokumentasikan pengaturan generator mana yang menghasilkan aset rilis yang ditinjau.
Alur kerja
Proses ikon empat langkah yang terkontrol
- 1
Periksa sumbernya
Upload a high-resolution square source and choose a full-bleed background.
- 2
Pilih pengaturan
Set fit and padding while checking the 192-pixel and 512-pixel previews.
- 3
Hasilkan aset
Generate icons and the manifest icon list in one ZIP.
- 4
Validasi pengiriman
Integrate with the full manifest, serve over HTTPS, and test installation on target browsers.
Kualitas visual
Kesesuaian, detail, transparansi, dan pengakuan
Pembingkaian dan bantalan
Mode Fit mengubah arti. Berisi menyimpan sumber lengkap dan dapat menambahkan latar belakang di sekitarnya; penutup memenuhi kotak dan dapat memotong tepinya. Padding berguna untuk tanda di tengah, tetapi jika terlalu banyak akan membuat ikon terlihat kecil. Bandingkan masker dan pratinjau kecil sebelum menerima nilai.
Detail berukuran kecil
Perampingan raster menghilangkan detail. Goresan tipis, penghitung kecil, tekstur fotografi, dan jenis huruf dapat kabur atau hilang. Ikon kecil terbaik sering kali berupa gambar yang disederhanakan daripada versi karya seni pemasaran yang diperkecil secara mekanis. Tinjau keluaran piksel sebenarnya pada skala 100%.
Perilaku latar belakang
Transparansi tidaklah netral. Browser, peluncur, toko, atau sistem operasi mungkin menggabungkan piksel transparan dengan warna yang tidak Anda pilih. Karya seni platform full-bleed harus menggunakan latar belakang yang disengaja dimana panduan mengharapkannya, sementara format seperti ICO mungkin sengaja mempertahankan alpha.
Kontras warna dan pengenalan penting di lingkungan terang, gelap, berwarna, dan bertema. Uji ikon di dekat ikon pesaing dan pada berbagai latar belakang. Pembuatan otomatis tidak dapat menentukan apakah suatu merek bersifat khas, dapat diakses, disahkan secara hukum, atau konsisten dengan aturan merek saat ini.
Batasan penting
Apa yang tidak dapat dijamin oleh pembuatan ikon otomatis
- Icons alone do not make a web application installable.
- General-purpose icons can appear letterboxed when a platform expects maskable artwork.
- Browser and operating-system installation behavior varies.
- The generated manifest fragment must be merged with a valid full manifest and correct deployment paths.
Kasus penggunaan
Dimana halaman ini cocok untuk produksi
Pengiriman produk
Add baseline install icons to a new progressive web app.
Pekerjaan kompatibilitas
Replace low-resolution manifest artwork.
Tinjauan kualitas
Generate consistent 192px and 512px PNG assets.
Serah terima pengembang
Prepare a small integration package for a web development team.
Pelaksanaan
Konfigurasi, caching, dan pemeriksaan rilis
Simpan file yang dihasilkan pada URL yang stabil dan sadar cache. Manifes atau deklarasi HTML yang mengarah ke file yang hilang tidak dapat diselamatkan jika PNG yang tepat ada di komputer pengembang. Verifikasi status HTTP, jenis konten, dimensi, byte file, dan perilaku asal yang sama atau lintas asal jika relevan.
Perlakukan file konfigurasi sebagai kode yang dapat ditinjau. Periksa setiap entri manifes, catatan katalog aset, nama folder, faktor skala, token tujuan, dan nama file sebelum penggabungan. Fragmen yang dihasilkan sengaja menghindari tebakan nama aplikasi, URL awal, pengidentifikasi bundel, warna tema, atau pengaturan proyek milik aplikasi sebenarnya.
Pembatalan cache memerlukan pemeriksaan rilis. Aplikasi web, browser, peluncur, sistem build, dan penyimpanan yang terinstal dapat mempertahankan sumber daya ikon lama. Gunakan jalur berversi atau kebijakan cache yang disengaja, bangun kembali aplikasi, instal ulang bila perlu, dan bedakan sumber daya lama dari sumber daya yang dibuat secara tidak benar.
Validasi geometri dan alur kerja. Geometri mencakup pemangkasan, zona aman, pemusatan, perlakuan tepi, dan kejelasan ukuran kecil. Alur kerja mencakup kontrol sumber yang benar, pengaturan berulang, konfigurasi platform, output build, penerapan, dan rollback. File yang menarik secara visual masih bisa gagal karena proyek mereferensikan nama file yang berbeda.
Pribadi
Pemrosesan lokal dan penanganan aset
Browser membaca sumber yang dipilih dengan API file lokal, menggambar turunan ke kanvas, mengkodekan data PNG, dan menyusun ZIP atau ICO yang diminta dalam memori. ImageConver tidak mengirimkan piksel sumber ke titik akhir konversi ikon dalam alur kerja ini.
Pemrosesan lokal mengurangi paparan transfer tetapi tidak membuat perangkat bersama menjadi pribadi. Unduhan browser, daftar file terbaru, folder tersinkronisasi, cadangan, ekstensi, dan pratinjau sistem operasi mungkin menyimpan salinan. Gunakan tempat kerja yang disetujui untuk merek yang belum dirilis atau karya seni produk rahasia.
URL objek yang dihasilkan bersifat sementara dan dicabut ketika diganti atau disetel ulang. Pindahkan aset yang telah ditinjau ke penyimpanan proyek terkontrol, pertahankan master yang dapat diedit, dan tutup tab setelah menangani materi sensitif.
Pertanyaan umum
PWA Icon Generator FAQ
Which PWA sizes are required?
Chromium guidance calls for at least 192×192 and 512×512 raster icons. Other sizes can improve platform-specific presentation.
Does the ZIP include a full manifest?
No. It includes the icons array fragment so you can review paths and merge it into your application manifest.
What purpose value is used?
The standard package uses purpose any. Create a separately tested maskable icon for purpose maskable.
Can I use an SVG icon?
Some browsers support SVG manifest icons, but raster PNG fallbacks remain important for broad compatibility.
Why use a solid background?
Transparent presentation may be composited differently by platforms. A deliberate full-bleed background gives predictable general-purpose artwork.
Do files leave my device?
No. All decoding, resizing, PNG encoding, JSON creation, and ZIP packaging happen in the browser.
How do I test installation?
Serve the manifest and icons from valid URLs over HTTPS, use browser developer tools, and install on representative desktop and mobile systems.
Referensi utama
Dokumentasi platform saat ini
- web.dev: Tambahkan manifes aplikasi web
- Spesifikasi Manifes Aplikasi Web W3C
- MDN: CanvasRenderingContext2D drawImage
Terakhir ditinjau: 20 Oktober 2026. Persyaratan platform dan perubahan alat; memverifikasi aset penting rilis terhadap dokumentasi utama saat ini.