Favicon harus tampil benar di banyak tempat sekaligus: tab browser, bookmark, layar utama iOS, dan sebagai ikon aplikasi web yang diinstal di Android — masing-masing menuntut ukuran dan format file yang berbeda.
Mengapa ikon "maskable" penting untuk pengguna Android
Dengan pangsa pengguna Android yang sangat besar di Indonesia, banyak pengunjung situs mengalami langkah "Tambahkan ke layar utama" di Chrome. Saat itu terjadi, sistem memotong ikon situs ke bentuk adaptif milik perangkat masing-masing — lingkaran, persegi membulat, atau tetesan air — sehingga site.webmanifest menyediakan ikon bertipe "purpose": "maskable" dengan margin aman di sekeliling gambar utama agar bagian pentingnya tidak ikut terpotong.
Peran tag <link> di <head>
Setiap format ikon dihubungkan dengan tag <link rel="icon"> atau <link rel="apple-touch-icon"> masing-masing, disertai atribut sizes yang menunjukkan dimensinya, sehingga browser bisa memilih opsi paling sesuai untuk konteks tampilannya.
Web App Manifest untuk PWA
Aplikasi web progresif membutuhkan file site.webmanifest berformat JSON yang mencantumkan daftar ikon, nama situs, dan warna tema — dari situlah Android mengambil ikon saat sebuah situs dipasang sebagai aplikasi mandiri.
Mengapa ini dibutuhkan
- Membuat satu set ikon lengkap dalam ukuran yang dibutuhkan dari satu gambar sumber.
- Mendapatkan kode HTML tag <link> yang siap ditempel ke <head>.
- Memastikan situs tampil benar saat ditambahkan ke layar utama perangkat seluler, termasuk dengan ikon adaptif di Android.