Apa itu ikon maskable
Saat seseorang menginstal web app, launcher menampilkan ikonnya dalam bentuk khas launcher itu: lingkaran di satu ponsel, persegi membulat atau bentuk tetesan air di ponsel lain. Cara ikon biasa berlatar transparan dimuatkan ke bentuk itu diserahkan ke platformnya. Ikon maskable memang dibuat untuk dipotong: ikon ini mengisi seluruh perseginya dengan latarnya sendiri, jadi bentuk apa pun yang dipotong launcher akan menghasilkan ikon berwarna yang utuh.
Web app manifest menandai perbedaannya lewat anggota purpose di setiap ikon. Spesifikasi W3C mencantumkan tiga purpose, yaitu any, maskable, dan monochrome, dan ikon tanpa purpose dianggap any.
Zona aman: lingkaran dengan radius 40 %
Spesifikasi menentukan di mana artwork aman dari mask apa pun: "lingkaran dengan titik pusat di tengah ikon dan radius 2/5 (40%) dari ukuran ikon". Pada ikon 512 px, itu berarti lingkaran berdiameter 410 px di tengah. MDN menjelaskan zona yang sama sebagai lingkaran yang diameternya 80 % dari ikon, dan web.dev mengingatkan bahwa tepi luarnya, sekitar 10 % di setiap sisi, bisa terpotong.
Gambar di atas menunjukkan ikon maskable dari paket contoh di bawah. Salinan pertama diberi gambar zona aman; tiga lainnya adalah file yang sama dengan mask lingkaran, persegi membulat, dan tetesan air. Karena tandanya tetap berada di dalam lingkaran, setiap mask membiarkannya utuh, dan hanya latarnya yang berubah bentuk.
Pembuat favicon memuatkan artwork itu sendiri, bukan kotak pembatasnya, ke dalam lingkaran, dikurangi padding yang kamu pilih. Jadi tanda yang bulat bisa mengisi hampir seluruh zona aman, sedangkan foto persegi akan jadi lebih kecil, karena sudut-sudutnya juga harus muat di dalam lingkaran.
Purpose any atau maskable: kenapa dua file
Sebuah ikon bisa mendeklarasikan "purpose": "any maskable", dan artikel manifest dari web.dev memakai bentuk itu. Artikel web.dev tentang ikon maskable justru menyarankan sebaliknya: ikon yang diberi padding untuk mask terlihat terlalu kecil di tempat ia ditampilkan tanpa mask. Sumbernya tidak sepakat, dan dua file menghindari kompromi itu. Ikon any mempertahankan transparansinya dan artwork-nya mengisi persegi; ikon maskable punya latar penuh sampai tepi dan artwork di dalam zona aman.
| Purpose | Latar | Artwork | Tempat ditampilkan |
|---|---|---|---|
any |
Transparan | Mengisi persegi, dikurangi padding | Di mana pun ikon ditampilkan tanpa dipotong |
maskable |
Warna latarmu, dari tepi ke tepi | Di dalam lingkaran 40 % | Launcher yang memotong ikon jadi suatu bentuk |
Manifest dengan kedua jenis ikon
Ini site.webmanifest dari paket contoh. Path ikonnya relatif: spesifikasi menyelesaikan src, seperti start_url, terhadap URL manifest itu sendiri, jadi ikon tetap berfungsi dari folder mana pun selama letaknya di samping manifest.
{
"name": "png2svg.art",
"short_name": "png2svg",
"icons": [
{
"src": "icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon-maskable-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#0a2d8f",
"background_color": "#e8efff",
"display": "standalone",
"start_url": "/"
}
Tautkan dari setiap halaman dengan <link rel="manifest" href="/site.webmanifest">. Spesifikasi menyebut .webmanifest sebagai ekstensi file yang terdaftar dan menganjurkan agar disajikan sebagai application/manifest+json, meskipun tipe JSON apa pun diterima.
Ukurannya tidak sembarangan. Panduan installability MDN, yang diperbarui pada September 2026, menyebutkan bahwa, di antara syarat lainnya, browser Chromium hanya menginstal web app jika manifest-nya punya name atau short name, start_url, mode display, dan ikon berukuran 192 dan 512 px, dan situsnya disajikan lewat HTTPS. Safari bekerja dengan cara berbeda: tim WebKit menulis untuk Safari 26 bahwa tidak ada syarat installability, dan ikon di manifest dipakai jika situs mendefinisikannya. MDN juga menyarankan untuk mulai dari artwork persegi minimal 1.024 px; bitmap kecil yang diperbesar ke 512 px tidak bisa mendapat detail tambahan.
Cara menguji ikon maskable
Di Chrome, buka DevTools, masuk ke Application → Manifest, lalu centang Show only the minimum safe area for maskable icons. Bagian ikon kemudian menampilkan setiap ikon maskable yang dipotong sesuai zona aman: kalau ada bagian penting yang hilang di sana, launcher juga bisa memotongnya. Dokumentasi Chrome menjelaskan opsi ini. web.dev juga merujuk ke Maskable.app, situs pihak ketiga tempat kamu bisa melihat pratinjau ikon dengan beberapa mask. Pengecekan terakhirnya adalah aplikasi yang sudah terinstal di ponsel sungguhan.
Contoh nyata untuk diunduh
Ikon-ikon di atas berasal dari satu kali proses pembuat favicon pada tanda milik situs ini sendiri (SVG yang ada di repositori, bukan unggahan siapa pun), dengan padding 8 % dan latar #e8efff. Ini persis file yang dibuat alat tersebut. Unduh paket contohnya (ZIP) untuk melihat semua file beserta README-nya. Untuk sisi tab browser dari paket yang sama, baca favicon SVG vs PNG vs ICO.