Ukuran Favicon di 2026: Apa yang Benar-Benar Anda Butuhkan (dan Apa yang Bisa Dilewati)

Daftar ukuran favicon di internet panjangnya dua puluh berkas. Empat sudah mencakup hampir semuanya. Berkas mana yang dibuat, HTML yang ditempel, dan cara merancangnya agar terbaca pada 16px.

Diperbarui 11 Agustus 2026Baca 5 menit

Cari "ukuran favicon" dan Anda mendapat daftar dua puluh berkas, separuhnya untuk platform yang sudah tak ada. Kumpulan yang benar-benar menopang di 2026 terdiri dari empat item: sebuah ICO untuk kompatibilitas lawas, sebuah SVG bila Anda punya karya vektor, sebuah PNG 180×180 untuk layar beranda iOS, dan PNG 192/512 untuk Android serta aplikasi web progresif. Semua sisanya dalam daftar itu entah sudah tercakup salah satu dari keempatnya atau melayani platform dengan pangsa yang dapat diabaikan.

Berkas yang penting

Berkas	Ukuran	Tujuan	Masih dibutuhkan?
`favicon.ico`	16, 32, 48 dalam satu berkas	Tab peramban, markah, cadangan lawas	Ya
`icon.svg`	Vektor	Peramban modern; mendukung mode gelap	Bila Anda punya karya vektor
`apple-touch-icon.png`	180 × 180	Layar beranda iOS	Ya — satu ukuran mencakup semua perangkat
`icon-192.png`	192 × 192	Layar beranda Android	Ya
`icon-512.png`	512 × 512	Dialog pemasangan PWA dan layar pembuka	Ya, bila Anda menyertakan manifest
Ubin Windows	70–310	Ubin Start Windows 8/10	Jarang — warisan lama

Format ICO layak dipahami karena ia tak biasa: satu berkas .ico dapat memuat beberapa ukuran, dan peramban memilih yang dibutuhkannya. Itulah sebabnya satu berkas mencakup 16, 32, dan 48 alih-alih memerlukan tiga.

Apple menyederhanakan sisinya secara berarti — 180 × 180 kini satu-satunya ukuran ikon sentuh yang Anda butuhkan, dan perangkat lama maupun baru menskalakan berkas tunggal itu. Daftar panjang ikon Apple 57, 72, 114, dan 144 piksel sudah bertahun-tahun kedaluwarsa.

Rancang untuk 16 piksel, bukan untuk logo Anda

Di sinilah kebanyakan favicon gagal. Wordmark utuh yang dikecilkan ke 16 × 16 adalah noda tak terbaca — pada ukuran itu Anda punya kira-kira detail satu huruf. Tugas favicon adalah bisa dikenali dalam deretan dua puluh tab, bukan mereproduksi merek.

Pakai satu huruf atau satu tanda, bukan logo utuh. Inisial pertama, bagian ikon dari logo kombinasi, atau satu bentuk yang khas.
Buang detail halus. Goresan tipis, gradasi, dan garis luar lenyap atau berubah lembek. Bentuk padat bertahan.
Pakai kontras tinggi terhadap latar terang maupun gelap. Bilah tab peramban hadir dalam keduanya, dan tanda gelap di bilah tab gelap akan menghilang.
Isi persegi itu. Margin transparan yang lebar membuat tandanya lebih kecil dari seharusnya. Sisakan sedikit saja ruang napas.
Uji pada ukuran sebenarnya. Bukan diperbesar di editor Anda — pada 16 piksel, di tab peramban sungguhan, di sebelah tab lain.

Menghasilkan berkasnya

Mulai dari sumber persegi dan transparan

Idealnya 512 × 512 atau lebih besar. Jika logo Anda duduk di atas kotak putih, potong dengan penghapus latar; jika ia tidak persegi, potong dengan pemotong alih-alih membiarkan generator memberinya bilah kosong.

Hasilkan setnya

Generator favicon menghasilkan favicon.ico (16, 32, dan 48 dalam satu berkas), favicon PNG 16, 32, 48, dan 96, ikon sentuh Apple 180 × 180, PNG 192 dan 512 untuk Android dan aplikasi web yang bisa dipasang, sebuah site.webmanifest, serta cuplikan HTML siap tempel — semuanya dalam satu zip. Dengan Pro, ikon kerapatan Android, ubin Windows, dan salinan SVG dari sumber vektor ikut ditambahkan.

Isi detail manifest-nya

Ikon 512 × 512 dan site.webmanifest sudah ada di dalam paketnya — ikon PWA aktif secara baku. Sebelum membuat, isi nama aplikasi, nama pendek, dan warna tema di generatornya agar manifest memuatnya; manifest itu sudah otomatis menunjuk ke ikon 192 dan 512.

Taruh berkasnya di akar situs lalu tambahkan tagnya

Penempatan di akar itu penting: peramban meminta /favicon.ico secara langsung entah Anda mendeklarasikannya atau tidak.

Masukkan sebuah logo, dapatkan paket favicon lengkap dalam satu zip. Dihasilkan di perangkat Anda — logonya tidak pernah dikirim ke server.

Hasilkan favicon

HTML yang Anda butuhkan

Empat baris di dalam <head> mencakup setiap peramban dan platform masa kini. Lebih dari itu hampir selalu sisa warisan yang disalin dari tutorial lama:

<link rel="icon" href="/favicon.ico" sizes="32x32"> — dasar kompatibilitasnya.
<link rel="icon" href="/icon.svg" type="image/svg+xml"> — peramban modern lebih memilih ini bila tersedia.
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> — layar beranda iOS.
<link rel="manifest" href="/site.webmanifest"> — menunjuk ikon 192 dan 512 untuk Android dan pemasangan PWA.

Favicon SVG punya keunggulan nyata di luar penskalaan: ia bisa menanggapi skema warna peramban lewat kueri media prefers-color-scheme di dalam SVG-nya, sehingga tanda gelap bisa berbalik jadi terang di bilah tab gelap. Simpan ICO-nya berdampingan — favicon SVG berfungsi di Chrome, Firefox, Edge, dan sejak Safari 26 juga di Safari, tetapi peramban lama dan perkakas lain masih membutuhkan ICO sebagai cadangannya.

Mengapa favicon baru Anda belum muncul

Favicon disimpan di cache dengan agresif yang tak biasa — sering melampaui muat ulang paksa biasa, dan kadang terpisah sepenuhnya dari cache halaman. Sebelum menyimpulkan berkas Anda salah, buka langsung di https://situsanda.com/favicon.ico untuk memastikan ia benar disajikan, lalu coba jendela privat, yang biasanya mulai dengan cache ikon yang bersih.

Jika ia benar-benar macet, menambahkan string kueri ke tag tautannya (/favicon.ico?v=2) memaksa pengambilan ulang. Dan sekalian periksa ukuran berkasnya: favicon diminta pada hampir setiap pemuatan halaman, jadi ikon 200KB layak dijalankan melalui kompresor PNG. Set favicon yang dibuat dengan baik totalnya hanya beberapa kilobita.

Pertanyaan umum

Ukuran favicon apa yang sebenarnya saya butuhkan di 2026?

Empat hal mencakupnya: `favicon.ico` yang memuat versi 16, 32, dan 48 piksel, sebuah SVG bila Anda punya karya vektor, ikon sentuh Apple 180 × 180, serta PNG 192 dan 512 piksel yang dirujuk dari sebuah web manifest. Daftar yang lebih panjang di internet kebanyakan ukuran Apple dan Windows warisan lama.

Bisakah saya memakai PNG alih-alih favicon.ico?

Peramban modern menerima favicon PNG dan SVG, tetapi peramban tetap meminta `/favicon.ico` dari akar situs secara baku, dan sebagian alat serta pembaca umpan mengharapkannya. Sertakan ICO sebagai cadangan dan biarkan peramban modern lebih memilih SVG atau PNG yang Anda deklarasikan.

Mengapa favicon saya terlihat buram?

Biasanya karena ia dihasilkan dari sumber yang lebih kecil daripada ukuran keluaran terbesarnya, jadi ia diperbesar. Mulai dari setidaknya 512 × 512. Bisa juga karena terlalu berdetail — goresan tipis dan gradasi berubah lembek pada 16 piksel terlepas dari kualitas sumbernya.

Bagaimana membuat favicon dari logo saya?

Potong logonya menjadi persegi, hapus latar apa pun sehingga ia punya transparansi sungguhan, sederhanakan menjadi satu tanda atau huruf, lalu jalankan melalui generator untuk menghasilkan set ICO dan PNG. Uji hasilnya pada 16 piksel di tab sungguhan sebelum merilisnya.