Jawaban singkat: sebuah favicon perlu 16×16, 32×32, dan 48×48 piksel dalam .ico untuk tab browser dan pintasan Windows, 180×180 piksel untuk Apple Touch Icon di iOS, serta 192×192 dan 512×512 piksel dalam PNG untuk Android Chrome dan Progressive Web App. Enam ukuran itu sudah menutup semua konteks modern — tabel lengkap berisi 16 ukuran ada tepat di bawah.
Favicon berasal dari "favorite icon" — ikon yang disimpan browser bersama bookmark. Sekarang perannya jauh lebih luas: favicon muncul di tab browser, di bilah alamat, di pintasan desktop, di layar utama ponsel iOS dan Android, di hasil Google, serta sebagai ikon Progressive Web App (PWA). Tiap konteks menuntut ukuran yang berbeda.
Kesalahan paling umum adalah membuat satu file favicon.ico berukuran 16×16 piksel lalu menganggap pekerjaan selesai. Di monitor Retina atau di iPhone, ikon itu akan terlihat pecah. Solusinya adalah membuat satu set ukuran yang lengkap — terdengar merepotkan, tetapi bisa selesai dalam hitungan detik dengan alat yang tepat.
Apa itu file .ico dan kapan dipakai
Format .ico adalah format favicon yang asli, dibuat Microsoft pada era 90-an. Ia punya satu keistimewaan: bisa memuat beberapa ukuran sekaligus dalam satu file — misalnya 16×16 dan 32×32 bersamaan. Browser lalu memilih ukuran yang paling pas untuk tiap konteks.
File favicon.ico masih dibutuhkan pada 2026 karena satu alasan spesifik: browser lama dan sebagian robot mesin pencari otomatis mencoba mengakses /favicon.ico di root situs. Kalau file itu tidak ada, muncul error 404 yang sia-sia di log server. Jadi, sekalipun Anda memakai PNG modern untuk segalanya, tetap dianjurkan menaruh favicon.ico di root.
Tabel lengkap ukuran favicon
Berikut daftar semua ukuran yang perlu dicakup sebuah favicon lengkap pada 2026:
| Ukuran | Format | Dipakai di mana |
|---|---|---|
| 16 × 16 px | .ico / PNG | Tab browser (standar) |
| 32 × 32 px | .ico / PNG | Pintasan desktop (Windows), tab di layar HiDPI |
| 48 × 48 px | .ico / PNG | Pintasan di Windows Explorer |
| 57 × 57 px | PNG | iPhone (iOS 1–6, layar non-Retina) |
| 60 × 60 px | PNG | iPhone (iOS 7+, layar non-Retina) |
| 72 × 72 px | PNG | iPad (iOS 1–6, layar non-Retina) |
| 76 × 76 px | PNG | iPad (iOS 7+, layar non-Retina) |
| 96 × 96 px | PNG | Pintasan di Chrome (Android) |
| 114 × 114 px | PNG | iPhone Retina (iOS 1–6) |
| 120 × 120 px | PNG | iPhone Retina (iOS 7+) |
| 144 × 144 px | PNG | iPad Retina (iOS 1–6), tile Windows 8 |
| 152 × 152 px | PNG | iPad Retina (iOS 7+) |
| 167 × 167 px | PNG | iPad Pro (iOS 9+) |
| 180 × 180 px | PNG | iPhone 6 Plus dan model yang lebih baru |
| 192 × 192 px | PNG | Android Chrome, PWA (manifest.json) |
| 512 × 512 px | PNG | Splash screen Android Chrome, PWA resolusi tinggi |
💡 Kabar baiknya: Anda tidak perlu membuat tiap ukuran satu per satu. Pembuat Favicon dari ImageTools menghasilkan semua file itu otomatis dari satu gambar saja — termasuk .ico multi-ukuran dan satu ZIP berisi seluruh PNG-nya.
Gambar seperti apa yang dipakai sebagai dasar favicon
Gambar sumber minimal harus 512×512 piksel — itu ukuran terbesar yang dibutuhkan, dan berangkat dari gambar besar menjamin ukuran-ukuran kecil tetap tajam. Memakai gambar kecil sebagai dasar membuat ikon terlihat pecah di ukuran besar.
Format yang diterima sebagai masukan
- PNG dengan latar transparan — pilihan terbaik. Ikonnya tetap bersih di warna latar tab atau layar utama mana pun.
- PNG dengan latar solid — bekerja baik kalau warna latarnya senada dengan desain situs Anda.
- JPG — diterima, tetapi tidak mendukung transparansi.
- SVG — titik awal terbaik kalau Anda punya. Vektor, ukuran berapa pun tanpa kehilangan kualitas.
Tips desain untuk favicon
Favicon adalah ruang yang sangat sempit — versi 16×16 hanya punya 256 piksel seluruhnya. Itu memunculkan batasan desain yang sering diabaikan:
- Pakai elemen paling sederhana dari merek Anda. Logo utuh biasanya tidak terbaca di 16px. Lebih baik pakai huruf awalnya saja, satu simbol tunggal, atau versi ikon yang disederhanakan.
- Hindari teks tipis. Teks apa pun di bawah 32px akan sulit dibaca.
- Pakai kontras tinggi. Favicon Anda bersaing dengan puluhan tab lain yang terbuka — ikon berkontras rendah akan lenyap begitu saja.
- Latar warna solid sering lebih baik daripada transparan dalam banyak kasus. Dengan begitu ikonnya tetap menonjol baik di tab terang maupun gelap.
- Uji hasilnya di 16px sebelum menganggapnya selesai. Desain yang tampak bagus di 512px bisa jadi tidak dikenali sama sekali di 16px.
Buat favicon Anda sekarang — semua ukuran sekaligus
Unggah gambar Anda dan unduh satu ZIP berisi .ico dan semua PNG yang dibutuhkan untuk browser, iPhone, Android, dan PWA. Gratis, tanpa daftar.
Buat favicon gratisCara memasang favicon di situs Anda
Setelah file-nya jadi, Anda perlu merujuknya di bagian <head> HTML. Kode lengkap yang dianjurkan untuk 2026 adalah:
<!-- Basic favicon for browsers -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Apple Touch Icon (iPhone and iPad) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android and PWA -->
<link rel="manifest" href="/site.webmanifest">File favicon.ico harus berada di root situs (folder yang sama dengan index.html). File PNG lainnya boleh di root atau di subfolder, asalkan jalurnya di HTML ditulis dengan benar.
File site.webmanifest
Untuk PWA dan agar Android Chrome mengenali ikon Anda dengan benar, dibutuhkan file site.webmanifest di root situs. Isi dasarnya seperti ini:
{
"name": "Your Site Name",
"short_name": "Site",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}📦 ZIP dari Pembuat Favicon sudah menyertakan file site.webmanifest yang jalurnya diatur dengan benar — tinggal ekstrak lalu unggah semuanya ke root situs Anda.
Cara memasangnya di berbagai platform
WordPress
Di WordPress, favicon disebut "ikon situs". Untuk mengaturnya, buka Tampilan → Sesuaikan → Identitas Situs lalu klik "Pilih Ikon Situs". WordPress otomatis membuat ukuran-ukuran yang dibutuhkan dari gambar yang Anda unggah — cukup pakai gambar persegi minimal 512×512 piksel.
Shopify
Di Toko Online → Preferensi, gulir sampai "Ikon toko" lalu unggah gambar persegi minimal 512×512 piksel dalam PNG atau JPG.
Wix
Di Pengaturan → Identitas Merek → Favicon. Pakai gambar persegi dalam PNG atau JPG.
Squarespace
Di Design → Gaya Browser, bagian "Favicon". Anjuran: PNG persegi 100×100 piksel (sisanya diurus Squarespace).
HTML/CSS murni atau framework
Taruh semua file hasilnya di root proyek dan tambahkan tag <link> seperti di atas pada <head> tiap halaman — atau di layout dasarnya kalau Anda memakai framework seperti Next.js, Nuxt, dan sejenisnya.
Memastikan favicon sudah bekerja
Setelah dipasang, buka situs Anda di satu tab browser dan lihat apakah ikonnya muncul. Kalau belum muncul juga, coba:
- Bersihkan cache browser (Ctrl+Shift+R di Windows, Cmd+Shift+R di Mac).
- Buka di tab penyamaran, yang tidak memakai cache.
- Tunggu beberapa menit, karena browser menyimpan favicon di cache dengan durasi yang berbeda-beda.
- Periksa apakah jalur file di HTML sudah benar dan file-nya memang ada di server.