Pencarian “ukuran favicon” masih menampilkan daftar lima belas berkas warisan 2014. Dalam praktiknya, enam dimensi kini mencakup tab peramban, hasil penelusuran, iOS, Android, dan PWA. Berikut ukuran dan alasannya.
Ukuran yang benar-benar Anda butuhkan
Setiap baris sesuai dengan penggunaan terdokumentasi dalam paket yang disarankan. Tabel mengutamakan kumpulan kecil yang kompatibel lintas platform daripada banyak varian lama.
| Berkas | Dimensi | Kegunaan |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Tab, markah, peramban lama, perayap |
| favicon.svg | vektor, persegi | Peramban modern, tajam pada setiap ukuran, mendukung mode gelap |
| favicon-96x96.png | 96×96 | Hasil penelusuran Google di perangkat seluler |
| apple-touch-icon.png | 180×180 | Layar utama iOS dan iPadOS, tanpa transparansi |
| web-app-manifest-192x192.png | 192×192 | Layar utama Android, dideklarasikan dalam manifes web |
| web-app-manifest-512x512.png | 512×512 | Layar pembuka PWA, versi “maskable” |
Mengapa 16, 32, dan 48 berada dalam satu .ico
ICO adalah format wadah: satu berkas dapat menyimpan beberapa gambar dan peramban memilih yang sesuai dengan tampilannya. Inilah yang diperlukan karena ukuran yang diminta berubah sesuai konteks.
16×16 digunakan untuk tab pada layar standar. 32×32 menyediakan varian untuk layar berkepadatan tinggi dan antarmuka peramban lainnya. 48×48 melengkapi wadah sekaligus mengikuti aturan kelipatan 48 yang didokumentasikan Google untuk favicon hasil penelusuran.
Menggunakan .ico yang hanya berisi 16×16 merupakan kesalahan paling umum: pada layar Retina, ikon diperbesar dan selalu tampak buram.
180×180 untuk iOS, 192 dan 512 untuk Android
iOS tidak membaca manifes web untuk ikon layar utama: sistem mencari tag apple-touch-icon. Satu ukuran, 180×180, sudah cukup untuk semua iPhone dan iPad terbaru. Sistem memperkecilnya sendiri untuk perangkat lama.
Android menggunakan manifes web. Dua entri sudah cukup: 192×192 untuk ikon layar utama dan 512×512 untuk layar pembuka saat situs dipasang sebagai aplikasi. Versi 512 sebaiknya dideklarasikan dengan purpose “maskable”, artinya desainnya tetap sesuai saat dipotong menjadi lingkaran atau persegi membulat.
Untuk ikon maskable, tempatkan bagian penting di dalam 80% area tengah. Bagian di luarnya dapat dipotong, tergantung produsen ponsel.
Gambar sumber yang sebaiknya digunakan
Sumber terbaik adalah SVG: format ini dapat diskalakan ke semua ukuran di atas tanpa penurunan kualitas. Jika tidak ada, gunakan PNG persegi minimal 512×512 piksel agar bahkan ikon pembuka Android dibuat dengan memperkecil, bukan memperbesar gambar.
Logo mendatar dengan teks tidak cocok untuk 16×16: pada ukuran itu, kata berubah menjadi gumpalan tiga piksel. Ambil simbolnya saja atau mulai dengan satu atau dua huruf di atas latar belakang yang kontras.
Terakhir, periksa kontras pada latar terang dan gelap: logo hitam menghilang di tab bertema gelap. Untuk itulah varian gelap favicon SVG disediakan.
Ukuran yang tidak lagi diperlukan
Generator lama masih menghasilkan berkas untuk integrasi terdahulu, seperti ubin Windows yang menggunakan mstile-150x150.png dan browserconfig.xml. Tambahkan hanya jika daftar dukungan Anda secara eksplisit mencakup antarmuka tersebut.
Rangkaian panjang apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144, dan 152x152 berasal dari masa ketika iOS belum dapat mengubah ukuran. Satu gambar 180×180 menggantikan semuanya.
Menghapus deklarasi yang tidak digunakan menyederhanakan repositori dan HTML Anda. Periksa peramban dan platform sasaran sebelum menghapus integrasi yang sudah ada.
Sumber primer
Pertanyaan umum
Apakah favicon.ico masih diperlukan?
Ya, tetapi cukup di direktori akar situs. Peramban modern lebih memilih SVG, tetapi banyak perayap, agregator, dan klien surel masih meminta /favicon.ico tanpa membaca HTML. Berkasnya hanya beberapa kilobita: pertahankan.
Ukuran favicon apa yang digunakan Google dalam hasil penelusuran?
Google meminta ikon dengan panjang sisi kelipatan 48 piksel dan biasanya menampilkannya pada 48×48. PNG 96×96 atau SVG sudah mencukupi. Ikon harus dapat dirayapi dan tidak diblokir robots.txt.
Bolehkah favicon berbentuk persegi panjang?
Secara teknis boleh, secara visual tidak ideal. Setiap konteks tampilan menyediakan ruang persegi: gambar persegi panjang akan terdistorsi atau dipusatkan dengan ruang kosong di sisinya. Selalu mulai dari persegi, dengan ruang tambahan di sekitar simbol jika perlu.