Warna Tema dan Ikon Aplikasi

Tag <meta name="theme-color" content="#1f2937"> mengatur warna bilah alamat peramban di perangkat seluler dan warna bilah judul pada PWA desktop. Tag ini memberikan tampilan yang rapi dan menyerupai aplikasi tanpa mengubah konten apa pun.

Sediakan warna terpisah untuk mode terang dan gelap: <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> serta tag kedua dengan warna gelap. Peramban memilih yang sesuai berdasarkan preferensi OS pengguna.

Properti theme_color pada manifest menetapkan warna saat aplikasi berjalan sebagai PWA terpasang (bilah judul jendela mandiri). Samakan dengan meta warna tema di halaman agar konsisten — saat berjalan di peramban maupun sebagai aplikasi terpasang, identitas visualnya tetap sama.

<link rel="icon" href="/favicon.ico"> adalah ikon klasik pada tab peramban. Meskipun namanya demikian, peramban modern lebih mengutamakan PNG atau SVG daripada ICO. Sediakan PNG berukuran 32x32 melalui <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png"> agar tampilannya lebih jelas.

Peramban modern menerima favicon SVG: <link rel="icon" type="image/svg+xml" href="/icon.svg">. Tetap tajam pada ukuran apa pun dan berukuran sangat kecil. Gunakan untuk logo vektor; pasangkan dengan cadangan PNG untuk peramban yang tidak mendukung favicon SVG.

Layar utama iOS menggunakan apple-touch-icon: <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Sediakan PNG berukuran 180x180. iOS tidak membaca ikon manifest web untuk pemasangan di layar utama; tautan apple-touch-icon wajib disediakan.

Pemasangan di Android membaca ikon dari larik icons pada manifest. Sertakan PNG berukuran 192x192 (layar utama) dan 512x512 (layar pembuka, laci aplikasi). Tambahkan salinan dengan tujuan "maskable" agar Android dapat menyesuaikan ikon dengan bentuk ikon layar utama (lingkaran, persegi membulat, persegi).

Ikon maskable sebaiknya menempatkan konten utamanya di dalam zona aman tengah sebesar 80% — 20% bagian luar dapat terpotong, bergantung pada bentuk mask perangkat. Gunakan alat seperti maskable.app untuk melihat pratinjau ikon dengan berbagai bentuk mask selama perancangan.

Untuk ubin tersemat Windows 8/10: <meta name="msapplication-TileImage" content="/tile.png"> dan <meta name="msapplication-TileColor" content="#1f2937">. Kini prioritasnya lebih rendah dibandingkan platform lain, tetapi tetap bermanfaat bagi pengguna Windows yang menyematkan situs.

IE/Edge lama: <meta name="msapplication-config" content="/browserconfig.xml"> menunjuk ke file XML yang berisi ikon ubin dalam berbagai ukuran. Sebagian besar sudah tidak relevan saat ini; situs baru dapat melewati browserconfig.xml tanpa konsekuensi.

Tab tersemat Safari macOS: <link rel="mask-icon" href="/safari-icon.svg" color="#1f2937">. SVG tersebut harus berupa ikon satu warna (warnanya ditimpa oleh atribut warna). Fitur ini hanya digunakan pada tab tersemat Safari macOS.

Gunakan realfavicongenerator.net untuk membuat setiap varian ikon dari satu sumber. Uji pada perangkat iOS sungguhan (tambahkan ke Layar Utama) dan Android (pasang aplikasi dari menu peramban) untuk memastikan ikon tampil dengan potongan yang benar dan tidak berpiksel.

Apa tujuan ikon dengan tujuan "maskable" dalam manifest aplikasi web?

Warna tema (dengan varian kueri media) mewarnai bilah alamat; warna tema manifest mewarnai bilah judul aplikasi terpasang. Ikon mencakup favicon (SVG + PNG), ikon sentuh Apple (iOS, 180x180), ikon manifest (Android, 192 + 512 + maskable), ikon mask Safari (SVG satu warna), dan ikon ubin Windows. Gunakan realfavicongenerator.net untuk membuat semua varian dari satu sumber.