Ukuran Favicon Terbaik di tahun 2026

Tab browser pada tampilan kepadatan standar menggunakan 16×16 piksel. Ini adalah ukuran favicon terkecil dan paling sering dilihat oleh pengguna — ia selalu berada di tab kecil di atas konten halaman. Ikon 16×16 yang tetap mudah dibaca memerlukan bentuk tebal, kontras tinggi, dan tidak ada detail halus. Garis tipis, teks kecil, dan logo rumit menjadi gumpalan yang tidak terbaca pada ukuran ini.

Ukuran 32×32 piksel adalah dimensi favicon terpenting untuk browser modern. Ini digunakan untuk tab browser pada tampilan Retina/HiDPI (dirender pada kepadatan 2x dari ukuran logis 16px), untuk bilah bookmark, dan untuk ikon saran bilah alamat. Chrome meminta 32×32 paling agresif, dan Google Penelusuran menggunakan setidaknya ikon 32×32 untuk favicon hasil penelusurannya.

Ukuran piksel 48×48 melayani Windows Explorer pada tampilan 'ikon sedang' dan digunakan oleh beberapa mesin pencari untuk thumbnail hasil. Rekomendasi resmi Google untuk kelayakan favicon pencarian adalah minimal 48×48 piksel, rasio aspek persegi, dan aksesibilitas publik melalui HTTP. Selalu gabungkan 48×48 di dalam file .ico multi-ukuran Anda untuk memenuhi persyaratan ini.

Ukuran piksel 64×64 berguna di Windows Explorer pada tampilan ikon besar dan untuk beberapa lingkungan peluncur aplikasi. Memasukkannya ke dalam file .ico Anda akan menambah ukuran file minimal dan memastikan cakupan untuk permukaan apa pun yang meminta ukuran antara 48 dan 128 piksel. Kebanyakan generator .ico multi-ukuran menyertakan 64 secara default.

Ukuran piksel 128×128 dan 256×256 digunakan di dalam file .ico untuk ubin menu Mulai Windows dan pintasan resolusi tinggi. Pada ukuran 256×256 Anda harus menggunakan kompresi PNG di dalam .ico daripada pengkodean BMP — entri BMP 256×256 yang tidak terkompresi saja menambahkan sekitar 256 KB ke file .ico, sementara yang dikompresi PNG ukurannya menyusut hingga di bawah 30 KB.

Ukuran 180×180 piksel adalah dimensi apple-touch-icon yang digunakan oleh iOS. Saat pengguna mengetuk 'Tambahkan ke Layar Utama' di Safari, iOS mengambil `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>` dan menggunakan gambar tersebut sebagai ikon layar utama. Tanpa ini, iOS akan kembali ke tangkapan layar halaman Anda yang berkualitas rendah. Ini adalah ukuran prioritas tertinggi untuk situs yang mengutamakan seluler.

Ukuran 192×192 piksel diperlukan dalam manifes aplikasi web (site.webmanifest) untuk perintah penginstalan PWA Android Chrome. Saat pengguna menambahkan situs Anda ke layar beranda Android, Chrome membaca manifes dan menggunakan ikon 192×192 untuk peluncur aplikasi dan bayangan notifikasi. Ikon harus berbentuk persegi, berformat PNG, dan dapat diakses melalui URL yang dinyatakan.

Ukuran piksel 512×512 adalah ikon manifes lain yang diperlukan, digunakan untuk layar pembuka PWA yang muncul saat aplikasi dimuat setelah peluncuran layar utama, dan untuk pratinjau pemasangan OS Chrome. Ini juga merupakan ukuran gambar sumber yang direkomendasikan saat membuat semua ukuran lainnya — mulai dari 512×512 memastikan setiap varian downsampled mempertahankan tepi yang tajam.

Pengaturan favicon minimum yang layak dan mencakup hampir semua pengguna adalah: favicon.ico multi-ukuran berisi bingkai 16, 32, 48, dan 64 piksel, ditambah 180×180 apple-touch-icon.png, ditambah site.webmanifest dengan entri 192×192 dan 512×512 PNG. Kombinasi ini menangani browser standar, bookmark, pemasangan layar utama iOS, dan pemasangan Android PWA.

Menambahkan favicon SVG di samping .ico dan PNG akan membuktikan ikon Anda di masa depan. SVG ditampilkan pada kepadatan apa pun — satu file melayani monitor 96dpi, layar 4K, dan apa pun di antaranya — dan dapat berganti warna berdasarkan preferensi skema warna pengguna. Chrome, Edge, Firefox, dan Safari 15+ semuanya mendukung favicon SVG pada tahun 2026, menjadikannya tambahan yang aman.

Kesalahan umum dalam ukuran favicon meliputi: hanya menggunakan 32×32 PNG tanpa .ico (rusak pada browser lama dan pintasan Windows), melewatkan 180 apple-touch-icon (rusak pada instalasi iOS), dan menghilangkan 512×512 dari manifes (prompt instalasi XAndroid menunjukkan ikon umum). favicon generator menghasilkan set lengkap secara otomatis dari satu gambar sumber, menghilangkan semua kesenjangan ini.

Dampak SEO dari ukuran favicon tidak langsung tetapi nyata. Google Penelusuran menampilkan favicon di samping hasil penelusuran dan menerapkan persyaratan ukuran minimum 48×48 piksel. Situs yang tidak memiliki favicon dengan ukuran yang sesuai dan dapat diakses oleh publik mungkin akan melihat ikon globe umum di hasil penelusuran, bukan tanda mereknya — sebuah perbedaan sinyal kepercayaan yang kecil namun nyata untuk klik penelusuran organik.

Untuk kelengkapan ikon tingkat PWA, tambahkan ikon yang dapat disamarkan ke manifes web Anda. Ikon yang dapat disamarkan memiliki bantalan zona aman sekitar 10% di semua sisi, memastikan bahwa ketika Android menerapkan topeng melingkar atau persegi ke ikon, logo inti tidak akan terpotong. Hasilkan versi maskable terpisah menggunakan opsi ekspor maskable generator dan deklarasikan dengan `'purpose': 'maskable'` dalam array ikon manifes.

Saat memilih gambar sumber untuk pembuatan favicon, prioritaskan SVG dibandingkan PNG dan PNG dibandingkan JPG. SVG menghasilkan keluaran paling tajam di setiap ukuran. PNG-32 (dengan alfa) menjaga transparansi. JPG tidak memiliki dukungan transparansi dan memperkenalkan artefak kompresi yang muncul dalam ukuran kecil. Lihat panduan best favicon format untuk perbandingan format lengkap.