Ukuran Favicon: Ukuran Mana yang Benar-benar Anda Butuhkan di 2025

Cari "favicon size" dan Anda akan mendapatkan daftar angka yang saling bertentangan: 16x16, 32x32, 48x48, 64, 180, 192, 256, 512. Sebagian besar daftar tersebut ditulis satu dekade lalu dan tidak pernah diperbarui. Dalam praktiknya, situs modern membutuhkan sekitar empat file, dan Anda dapat membuat semuanya dalam satu kali proses dengan favicon generator — generator ini berjalan sepenuhnya di browser Anda, jadi logo Anda tidak pernah meninggalkan mesin Anda.

Inilah tujuan sebenarnya dari setiap ukuran, dan apa yang dapat Anda lewati dengan aman.

Ukuran yang masih penting

16x16 dan 32x32 — tab browser dan bookmark

Ini adalah favicon klasik. 16x16 adalah apa yang Anda lihat di strip tab yang ramai; 32x32 digunakan di layar DPI tinggi, bilah bookmark, dan beberapa UI address bar. Keduanya secara tradisional disatukan dalam satu file favicon.ico, yang dapat menampung beberapa resolusi sekaligus. Windows juga mengambil 48x48 dari .ico yang sama untuk pintasan desktop, jadi memasukkannya hampir tidak memerlukan biaya tambahan.

180x180 — Apple touch icon

Ketika seseorang mengetuk "Add to Home Screen" di iPhone atau iPad, Safari mencari apple-touch-icon.png pada ukuran 180x180. Jika tidak ada, iOS membuat tangkapan layar halaman Anda dan menggunakannya sebagai gantinya, yang terlihat mengerikan. PNG tunggal ini mencakup setiap perangkat iOS saat ini karena sistem melakukan penskalaan ke bawah sesuai kebutuhan.

192x192 dan 512x512 — Android dan PWAs

Android Chrome dan aplikasi web yang dapat dipasang membaca ikon dari site.webmanifest Anda. 192 adalah ikon home-screen; 512 digunakan untuk splash screen dan daftar aplikasi. Jika Anda menginginkan situs Anda dapat dipasang, Anda memerlukan keduanya.

SVG — opsional tetapi bagus

Firefox dan Chrome keduanya mendukung favicon SVG, yang tetap tajam di ukuran apa pun dan dapat merespons dark mode dengan media query di dalam file. Ini adalah bonus, bukan pengganti — Safari dan browser yang lebih lama masih menginginkan versi raster.

Apa yang dapat Anda lewati

64x64, 96x96, 128x128, seluruh set gambar tile Windows, dan lusinan file apple-touch-icon-76x76 yang legacy. Mereka diperlukan untuk perangkat yang sebagian besar sudah hilang. Mengirimkan dua puluh file ikon membuat repo Anda membengkak dan tidak memberikan keuntungan yang terukur.

HTML

Letakkan file di root situs Anda dan tambahkan ini ke <head>:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Dan dalam manifest:

"icons": [
  { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
  { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]

Desain untuk 16 piksel

Bagian yang sulit bukanlah ekspor, tetapi logo lengkap berubah menjadi tidak jelas di 16x16. Beberapa hal yang membantu:

• Gunakan fragmen, bukan seluruh logo. Satu huruf, satu glif, satu bentuk. Wordmark tidak dapat dibaca pada ukuran tab.
• Mulai dengan persegi. Jika sumber Anda adalah logo lebar, potong menjadi persegi terlebih dahulu sehingga generator tidak menambahkan ruang kosong di sekitarnya.
• Pertahankan kontras tinggi. Garis tipis hilang. Bentuk solid bertahan.
• Tentukan latar belakang. PNG transparan beradaptasi dengan chrome browser yang terang dan gelap; jika merek Anda gelap, pertimbangkan untuk memberikannya ubin berwarna solid sebagai gantinya. Anda dapat menghapus latar belakang dari tangkapan layar logo dalam hitungan detik jika Anda hanya memiliki JPG datar.
• Perhatikan safe area. Android menutupi ikon menjadi lingkaran dan squircles, jadi biarkan kira-kira padding 10% di sekitar tepi karya 512 Anda.

Jika Anda mencocokkan latar belakang favicon dengan warna merek situs Anda, image color picker akan menarik hex yang tepat dari tangkapan layar yang ada — berguna juga untuk meta tag theme-color.

Buat seluruh set sekaligus

Jangan unggah apa pun: lepaskan PNG atau SVG persegi ke dalam favicon generator gratis berbasis browser dan itu menghasilkan .ico, Apple touch icon, dan PNG 192/512 secara lokal, di tab Anda sendiri. Tidak ada yang dikirim ke server, tidak ada pendaftaran, dan tidak ada salinan logo yang belum dirilis Anda yang berakhir di bucket penyimpanan orang lain.

Kemudian perkecil browser Anda, lihat tab, dan ajukan satu-satunya pertanyaan yang penting: dapatkah Anda mengatakan apa itu?