Favicon bukan lagi satu gambar. Browser, ponsel, dan sistem operasi masing-masing mengambil ukuran berbeda untuk slot berbeda — tab browser, bookmark, layar utama iOS, pengalih aplikasi Android. Kirim satu PNG 32×32 dan ia akan berfungsi di tab tetapi tampak kabur saat seseorang menyimpan situs Anda ke ponselnya. Kirim set lengkap dan setiap permukaan mendapat ikon yang tajam.
Berikut persis ukuran mana yang Anda butuhkan, apa fungsi masing-masing, dan mengapa daftarnya tampak seperti itu.
Ukuran yang penting
Kebanyakan situs tercakup oleh enam ukuran PNG plus .ico warisan. Berikut referensinya:
| Ukuran | Format | Di mana dipakai |
|---|---|---|
| 16×16 | PNG (dalam .ico) | Tab browser, bilah alamat, bookmark |
| 32×32 | PNG (dalam .ico) | Tab Retina, pintasan taskbar Windows |
| 48×48 | PNG | Ikon situs Windows, beberapa permukaan Android |
| 180×180 | PNG | Layar utama iOS (apple-touch-icon) |
| 192×192 | PNG | Layar utama Android, instalasi PWA |
| 512×512 | PNG | Splash screen PWA, toko aplikasi, DPI-tinggi |
File favicon.ico adalah wadah yang membundel ukuran kecil (biasanya 16 dan 32, kadang 48). Browser lama dan Windows mencarinya berdasarkan nama di root situs Anda, jadi ia masih layak dikirim meski browser modern dengan senang hati memakai PNG.
Mengapa begitu banyak? Tur singkat
Alasan daftarnya panjang adalah ikon muncul dalam ukuran fisik yang sangat berbeda.
16 dan 32 adalah ikon tab sehari-hari. 16 adalah ukuran klasik; 32 mencakup layar DPI-tinggi ("Retina") di mana 16 akan tampak lembek. Browser memilih mana pun yang cocok dengan kepadatan piksel.
48 adalah urusan Windows — ia dipakai untuk pintasan situs dan muncul lebih tajam di beberapa tempat yang tak tercakup baik oleh 32.
180 adalah apple-touch-icon milik Apple. Ketika seseorang mengetuk "Tambahkan ke Layar Utama" di iPhone atau iPad, iOS memakai ini. Buat salah dan iOS entah akan mengambil tangkapan layar yang diperkecil atau menampilkan ubin huruf polos — keduanya tak tampak seperti merek Anda.
192 dan 512 adalah ukuran Progressive Web App, dideklarasikan dalam file manifest.webmanifest. 192 adalah ikon layar-utama Android; 512 mengumpani splash screen dan diperkecil untuk apa pun lain yang dibutuhkan OS. Jika situs Anda bisa diinstal, kedua ini tak bisa ditawar.
Apakah Anda butuh lebih besar dari 512?
Tidak. 512×512 adalah plafon praktis untuk favicon web — spesifikasi webmanifest dan setiap platform besar mentok sekitar situ. Jika seni sumber Anda 1024 atau lebih besar, itu tak masalah sebagai gambar awal (lebih banyak detail untuk diperkecil), tetapi Anda tak mengirim favicon 1024. Apa pun di atas 512 cuma menambah byte yang tak dipakai siapa pun.
Satu aturan yang penting saat naik: mulai dari sumber besar dan persegi. Asli 512×512 atau 1024×1024 diperkecil dengan bersih ke setiap ukuran di bawahnya. Mulai dari gambar mungil dan ukuran kecil tampak keruh karena tak pernah ada cukup detail untuk dipertahankan.
Rancang agar bertahan di 16×16
Ukuran tersulit adalah yang terkecil. Pada 16×16 logo yang rinci menjadi noda yang tak terbaca. Beberapa kiat yang berlaku di berbagai situs:
- Sederhanakan. Wordmark penuh takkan terbaca pada 16px. Pakai satu huruf, monogram, atau bagian paling dikenal dari tanda Anda.
- Jaga kontras tinggi agar bentuknya tetap terbaca di latar tab terang maupun gelap.
- Sisakan sedikit padding — ikon yang menyentuh keempat tepi terasa sesak di tab.
- Uji kecil. Perkecil zoom browser Anda, atau cukup lihat tab sebenarnya. Jika Anda tak bisa membedakan apa itu sekilas, sederhanakan lebih jauh.
Menghasilkan seluruh set
Anda tak membangun ini dengan tangan. Jatuhkan satu gambar persegi ke Generator Favicon dan ia menghasilkan set lengkap sekaligus — favicon.ico, PNG 16/32/48/180/192/512, webmanifest siap-pakai, dan snippet HTML <head> persis untuk ditempel. Semuanya berjalan di browser Anda: gambar tak pernah diunggah, dan setelah kunjungan pertama Anda, alat berfungsi offline.
HTML yang akan Anda dapatkan
Sebagai referensi, pengaturan favicon lengkap tampak kira-kira seperti ini di <head> Anda:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Generator menuliskan ini untuk Anda, jadi Anda bisa menempelnya langsung. Cakup enam ukuran plus .ico dan manifest, dan setiap browser, ponsel, dan OS mendapat ikon tajam yang dimintanya.