Ukuran Favicon Terbaik untuk Situs Web

favicon diskalakan ke banyak piksel fisik: 16×16 di tab, 32×32 di bilah bookmark Retina, 180×180 di layar beranda iPhone, 512×512 di layar pembuka PWA. Satu gambar tidak dapat melayani semuanya dengan baik.

Meningkatkan skala sumber kecil menghasilkan keburaman. Menurunkan skala 1024x1024 yang mendetail tanpa pengujian akan menghilangkan garis-garis halus. Perbaikannya adalah sekumpulan kecil ekspor yang dibuat khusus, atau satu .ico multi-ukuran yang menyematkan bingkai desktop umum.

Pengiriman setiap ukuran yang tercantum di postingan blog lama adalah pemborosan. Pengiriman yang terlalu sedikit meninggalkan kesenjangan yang terlihat pada satu platform. Matriks di bawah mencerminkan permintaan nyata yang diukur pada browser tahun 2026.

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

Tab desktop biasanya menampilkan ikon piksel 16×16 CSS, yang dipetakan ke piksel perangkat 16×16 atau 32×32 bergantung pada kepadatan tampilan.

Bilah bookmark dan tab yang disematkan sering kali menggunakan 32×32 atau 48×48. Chromium dapat memilih frame tertanam terdekat dari favicon.ico secara otomatis.

Ketiga ukuran tab umum (16, 32, 48) cocok dengan nyaman di dalam satu multi-ukuran .ico. Itulah sebabnya kontainer .ico tetap menjadi format pengiriman desktop yang paling efisien.

Windows Menu mulai, pin bilah tugas, dan pintasan File Explorer dapat meminta 24×24, 32×32, 48×48, 64×64, 128×128, atau 256×256 bergantung pada konteks dan skala tampilan.

Microsoft mendokumentasikan 16, 24, 32, 48, 64, 128, dan 256 sebagai kumpulan praktik untuk aplikasi Windows. Web favicon mendapat manfaat dari menggabungkan setidaknya 16 hingga 256 di favicon.ico.

macOS lebih memilih .icns untuk aplikasi asli tetapi dengan senang hati menggunakan .ico dan PNG untuk pintasan web. iOS mengabaikan .ico untuk ikon layar beranda dan menginginkan 180×180 PNG khusus melalui ikon sentuh apel.

Manifes aplikasi web memerlukan ikon dengan tujuan apa pun dan dapat disamarkan secara opsional. Ukuran umum adalah 192×192 dan 512×512 PNG.

Android Chrome menggunakan ikon manifes untuk menginstal UI dan layar splash. Sumber 512×512 diturunkan skalanya dengan rapi; tampilan 192×192 saja terlihat lembut di ponsel kelas atas.

iOS tidak membaca ikon manifes untuk penempatan layar beranda. Anda harus mendeklarasikan <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">.

16×16 — tab browser (kepadatan 1×). 32×32 — tab dan bookmark di layar Retina. 48×48 — beberapa konteks UI Windows dan penggunaan bookmark lama.

64×64 dan 128×128 — pintasan Windows pada skala lebih tinggi. 256×256 — ubin yang disematkan Windows dan pratinjau DPI tinggi.

180×180 — ikon sentuh apel (iOS / iPadOS). 192×192 dan 512×512 — Ikon manifes PWA untuk Android dan petunjuk penginstalan.

Blog pribadi: favicon.ico hanya pada 16/32/48. Dapat diterima jika Anda tidak peduli dengan pemolesan layar beranda iOS.

Situs pemasaran perusahaan: bundel .ico plus ikon sentuh apel 180×180 plus 32×32 PNG <link> untuk tab Retina eksplisit.

PWA yang dapat diinstal: .ico penuh, ikon sentuh apel, manifes 192 + 512, SVG opsional untuk chrome UI yang dapat diskalakan.

Aplikasi desktop elektron: Windows .ico dengan 16–256; macOS .icns secara terpisah jika Anda mendistribusikannya di luar browser.

Multi-ukuran favicon.ico (16, 32, 48, 64, 128, 256) pada /favicon.ico.

apple-touch-icon.png pada 180×180 untuk layar beranda iOS.

Satu 512×512 PNG dalam site.webmanifest untuk permukaan pemasangan Android.

Ketiganya mencakup sekitar 95% permintaan ikon dunia nyata. Tambahkan SVG bila Anda menginginkan penskalaan tak terbatas dan gaya mode gelap di tab modern.

Apakah saya memerlukan 16×16 PNG jika berada di dalam .ico? Tidak, kecuali Anda menginginkan <link rel="icon" sizes="16x16"> eksplisit untuk debugging.

Apakah 120×120 masih diperlukan? Itu ukuran iOS yang lama. Safari modern mengharapkan 180×180.

Bagaimana dengan 64×64 favicon? Berguna di dalam .ico untuk Windows; jarang dibutuhkan sebagai PNG yang berdiri sendiri.

Bisakah saya melewati 256×256? Hanya jika Anda tidak pernah peduli dengan pratinjau pintasan DPI tinggi Windows. Sebagian besar tim memasukkannya.

Ikon iOS memiliki sudut membulat dan terlihat terpotong: itulah masking iOS — desain dengan padding yang aman, bukan bug di file Anda.

Penginstalan PWA menunjukkan ikon umum: ikon manifes hilang atau di bawah minimum 192x192. Validasi JSON dengan Chrome DevTools → Aplikasi.

Ikon tab lembut di Retina Mac: pastikan favicon.ico berisi bingkai 32x32, tidak hanya 16x16.

Unduhan .ico besar: Anda menyematkan 256×256 BMP yang tidak terkompresi. Bangun kembali dengan kompresi PNG di dalam wadah.

Piksel CSS bukan piksel fisik. Slot tab 16×16 pada layar 2× sering kali memuat bitmap 32×32 untuk ketajaman.

Itulah sebabnya favicon.ico yang berisi 16 dan 32 frame mengungguli satu 16×16 PNG di Retina MacBook dan laptop Windows DPI tinggi.

Android PWA menampilkan ikon manifes pada layar pembuka dengan resolusi perangkat penuh — sumber 192×192 yang direntangkan ke ponsel 1440p terlihat lembut; 512×512 menurunkan skala dengan rapi.

iOS menerapkan topeng dan radius sudutnya sendiri ke aset ikon sentuh apel. Desain dengan bantalan yang aman sehingga bagian tepi yang penting tidak terpotong oleh tupai.

Saat pengujian, tangkapan layar tab pada zoom browser 100% dan penskalaan OS 200%. Jika keduanya terlihat bagus, matriks ukuran Anda mungkin benar.

Unduh favicon.ico dan buka di alat yang mencantumkan bingkai yang disematkan. Konfirmasikan 16, 32, 48, dan setidaknya ada satu bingkai berukuran tinggi.

Ambil apple-touch-icon.png dan periksa dimensi di pemeriksa gambar mana pun — harapkan 180×180, bukan 120×120 dari templat yang sudah ketinggalan zaman.

Buka site.webmanifest dan verifikasi ikon[] berukuran 192×192 dan 512×512 dengan jalur dan jenis gambar/png yang benar.

Muat situs Anda di Chrome DevTools → Aplikasi → Manifest. Entri yang hilang atau tidak valid menampilkan peringatan sebelum pengguna melihat dialog pemasangan yang rusak.

Simpan spreadsheet yang memetakan setiap file ke konsumennya (tab, iOS, PWA, Windows). Di masa depan, Anda tidak perlu merekayasa balik folder aset selama rebranding.

Kelas perangkat baru muncul perlahan di wilayah favicon. Ikon manifes 512×512 saat ini mencakup UI pemasangan tablet dan lipat yang lebih baik daripada 192 saja.

Hindari ukuran eksotik (96×96, 120×120) kecuali dokumen platform tertentu masih mewajibkannya — ukuran tersebut menambah beban penulisan tanpa manfaat yang luas.

Simpan vektor master atau raster 1024×1024 di repo desain Anda meskipun Anda tidak pernah menyediakankannya. Platform masa depan mungkin meminta ikon manifes yang lebih besar.

Otomatiskan regenerasi dari master sehingga ketika ukuran baru yang direkomendasikan muncul, Anda menjalankan ulang skrip alih-alih mengekspor secara manual di Photoshop.