Ukuran Favicon Dijelaskan (16–256): Apa yang Harus Disertakan di favicon.ico

Ketahui persis ukuran ikon mana yang termasuk dalam favicon.ico Anda dan mengapa masing-masing penting

Di Mana Favicon Sebenarnya Muncul

Sebagian besar orang menganggap favicon sebagai ikon kecil di tab browser, tetapi mereka muncul di jauh lebih banyak tempat dari itu. Memahami setiap konteks membantu Anda memilih ukuran mana yang harus disertakan sehingga ikon Anda selalu terlihat tajam.

Tab browser adalah lokasi paling terlihat. Setiap tab yang terbuka menampilkan favicon Anda pada sekitar 16 piksel, menjadikannya cara utama pengguna mengidentifikasi situs Anda ketika banyak tab terbuka. Bilah bookmark dan menu juga merender ikon Anda pada 16 piksel di sebagian besar browser, jadi versi yang tajam pada ukuran ini tidak dapat dinegosiasikan.

Bilah alamat dan saran pencarian di beberapa browser menunjukkan favicon di samping URL, biasanya pada 16 atau 32 piksel tergantung pada kepadatan tampilan. Panel riwayat berperilaku serupa, menarik favicon untuk membantu pengguna memindai situs yang dikunjungi sebelumnya.

Di luar browser, favicon muncul dalam konteks sistem operasi juga. Ketika pengguna menyematkan situs Anda ke taskbar Windows atau membuat pintasan desktop, OS menarik dari file ICO dan dapat merender ikon pada 48, 64, atau bahkan 256 piksel. Pada tampilan high-DPI (kelas Retina), ikon 32 piksel dapat diperluas untuk mengisi ruang yang membutuhkan lebih banyak detail, menghasilkan hasil buram kecuali varian yang lebih besar ada di dalam ICO.

Progressive Web Apps (PWA) menggunakan ikon manifest mereka sendiri daripada favicon.ico, tetapi favicon masih penting sebagai fallback untuk chrome browser standar dan untuk pengguna yang mem-bookmark situs tanpa menginstal PWA.

Untuk Apa Setiap Ukuran Favicon

Setiap dimensi piksel melayani tujuan yang berbeda. Tabel di bawah ini memetakan setiap ukuran favicon standar ke penggunaan umumnya dan menunjukkan apakah Anda harus menyertakannya.

Ukuran (px)	Penggunaan Umum	Sertakan?
16 × 16	Tab browser, bilah bookmark, bilah alamat, riwayat	Ya — diperlukan
32 × 32	Tab browser high-DPI, taskbar Windows, macOS Safari	Ya — diperlukan
48 × 48	Pintasan situs yang disematkan Windows, Windows Explorer	Ya — direkomendasikan
64 × 64	Beberapa permukaan UI Windows, pembaca RSS	Opsional
128 × 128	Tampilan ikon besar Windows, Chrome Web Store	Opsional
256 × 256	Tampilan ekstra besar Windows, pintasan desktop high-DPI	Direkomendasikan untuk kelengkapan

16 dan 32 piksel adalah esensial mutlak. Tanpa mereka, browser kembali ke globe generik atau ikon kosong, yang merusak pengenalan merek. Kedua ukuran ini mencakup hampir setiap skenario tab browser DPI standar dan high-DPI.

48 piksel masuk ke gambar ketika pengguna membuat pintasan Windows ke situs Anda. Sistem operasi merender pintasan desktop pada 48 piksel dalam tampilan ikon default, jadi menyertakan ukuran ini mencegah OS dari upscaling varian 32 piksel dengan canggung.

64 dan 128 piksel muncul dalam konteks khusus. Beberapa permukaan UI Windows dan aplikasi pihak ketiga meminta ikon 64 piksel, sementara 128 piksel digunakan oleh Chrome Web Store dan tampilan ikon besar tertentu. Menyertakan mereka hanya menambahkan beberapa kilobyte ke file ICO, jadi trade-off minimal.

256 piksel paling penting pada monitor high-DPI. Ketika Windows merender tampilan ikon ekstra besar atau pengguna menyematkan situs Anda ke taskbar pada layar 4K, OS dapat menarik varian 256 piksel untuk rendering paling tajam yang mungkin.

Bangun Favicon Multi-Ukuran Anda

Set Aman yang Direkomendasikan

Jika Anda menginginkan favicon.ico tunggal yang mencakup rentang konteks terluas tanpa bloat yang tidak perlu, gunakan set aman ini:

16 px — tab browser dan bookmark
32 px — tab high-DPI dan taskbar Windows
48 px — pintasan desktop Windows
256 px — high-DPI dan tampilan ikon ekstra besar

Set empat ukuran ini menjaga file ICO tetap kompak (biasanya di bawah 30 KB) sambil memastikan rendering tajam di setiap konteks utama. Anda dapat menambahkan 64 dan 128 piksel jika kasus penggunaan Anda memerlukannya, tetapi sebagian besar situs web tidak akan pernah melihat perbedaan.

Jika Anda membangun favicon murni untuk web dan tidak mengharapkan pengguna membuat pintasan desktop, Anda dapat memangkas set menjadi hanya 16 dan 32 piksel. Itu menghasilkan file ICO jauh di bawah 10 KB. Namun, biaya menyertakan 48 dan 256 sangat kecil sehingga kami merekomendasikan set aman penuh sebagai default untuk hampir setiap proyek.

Untuk pandangan lebih luas tentang bagaimana format ICO bekerja dan kapan itu pilihan yang tepat dibandingkan PNG, lihat penjelasan kami tentang apa itu file ICO.

Cara Menghasilkan Ukuran Favicon yang Tepat

Membuat favicon.ico multi-ukuran hanya memerlukan beberapa langkah dengan Any2ICO. Alat ini menerima gambar sumber PNG, JPG, WebP, GIF, BMP, AVIF, dan SVG hingga 10 MB, dan menghasilkan file ICO yang terstruktur dengan benar yang berisi setiap ukuran yang Anda pilih.

Mulai dengan sumber resolusi tinggi. Unggah logo atau ikon Anda pada 512 piksel atau lebih besar. Sumber besar memberi konverter cukup detail untuk menghasilkan versi yang diskalakan turun dengan bersih pada setiap ukuran target. Sumber SVG bekerja sangat baik karena mereka menskalakan tanpa kehilangan detail apa pun.
Pilih ukuran Anda. Centang kotak untuk 16, 32, 48, dan 256 (set aman), atau tambahkan 64 dan 128 jika Anda membutuhkannya.
Pilih perilaku penskalaan. Contain menyesuaikan gambar di dalam setiap persegi sambil mempertahankan rasio aspek, padding ruang ekstra apa pun. Cover mengisi seluruh persegi, memotong tepi jika perlu. Untuk sebagian besar logo, contain dengan latar belakang transparan adalah pilihan terbaik.
Unduh favicon.ico Anda. Tempatkan file yang dihasilkan di root situs web Anda (https://situsanda.com/favicon.ico). Browser mencari jalur ini secara otomatis, jadi dalam banyak kasus Anda bahkan tidak memerlukan tag <link>.

Any2ICO melakukan konversi langsung di browser Anda menggunakan Canvas API. File yang diimpor dari perangkat Anda ditransmisikan melalui server untuk pemrosesan tetapi tidak disimpan. Paste clipboard tetap sepenuhnya pada mesin Anda. Jika Anda mengonversi beberapa ikon sekaligus, mode batch memungkinkan Anda mengunduh semuanya dalam satu file ZIP.

Untuk panduan lengkap dengan screenshot dan snippet kode HTML, lihat panduan langkah demi langkah kami tentang cara membuat favicon.ico. Dan jika Anda perlu mengonversi PNG secara khusus, panduan PNG ke ICO kami memandu melalui alur kerja itu secara detail.

Kesimpulan

Memilih ukuran favicon yang tepat tidak harus rumit. Aturan inti sederhana: selalu sertakan 16 dan 32 piksel, tambahkan 48 dan 256 untuk cakupan Windows dan high-DPI, dan gunakan gambar sumber resolusi tinggi untuk menjaga setiap ukuran tajam. Set aman empat ukuran itu menangani sebagian besar skenario dunia nyata.

Ketika Anda siap membangun favicon Anda, Any2ICO membuatnya mudah. Unggah gambar Anda, pilih ukuran Anda, dan unduh file ICO tunggal yang berfungsi di mana-mana. Ini gratis, cepat, dan menghormati privasi Anda.

Buat Favicon Anda Sekarang