Penjelasan Ukuran Favicon

Favicon 16x16 piksel adalah standar web asli. Ini digunakan di tab browser pada tampilan standar (96dpi), di toolbar bookmark di semua browser desktop, dan di beberapa daftar riwayat browser. Karena 16×16 adalah kanvas yang sangat rapat, desain favicon Anda harus dilucuti ke bentuk yang paling sederhana: bentuk tunggal, huruf, atau tanda abstrak. Sesuatu yang lebih rumit tidak akan terbaca.

Ukuran 32×32 piksel menggandakan 16×16 dan menyajikan tab browser retina/HiDPI dengan kepadatan 2x, ikon bookmark pada DPI tinggi, dan ikon saran bilah alamat di Chrome. Browser modern lebih sering meminta 32x32 daripada 16x16 karena tampilan dengan kepadatan tinggi telah menjadi mayoritas perangkat. Jika Anda hanya dapat mengirimkan satu ukuran, 32×32 akan menjadi pilihan yang paling berdampak.

Ukuran 48×48 piksel adalah ukuran tampilan 'ikon sedang' Windows Explorer dan merupakan ukuran minimum yang disyaratkan oleh Google Penelusuran untuk kelayakan favicon dalam cuplikan hasil penelusuran. Situs yang faviconnya tidak memenuhi ukuran minimum 48×48 akan muncul dengan ikon globe umum di samping URL-nya di hasil Google, bukan tanda mereknya. Selalu sertakan 48×48 dalam paket .ico Anda.

Ukuran 64×64 piksel digunakan dalam tampilan ikon besar Windows Explorer dan di beberapa lingkungan desktop Linux. Memasukkannya ke dalam file .ico multi-ukuran Anda menambah overhead yang dapat diabaikan namun memastikan rendering yang bersih di pengelola file dan lingkungan shell. Banyak alat generator favicon menyertakan 64 secara default sebagai bagian dari paket .ico standar.

Ukuran 128×128 piksel menyajikan ubin aplikasi Toko Windows dan gambar mini bilah tugas dengan kepadatan tinggi. Ini kurang umum diperlukan untuk favicon web murni namun penting jika situs Anda dikemas sebagai PWA atau jika pengguna menyematkannya sebagai aplikasi Windows. Membundelnya di dalam .ico dengan kompresi PNG menjaga ukuran file tetap masuk akal.

Ukuran 256×256 piksel adalah bingkai .ico standar terbesar. Ini digunakan untuk pintasan desktop Windows, hasil pencarian menu Start Windows, dan beberapa konteks yang diinstal aplikasi. Pada resolusi ini, Anda harus menggunakan kompresi PNG di dalam wadah .ico, bukan BMP — gambar BMP 256×256 yang tidak terkompresi menambahkan 256 KB ke file .ico jika tidak diperlukan.

Ukuran 180×180 piksel khusus untuk iOS apple-touch-icon. Saat pengguna iPhone atau iPad mengetuk 'Tambahkan ke Layar Utama', Safari mengambil gambar yang dinyatakan dalam `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>`. Ukuran ini mencakup semua model iPhone saat ini (iPhone 6 Plus dan versi lebih baru menggunakan 180×180 dengan kepadatan 3x; model lama menggunakan 120×120 dan 152×152 — satu file 180 mencakup semuanya dengan baik).

Ukuran 192×192 piksel adalah ikon minimum yang diperlukan dalam manifes aplikasi web (site.webmanifest) untuk perintah penginstalan PWA Android Chrome. Saat pengguna menambahkan PWA ke layar beranda Android, Chrome menampilkan ikon 192×192 di peluncur dan ikon aplikasi di pengalih aplikasi terkini. Tanpa ukuran ini dalam manifes, perintah penginstalan PWA akan menampilkan ikon umum atau gagal terpicu sama sekali.

Ukuran 512×512 piksel adalah ikon manifes kedua yang diperlukan. Chrome menggunakannya untuk layar splash PWA yang ditampilkan saat aplikasi dimuat setelah peluncuran layar beranda, dan untuk pratinjau dialog instalasi di desktop OS Chrome. Ini juga merupakan ukuran sumber yang ideal untuk menghasilkan semua varian yang lebih kecil — mulai dari 512×512 memastikan setiap keluaran sampel yang diturunkan mempertahankan tepi yang tajam dan warna yang akurat.

Ukuran antara 512×512 dan 1024×1024 yang sangat besar terutama digunakan untuk ikon aplikasi asli pada macOS dan pengiriman App Store iOS, bukan untuk favicon web. Namun, jika Anda berencana mengubah keberadaan web Anda menjadi aplikasi asli menggunakan pembungkus (Elektron, Kapasitor, Tauri), Anda memerlukan 1024×1024 untuk proses peninjauan App Store. Simpan file master ini bersama paket favicon Anda.

Favicon SVG tidak bergantung pada resolusi dan mencakup setiap kepadatan dengan satu file. Browser yang mendukung favicon SVG (Chrome 80+, Edge 80+, Firefox 41+, Safari 15+) akan lebih memilih SVG daripada ukuran raster apa pun karena ditampilkan dengan sempurna pada 1x, 2x, 3x, atau DPI khusus apa pun. Kerugiannya adalah tidak semua konteks mendukung SVG — pintasan Windows, pembaca RSS, dan alat lama masih memerlukan penggantian .ico.

Hubungan antara ukuran dan wadah .ico penting untuk dipahami. File .ico bukanlah satu gambar — ini adalah arsip multi-gambar. Setiap frame di dalamnya adalah gambar raster terpisah dengan ukuran berbeda. Browser membaca direktori ICO, mengidentifikasi frame mana yang paling cocok dengan ukuran yang dibutuhkan, dan hanya menerjemahkan frame tersebut. Inilah sebabnya mengapa satu file .ico dapat melayani tab berukuran 16, 32, 48, dan 64 px dengan sama baiknya.

Set minimum yang disarankan untuk situs web produksi pada tahun 2026 adalah: favicon.ico memaketkan bingkai 16, 32, 48, dan 64 piksel; apple-touch-icon.png pada 180×180; android-chrome-192x192.png; android-chrome-512x512.png; favicon.svg untuk browser modern; dan site.webmanifest yang merujuk pada 192 dan 512 PNG. favicon generator menghasilkan set lengkap ini dari satu unggahan sumber dalam satu klik.

Memeriksa apakah semua ukuran favicon Anda disajikan dengan benar sangatlah mudah dengan favicon tester. Masukkan URL situs Anda dan penguji mencoba mengambil favicon.ico Anda, memeriksa tag tautan di kepala HTML Anda, dan menampilkan pratinjau setiap ukuran. Ukuran yang tidak ada ditandai dengan rekomendasi yang dapat ditindaklanjuti.