ImageConver · Day 18 · Platform icon guide

PWA Icon Sizes Guide

Project context

Priority

Choose the project context and priority to receive a focused starting workflow.

Jawaban langsung

Apa yang dihasilkan halaman ini dan di mana tempatnya

Plan PWA icons by separating general-purpose, maskable, monochrome, shortcut, and platform-specific artwork. A dependable baseline includes correctly declared 192×192 and 512×512 PNG icons, while installation quality depends on manifest paths, purpose values, safe zones, HTTPS delivery, and browser testing. This guide addresses web app manifest imagery. It does not make a site installable by itself, generate service workers, configure iOS touch icons automatically, guarantee app-store acceptance, or predict every browser and operating-system presentation.

Icon work is a delivery system, not a single resize. A platform may use the same identity in a store, launcher, notification, settings screen, browser tab, installed web app, shortcut, or operating-system search result. Each context can apply a different mask, density, cache, compositing rule, or validation step. The recommended icon system should therefore be treated as a tested derivative of an editable brand master.

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
Inventory installation targets and decide which icon purposes and shortcuts are actually needed.
2
Pilih pengaturan
Create separate full-bleed general and maskable artwork from an editable master.
3
Hasilkan aset
Declare source paths, exact sizes, MIME types, and purpose values in the manifest.
4
Validasi pengiriman
Run browser audits, inspect network delivery, install the PWA, and review real device surfaces.

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

Installability criteria and icon handling vary among browser engines and operating systems.
An icon file can be valid while its manifest URL, MIME type, or cache behavior is wrong.
Maskable safe-zone compliance does not guarantee strong visual design.
Apple touch icons and other platform-specific resources may still be needed outside the manifest.

Kasus penggunaan

Dimana halaman ini cocok untuk produksi

Pengiriman produk

Plan a new PWA icon package.

Pekerjaan kompatibilitas

Fix missing or blurry installed-app artwork.

Tinjauan kualitas

Add maskable imagery without breaking ordinary icons.

Serah terima pengembang

Audit manifest paths and purpose declarations before launch.

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.

Decision framework

Build the icon set from requirements, not habit

Write down the supported operating systems, browser engines, application targets, project tooling, and distribution channels before selecting files. A list copied from an old blog can be internally consistent yet wrong for a current project. Official platform documentation and the project’s own build warnings are the controlling evidence.

Separate master artwork from delivery derivatives. The master remains editable and high resolution; platform files are reproducible outputs. Keep appearance variants and semantic layers distinct when the platform expects them. Do not ask a resize operation to invent foreground, background, monochrome, dark, or tinted design intent.

Use the table as a starting inventory, then remove assets the project genuinely does not consume and add only requirements supported by official documentation or validated target behavior. Every retained asset needs an owner, source, generation method, configuration reference, and test surface.

Run a release audit after integration. Confirm each generated file is present in the built package or deployed location, referenced by the correct metadata, served with the expected MIME type, and visible after a clean installation. Capture screenshots or build evidence for the supported target matrix.

Recheck guidance when platform tooling changes. Icon pipelines are unusually sensitive to new masks, appearance systems, asset-catalog formats, installation criteria, and store validation. Record the review date and do not present historical dimensions as timeless requirements.

Purpose	Starting assets	Validation
General install	192×192 and 512×512 PNG, purpose any	Manifest fetch and install audit
Maskable	Full-bleed PNG with essential content inside 40% radius safe zone	DevTools safe-area preview and real devices
Shortcuts	Context-specific icons declared on shortcut items	Installed shortcut surfaces
Apple Home Screen	Separate apple-touch-icon resources	Safari and physical devices

Production checklist

Document the asset inventory and test matrix

Create an inventory before implementation. For each asset, record its platform context, logical purpose, pixel or point dimensions, scale factor, filename, source-art revision, background and alpha policy, configuration reference, and the application or browser that consumes it. This prevents two files with similar dimensions from being treated as interchangeable when their semantics differ.

Define a representative test matrix rather than checking only the developer’s primary device. Include the minimum and maximum supported operating-system versions, relevant density classes, at least one light and dark environment, required appearance or theme variants, and the installation or distribution channel. For web applications, include a clean browser profile and a reinstall after cache changes. For native applications, include a release-style build rather than only an editor preview.

Review small contexts independently. Open exported pixels at 100% scale, place them beside typical neighboring icons, and check silhouette, contrast, edge clarity, and recognition without relying on the app name. Record defects against the editable master so the next iteration changes the design source rather than painting corrections into generated derivatives.

Keep generation reproducible. Save the approved master, generator version or script, settings, official references, review date, and validation evidence together. Checksums can identify the exact files reviewed. If a platform rejects or transforms an asset, preserve the rejection message and resulting presentation because that evidence is more useful than guessing from a generic size list.

Plan maintenance ownership. Someone must recheck platform documentation, build warnings, installation behavior, and store validation when supported targets or tooling change. Retire obsolete files only after proving they are no longer referenced by source code, manifests, asset catalogs, deployment templates, cached application data, or release automation.

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 Sizes Guide FAQ

What is the minimum practical PWA icon set?

For Chromium installation, provide at least 192×192 and 512×512 raster icons and declare them correctly in the manifest.

What does purpose any mean?

It marks an icon for general presentation. It is the default purpose when no purpose is specified.

What does purpose maskable mean?

It tells the user agent that edge content can be cropped by a platform mask while essential content remains in the safe zone.

Should normal and maskable icons be separate?

Usually. Separate artwork lets the normal icon retain intentional whitespace while the maskable icon uses a full-bleed background.

Do I need a 1024×1024 icon?

It can improve high-resolution and platform-specific workflows, but Chromium guidance specifically calls for at least 192 and 512 pixels.

Can I use sizes any for SVG?

Manifest syntax supports scalable resources, but use raster fallbacks because implementation and installation behavior vary.

Why does the installed icon not update?

Browsers and operating systems cache manifest resources aggressively. Verify URLs, cache headers, manifest fetches, and reinstall behavior during testing.

Referensi utama

Dokumentasi platform saat ini

Terakhir ditinjau: 20 Oktober 2026. Persyaratan platform dan perubahan alat; memverifikasi aset penting rilis terhadap dokumentasi utama saat ini.