Favicon bukan lagi satu gambar — ini adalah kumpulan setidaknya enam hingga sepuluh aset berukuran ditambah wadah ICO, manifes web, dan beberapa baris HTML. Melakukan semuanya dengan benar sangat penting agar situs terlihat sempurna di seluruh tab browser, perangkat Apple, layar beranda Android, ubin menu mulai Windows, dan layar peluncuran PWA. Bagian di bawah ini membahas mengapa favicon modern memerlukan berbagai ukuran, perbedaan antara format ikon PNG, ICO, dan SVG, serta HTML spesifik dan bagian manifes yang membuat semuanya bekerja sama dengan benar di seluruh platform.
Mengapa Favicon Modern Membutuhkan Berbagai Ukuran
Hari-hari favicon file tunggal berakhir sekitar tahun 2010 ketika iOS dan Android mulai mempromosikan situs web sebagai warga layar utama kelas satu. Saat ini, berbagai platform meminta ukuran yang berbeda untuk konteks yang berbeda, dan menyajikan ukuran yang salah menghasilkan hasil yang sangat buruk — penggandaan piksel yang buram pada tampilan retina, karya seni yang terpotong di layar beranda iOS, atau ikon yang hilang seluruhnya di ubin menu mulai Windows. Cakupan minimum yang ditetapkan untuk situs modern: 16×16 untuk tab browser (kasus penggunaan favicon asli), 32×32 untuk bookmark browser dan tab retina, 48×48 untuk pintasan desktop Windows, 180×180 untuk layar beranda iOS (Ikon Apple Touch, dipotong menjadi persegi bulat secara otomatis), 192×192 untuk layar beranda Android (tidak terpotong, sengaja menggunakan latar belakang transparan atau solid), dan 512×512 untuk layar splash PWA pada peluncuran pertama. Setiap ukuran adalah file PNG independen dan bukan satu gambar yang diskalakan — pada ukuran 16×16, pengambilan sampel ulang default browser menghasilkan ikon yang lembut dan lembek yang tidak terbaca dengan jelas. Alat ini menghasilkan setiap ukuran sebagai PNG independen; karena Canvas API secara otomatis mengambil sampel ulang setiap target, karya seni sumber kontras tinggi yang sederhana sangat membantu pada ukuran terkecil. Biaya yang dibutuhkan adalah beberapa lusin kilobyte aset tambahan, yang tidak berarti apa-apa jika dibandingkan dengan peningkatan kualitas visual.
PNG vs ICO vs SVG: Kapan Menggunakan Yang Mana
Tiga format favicon hadir berdampingan di browser modern, dan masing-masing memiliki kasus penggunaan spesifik yang penting untuk implementasi lengkap. PNG adalah pilihan modern default: mendukung transparansi, ditampilkan secara universal, dan browser dapat memilih dari beberapa tag `` dengan ukuran berbeda. Gunakan PNG untuk setiap ikon per ukuran di HTML Anda. ICO adalah format lama yang menggabungkan beberapa ukuran dalam satu file kontainer, dan ini tetap penting karena satu alasan tertentu: browser secara otomatis meminta `/favicon.ico` di root situs terlepas dari apakah Anda menyertakan tag `` dalam HTML Anda. Tempatkan ICO multi-ukuran yang berisi gambar 16×16, 32×32, dan 48×48 di root situs Anda sebagai cadangan utama sehingga halaman yang tidak menyertakan tautan favicon tetap mendapatkan ikon yang tepat. Favicon SVG adalah tambahan baru (Chrome mendukungnya pada tahun 2021) yang secara teoritis menyelesaikan penskalaan multi-ukuran dengan menyediakan grafik vektor — namun dukungan SVG di browser masih tidak konsisten untuk rendering ikon, dan iOS Safari khususnya belum mendukungnya. Gunakan SVG sebagai penyempurnaan opsional melalui tag tautan `type="image/svg+xml"`, namun selalu kirimkan PNG dan ICO sebagai kumpulan kanonik. Praktik terbaik: gunakan PNG untuk kumpulan favicon utama Anda, sertakan favicon.ico di root untuk fallback lama dan tanpa markup, dan secara opsional tambahkan SVG sebagai penyempurnaan progresif untuk browser yang mendukungnya.
Bagian HTML dan Manifes yang Mengikatnya
Ikon yang dihasilkan tidak ada gunanya tanpa HTML yang benar dan tag manifes yang mengarahkan browser ke ikon tersebut. Blok HTML minimum untuk cakupan lengkap: `` dan serupa untuk ukuran lainnya, `` untuk layar utama iOS, `` untuk manifes aplikasi web, dan `
` plus `` untuk ubin Windows. Alat ini menghasilkan semua ini di tab Cuplikan HTML sehingga Anda dapat menempelkan seluruh blok langsung ke kepala halaman Anda. File `site.webmanifest` itu sendiri adalah dokumen JSON dengan kolom untuk nama aplikasi, short_name (untuk ikon dengan ruang teks terbatas), array ikon (jalur + ukuran + tipe mime), theme_color (mempengaruhi chrome UI browser), background_color (digunakan pada layar splash PWA), display (`"standalone"` untuk tampilan seperti PWA), dan start_url. Tanpa manifes ini, Chrome di Android tidak akan menawarkan perintah pemasangan PWA "Tambahkan ke Layar Utama" dengan ikon khusus Anda — ini akan kembali ke default browser. Tab Manifes di alat ini menghasilkan manifes yang benar secara otomatis dari kumpulan ikon dan pilihan desain Anda.