Apa itu favicon sebenarnya
Favicon, singkatan dari "favorite icon", adalah gambar kotak kecil yang mewakili sebuah website. Ia lahir pada akhir 1990-an sebagai satu berkas berukuran 16x16 piksel bernama favicon.ico, dan untuk waktu yang lama cuma itu ceritanya. Sekarang tidak lagi. Logo mungil yang sama kini harus tampil tajam di tab browser pada laptop beresolusi tinggi, di bookmark, di layar utama iPhone pada 180 piksel, di perangkat Android, di dalam aplikasi web yang bisa diinstal, dan kadang di sebelah listing Anda pada mesin pencari. Masing-masing tempat itu meminta ukuran berbeda, dan sebagian di antaranya minta nama berkas yang spesifik.
Inilah alasan saran "cukup unggah 16x16" dari tahun-tahun lalu sekarang cuma menghasilkan tampilan yang kabur. Gambar mungil yang dibesarkan menjadi ikon layar utama 180 piksel akan tampak lembek dan pecah. Pendekatan yang benar adalah mulai dari satu gambar besar yang bersih, lalu menghasilkan sekumpulan kecil berkas dengan ukuran yang tepat darinya.
Kenapa satu ukuran tidak lagi cukup
Permukaan yang berbeda menarik ikon yang berbeda. Memahami ke mana masing-masing pergi membuat daftar ukuran di bawah terasa logis, bukan asal-asalan:
- Tab browser dan bookmark memakai favicon klasik, biasanya gambar 16x16 atau 32x32, dengan 32 lebih disukai pada layar high-DPI modern.
- Layar utama iPhone dan iPad memakai apple-touch-icon 180x180 saat seseorang menambahkan halaman Anda ke layar utama.
- Android dan aplikasi web yang bisa diinstal (PWA) memakai ikon 192x192 dan 512x512 yang didefinisikan dalam sebuah berkas manifest kecil.
- Windows dan layar beresolusi lebih tinggi terbantu oleh ukuran antara seperti 48, 64, 96, 128, dan 256 supaya ikon tidak pernah diperbesar jauh dari ukuran aslinya.
- Hasil pencarian bisa menampilkan favicon Anda di sebelah judul halaman, yang diam-diam memperkuat brand Anda di setiap listing.
Ukuran yang benar-benar Anda butuhkan di 2026
Anda tidak perlu menebak atau membuat ratusan berkas. Ini kumpulan praktis yang menutup semua browser dan perangkat arus utama, dan persis cocok dengan apa yang diberikan generator yang baik:
| Berkas | Ukuran | Tempat kemunculan |
|---|---|---|
| favicon.ico | 16, 32, 48 (multi-ukuran) | Cadangan universal: tab, bilah alamat, bookmark, browser lama |
| favicon-16x16.png | 16x16 | Tampilan tab dan bookmark kecil |
| favicon-32x32.png | 32x32 | Ikon tab standar pada browser desktop modern |
| apple-touch-icon.png | 180x180 | Pintasan layar utama iPhone dan iPad |
| android-chrome-192x192.png | 192x192 | Layar utama Android dan instalasi PWA |
| android-chrome-512x512.png | 512x512 | Splash screen Android dan PWA beresolusi tinggi |
| PNG 48, 64, 96, 128, 256 px | beragam | Layar high-DPI dan Windows, supaya ikon jarang diperbesar |
Total ada sebelas berkas: satu ICO, sepuluh PNG, plus manifest kecil dan potongan HTML. Membuat semuanya dengan tangan di editor gambar itu melelahkan dan gampang salah. Membuat semuanya dalam satu langkah adalah inti dari bagian berikutnya.
Cara tercepat: buat seluruh paket sekaligus
Alih-alih mengekspor ukuran satu per satu, mulailah dari satu gambar berkualitas tinggi dan biarkan generator menyusun kumpulan lengkapnya. Begini alurnya dengan favicon generator:
- Buka favicon generator lalu unggah gambar sumber Anda. Format PNG, JPG, WebP, atau SVG semuanya bisa, dan SVG atau PNG besar memberi hasil paling tajam.
- Alat ini memotong gambar Anda ke tengah menjadi kotak dan me-render setiap ukuran untuk Anda: favicon.ico multi-resolusi, seluruh rentang ikon PNG dari 16 sampai 512, apple-touch-icon 180 piksel, serta ikon Android 192 dan 512.
- Unduh berkas ZIP-nya. Di dalamnya Anda dapat semua ikon, site.webmanifest siap pakai untuk dukungan PWA dan Android, plus blok kecil HTML untuk ditempel ke situs Anda.
Gambar yang Anda unggah dihapus dari server setelah diproses, jadi logo yang belum Anda luncurkan tidak tertinggal di mana pun. Hasilnya adalah kumpulan ikon lengkap yang sesuai standar dari satu kali unggah, tanpa perlu editor gambar.
HTML yang Anda tempel, dijelaskan baris demi baris
Favicon hanya bekerja kalau browser tahu di mana menemukannya. Generator memberi Anda potongan seperti ini untuk ditaruh di dalam <head> halaman Anda:
<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">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Baris demi baris, ini yang dikerjakan masing-masing:
- Baris pertama menunjuk ke favicon.ico, cadangan universal yang dipahami setiap browser, termasuk yang lama.
- Dua baris PNG memberi browser modern ikon 32x32 dan 16x16 yang lebih tajam serta membiarkannya memilih ukuran yang pas untuk layar.
- Baris apple-touch-icon adalah yang dipakai iPhone dan iPad saat seseorang menyimpan halaman Anda ke layar utama, supaya tampak seperti ikon aplikasi sungguhan, bukan tangkapan layar buram.
- Baris manifest menunjuk ke web manifest, tempat Android dan aplikasi web yang bisa diinstal membaca ikon serta detail aplikasinya.
Unggah berkas ikon dan manifest ke root situs Anda supaya path di atas ketemu, lalu browser mengurus sisanya.
Untuk apa web manifest itu
site.webmanifest adalah berkas teks kecil yang mendeskripsikan situs Anda sebagai aplikasi yang bisa diinstal. Tugas terpentingnya untuk favicon adalah mendaftar ikon 192x192 dan 512x512 yang dipakai Android dan Progressive Web App untuk layar utama dan splash screen. Kalau Anda tidak berniat membuat situs bisa diinstal, manifest ini tetap tidak merugikan dan membuat Android senang. Kalau Anda berniat, dua ikon itulah yang tepat dibutuhkannya, dan generator sudah mengisikannya untuk Anda.
Memilih dan menyiapkan gambar sumber
Pengungkit kualitas terbesar adalah gambar yang Anda pakai sebagai titik awal. Beberapa kebiasaan membuat setiap ukuran hasil generate tampak lebih baik:
- Mulai besar dan kotak. Gambar 512x512, atau SVG, menyusut dengan bersih. Sumber yang mungil selamanya cuma bisa tampak mungil.
- Jaga tetap sederhana. Favicon sering ditampilkan pada 16 piksel. Detail halus, garis tipis, dan teks kecil hilang di ukuran itu. Satu huruf tebal, sebuah simbol, atau tanda logo yang disederhanakan terbaca jauh lebih jelas ketimbang logo penuh beserta tagline-nya.
- Pakai kontras yang kuat. Ikon harus menonjol di atas tema browser terang maupun gelap. Kontras tinggi antara tanda dan latarnya menjaganya tetap terbaca di mana saja.
- Perhatikan margin. Sisakan sedikit ruang bernapas di sekeliling tanda supaya tidak terpotong saat sebuah platform membulatkan sudut ikon aplikasi.
Kalau Anda sedang menimbang format apa yang dipakai sebagai titik awal, panduan tentang WebP vs JPEG vs PNG membahas untung-ruginya, dan kalau Anda penasaran apa yang terjadi pada logo yang Anda unggah, catatan kami soal bagaimana Convertica menangani berkas Anda menjelaskan sisi privasinya.
Kesalahan umum yang membuat favicon rusak
- Cuma mengirim favicon.ico. Ia menutup tab tapi bukan layar utama iPhone atau instalasi PWA. Apple-touch-icon dan ikon manifest-lah yang mengisi celah itu.
- Path berkas salah. Kalau
hrefpada tag link tidak cocok dengan tempat Anda benar-benar mengunggah berkasnya, browser tidak menampilkan apa-apa. Taruh ikon di root situs atau perbarui path-nya agar cocok. - Menyalahkan cache browser. Favicon disimpan cache secara agresif. Setelah Anda menambah atau mengubahnya, hard refresh atau kunjungan lewat jendela penyamaran biasanya menampilkan ikon baru yang masih disembunyikan oleh reload biasa.
- Mulai dari gambar mungil. Memperbesar logo kecil ke 180 atau 512 piksel menghasilkan ikon yang lembek dan pecah. Selalu mulai dari versi bersih terbesar yang Anda punya.
FAQ
Apakah saya masih perlu favicon.ico, atau PNG saja sudah cukup?
Simpan keduanya. Browser modern dengan senang hati memakai ikon PNG, tapi favicon.ico tetap jadi cadangan universal yang aman, dan sebagian browser serta alat masih mencarinya berdasarkan nama di root situs. Kumpulan lengkap mencakup keduanya, itulah kenapa generator menghasilkan ICO berdampingan dengan PNG.
Apa bedanya ICO dan PNG di sini?
ICO adalah format lama yang bisa membungkus beberapa ukuran (16, 32, dan 48) di dalam satu berkas, itulah kenapa ia begitu pas sebagai favicon cadangan tunggal. PNG menyimpan satu ukuran per berkas tapi mendukung gambar tajam berkualitas tinggi serta transparansi, itulah kenapa ikon-ikon besar berupa PNG. Anda mau keduanya, masing-masing mengerjakan tugas yang paling cocok untuknya.
Bisakah saya pakai latar transparan?
Bisa, dan PNG mendukungnya. Latar transparan membuat ikon duduk alami di atas tema browser terang maupun gelap. Pastikan saja tandanya sendiri punya kontras yang cukup supaya tetap terlihat di keduanya.
Kenapa favicon baru saya tidak muncul?
Hampir selalu karena cache. Browser menahan favicon lebih lama ketimbang kebanyakan aset. Lakukan hard refresh, buka situs lewat jendela penyamaran, atau periksa berkas ikonnya langsung lewat URL-nya untuk memastikan ia sudah terunggah. Begitu cache bersih, ikon baru muncul.
Apakah saya perlu favicon untuk SEO?
Ini bukan faktor peringkat, tapi favicon bisa muncul di sebelah judul halaman Anda pada hasil pencarian, yang memperkuat brand dan bisa mengangkat click-through. Ini tugas kecil sekali kerja dengan hasil visual yang bertahan lama, jadi tidak ada alasan melewatkannya.
Buat favicon Anda sekarang
Kalau situs Anda berjalan tanpa favicon, atau dengan sisa buram dari tahun-tahun lalu, perbaiki dalam beberapa menit. Unggah logo Anda ke favicon generator, unduh ZIP-nya, taruh berkasnya di root situs, lalu tempel potongan HTML-nya. Kalau Anda cuma butuh satu berkas ikon ketimbang paket lengkap, konverter PNG ke ICO dan SVG ke ICO mengerjakan tugas tunggal itu, dan optimizer gambar membantu merapikan gambar sumber Anda lebih dulu.
