Panduan Manifes Aplikasi Web
Manifes aplikasi web (site.webmanifest) adalah file JSON yang memberi tahu browser yang dapat diinstal nama, warna, mode tampilan, dan ukuran ikon aplikasi Anda yang akan digunakan di layar beranda. Menautkannya dengan `<link rel='manifest' href='/site.webmanifest'>` mengaktifkan perintah penginstalan Chrome dan Edge PWA di desktop dan Android. Pasangkan dengan ikon 192×192 dan 512×512 PNG — keduanya diekspor oleh favicon generator — untuk pengaturan favicon PWA yang lengkap.
Manifes aplikasi web adalah file teks JSON yang disajikan dengan tipe MIME `application/manifest+json`. Itu ada di URL mana pun yang Anda pilih, tetapi konvensinya adalah /site.webmanifest di root domain. Anda menautkannya dari HTML menggunakan `<link rel='manifest' href='/site.webmanifest'>` di dalam elemen `<head>`. Browser membaca manifes saat mengevaluasi apakah akan menampilkan perintah penginstalan atau cara merender aplikasi Anda setelah penginstalan.
Array ikon adalah bagian manifes yang paling relevan dengan favicon. Setiap entri menentukan src (URL ke gambar), ukuran (dimensi piksel), jenis (tipe MIME), dan tujuan opsional (baik 'apa pun', 'dapat ditutup', atau 'dapat ditutup'). Minimal, sediakan 192×192 PNG untuk ikon peluncur dan 512×512 PNG untuk layar splash. Tanpa ini, Chrome tidak akan menampilkan perintah instalasi.
Ikon 192×192 digunakan oleh Android Chrome di peluncur aplikasi, pengalih aplikasi terkini, dan bayangan notifikasi saat PWA Anda mengirimkan notifikasi push web. Itu harus berupa PNG, dapat diakses di URL yang dideklarasikan tanpa pengalihan, dan disajikan dengan header CORS yang tepat jika berada di domain yang berbeda dari manifes Anda. favicon generator mengekspor android-chrome-192x192.png siap digunakan langsung.
Ikon 512×512 digunakan untuk layar pembuka PWA yang ditampilkan saat aplikasi dimuat setelah peluncuran layar beranda, pratinjau dialog pemasangan di Chrome dan Edge di desktop, dan peluncur aplikasi OS Chrome. Entri 512×512 yang hilang di manifes tidak memblokir instalasi tetapi menghasilkan ikon browser umum di layar splash. Selalu sertakan untuk pengalaman pemasangan yang sempurna.
Ikon yang dapat disamarkan adalah peningkatan khusus Android. Sistem ikon adaptif Android menerapkan topeng geometris (lingkaran, tupai, titik air mata, persegi panjang bulat) ke ikon aplikasi, dan bentuknya bervariasi menurut produsen perangkat. Ikon standar 'apa pun' mungkin tepinya terpotong oleh topeng ini. Ikon 'maskable' mencakup bantalan zona aman — pertahankan karya seni penting di 80% tengah gambar (lingkaran zona aman) — sehingga masker apa pun dapat diterapkan tanpa memotong logo.
Untuk mendeklarasikan ikon yang dapat disamarkan dalam manifes, tambahkan entri kedua dengan ukuran yang sama dengan `'purpose': 'maskable'`: `{ "src": "/android-chrome-512x512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }`. Anda juga dapat menggabungkan: `'purpose': 'any maskable'` dalam satu entri. Hasilkan ikon maskable Anda dengan padding ekstra menggunakan opsi ekspor maskable generator.
Bidang name dan short_name mengontrol bagaimana aplikasi Anda diberi label di layar beranda dan di laci aplikasi. `name` adalah nama lengkap aplikasi yang ditampilkan saat perintah instalasi. `short_name` adalah label di bawah ikon pada layar beranda — kurangi 12 karakter untuk menghindari pemotongan pada layar yang lebih kecil. Kedua bidang tersebut diperlukan agar perintah penginstalan muncul.
Bidang theme_color menyetel warna bilah alamat browser pada Android Chrome saat pengguna menavigasi ke situs Anda (bukan hanya saat PWA diinstal). Ini juga mengatur warna toolbar dalam mode PWA mandiri. Gunakan warna merek utama Anda sebagai nilai hex. Tambahkan `<meta name='theme-color' content='#YOUR_COLOR'>` yang cocok di HTML Anda untuk browser yang tidak membaca theme_color.
Bidang background_color mengontrol warna latar belakang layar pembuka yang ditampilkan antara peluncuran PWA dan tampilan pertama konten aplikasi Anda. Atur agar sesuai dengan latar belakang aplikasi Anda (biasanya putih atau warna merek utama) untuk mencegah kilatan cahaya yang mencolok. Jika background_color tidak cocok dengan latar belakang aplikasi Anda yang sebenarnya, pengguna akan melihat lompatan warna saat startup.
Bidang tampilan menentukan bagaimana PWA muncul setelah instalasi. `standalone` menyembunyikan bilah alamat browser dan tombol navigasi, membuat aplikasi terlihat seperti aplikasi asli. `minimal-ui` mempertahankan bilah navigasi minimal. `fullscreen` menghapus semuanya termasuk bilah status. `browser` menampilkan UI browser lengkap. Bagi sebagian besar PWA, `standalone` adalah pilihan yang tepat. Perintah penginstalan tidak muncul jika tampilan diatur ke `browser`.
Bidang start_url menentukan URL mana yang terbuka ketika pengguna meluncurkan PWA yang diinstal dari layar beranda. Selalu sertakan ini — tanpanya, Android akan membuka URL tempat manifes ditemukan, yang mungkin merupakan laman tautan dalam, bukan laman beranda Anda. Gunakan `'start_url': '/'` untuk sebagian besar situs, atau URL tertentu jika aplikasi Anda perlu dimulai pada rute tertentu.
Men-debug masalah manifes sangatlah mudah di DevTools Chrome. Buka DevTools (F12), navigasikan ke tab Aplikasi, dan klik Manifest di panel kiri. Chrome menampilkan tampilan manifes yang diurai, kesalahan penguraian, kegagalan pengambilan ikon, dan daftar periksa 'Kemampuan Penginstalan' yang menjelaskan mengapa perintah penginstalan mungkin tidak ditampilkan. Masalah umum termasuk ikon tidak ditemukan (404), jenis MIME salah, atau ikon 192×192 hilang.
Menyajikan manifes dengan benar memerlukan dua konfigurasi sisi server. Pertama, file harus disajikan dengan `Content-Type: application/manifest+json`. Kedua, jika ikon Anda berada di CDN atau asal yang berbeda dari manifes, respons ikon harus menyertakan header CORS yang sesuai (`Access-Control-Allow-Origin: *` atau domain Anda). Header CORS yang tidak ada pada file ikon akan menyebabkan browser menganggap manifes sebagai tidak valid.
Untuk kerangka kerja yang membuat manifes secara otomatis, verifikasi bahwa file yang dihasilkan menyertakan ukuran dan warna ikon Anda yang sebenarnya. Next.js menghasilkan manifes dari ekspor /app/manifest.ts Anda. Buat Aplikasi React menghasilkan /public/manifest.json. Vite tidak membuat manifes secara default — buat manifes secara manual. Dalam semua kasus, perbarui susunan ikon untuk merujuk pada file ikon bermerek Anda yang sebenarnya, bukan ikon placeholder default.
Cara kerjanya
- 1
Hasilkan ikon 192×192 dan 512×512 PNG
Unggah logo 512×512 PNG atau SVG Anda ke [favicon generator](tool:favicon-generator). Paket download meliputi android-chrome-192x192.png dan android-chrome-512x512.png siap digunakan langsung.
- 2
Buat site.webmanifest
Buat file JSON dengan minimal: `name`, `short_name`, `icons` (192 dan 512 entri), `theme_color`, `background_color`, dan `display: 'standalone'`. Paket generator menyertakan templat manifes yang telah diisi sebelumnya.
- 3
Sajikan manifes dengan tipe MIME yang benar
Konfigurasikan server Anda untuk menyajikan file .webmanifest dengan `Content-Type: application/manifest+json`. Di Apache, tambahkan `AddType application/manifest+json .webmanifest` ke .htaccess. Di Nginx, tambahkan tipe MIME ke mime.types.
- 4
Tautkan manifes di HTML
Tambahkan `<link rel='manifest' href='/site.webmanifest'>` di dalam `<head>` Anda. Tambahkan juga `<meta name='theme-color' content='#YOUR_COLOR'>` untuk browser yang tidak membaca manifes theme_color.
- 5
Verifikasi dengan DevTools Chrome
Buka DevTools Chrome > Aplikasi > Manifes. Konfirmasikan tidak ada kesalahan yang ditampilkan dan semua ikon teratasi. Periksa bagian Kemampuan Penginstalan untuk mengetahui kriteria pasti yang terpenuhi atau tidak terpenuhi untuk perintah penginstalan PWA.
- 6
Uji perintah penginstalan
Pada Android Chrome, navigasikan ke situs Anda. Jika semua kriteria terpenuhi, Chrome menampilkan spanduk pemasangan atau opsi 'Tambahkan ke Layar Beranda' di menu browser. Setelah instalasi, verifikasi warna latar belakang layar splash dan ikon layar beranda ditampilkan dengan benar.
Coba sekarang
Hasilkan paket ikon PWA Anda
Pembuat FaviconFAQ
Apakah manifes aplikasi web diperlukan untuk situs web dasar?+
Tidak — hanya jika Anda menginginkan perintah penginstalan PWA ke layar beranda di Android dan desktop Chrome/Edge. favicon.ico sendiri menangani tab browser. Tambahkan manifes bila Anda ingin mengaktifkan pengalaman pemasangan seluler dan desktop yang lebih kaya.
Berapa ukuran ikon yang ada di manifes aplikasi web?+
Minimal: 192×192 (peluncur Android) dan 512×512 (layar splash dan pratinjau pemasangan). Tambahkan varian maskable dari kedua ukuran untuk dukungan ikon adaptif Android, dan 384×384 jika Anda menginginkan cakupan kepadatan tambahan.
Apa perbedaan antara theme_color dan background_color di manifes?+
theme_color mengatur bilah alamat browser dan warna bilah alat. background_color menyetel warna latar belakang layar pembuka yang ditampilkan sebelum pengecatan pertama aplikasi Anda. Atur keduanya agar sesuai dengan merek Anda untuk pengalaman pemasangan dan peluncuran yang lancar.
Mengapa Chrome tidak menampilkan perintah penginstalan untuk PWA saya?+
Alasan paling umum adalah: manifes tidak ada atau tidak valid, ikon 192×192 tidak ada, ikon menampilkan 404, manifes tidak disajikan dengan jenis MIME yang benar, atau situs tidak dilayani melalui HTTPS. Gunakan Chrome DevTools > Application > Manifest untuk melihat alasan kegagalan penginstalan yang sebenarnya.
Apa itu ikon yang dapat disamarkan dan apakah saya memerlukannya?+
Ikon yang dapat disamarkan mencakup bantalan zona aman sehingga Android dapat menerapkan masker melingkar atau persegi tanpa memotong logo Anda. Anda memerlukannya agar ikon layar beranda terlihat benar di perangkat Android yang menggunakan bentuk ikon adaptif non-persegi. Deklarasikannya dengan `'purpose': 'maskable'` di array ikon manifes.
Bisakah saya menggunakan ikon SVG di manifes aplikasi web?+
Chromium mendukung SVG dalam beberapa konteks ikon manifes, namun PNG adalah default yang aman secara universal untuk UI pemasangan lintas-browser. Selalu sertakan entri PNG 192 dan 512. Anda dapat menambahkan entri SVG di sampingnya tanpa membahayakan.
Bagaimana cara memeriksa apakah manifes web saya valid?+
Buka Chrome DevTools (F12) > Aplikasi > Manifes. Chrome menunjukkan kesalahan penguraian, kegagalan pengambilan ikon, dan daftar periksa kemampuan pemasangan yang lengkap. Perbaiki masalah apa pun yang dilaporkan, lalu uji ulang perintah penginstalan dengan menggunakan opsi 'Tambahkan ke Layar Beranda' dari bilah alamat Chrome.