Ukuran favicon: file apa saja yang dibutuhkan, dan berapa px

Kenapa file favicon sebanyak ini?

Favicon adalah ikon kecil situs Anda — muncul di tab browser, daftar bookmark, hasil pencarian, dan layar utama ponsel. Ia wajah situs; tanpanya situs terasa belum selesai.

Masalahnya, tiap tempat menuntut ukuran dan format berbeda. Karena itu favicon bukan satu file, melainkan satu set kecil.

Set yang Anda butuhkan

• •favicon.ico — 16, 32, dan 48px dalam satu file. Dipakai bilah alamat, tab, dan bookmark; standar tertua dan tetap wajib
• •PNG 16px dan 32px — versi tajam yang dipakai browser modern di tab
• •apple-touch-icon 180px — dipakai saat situs ditambahkan ke layar utama iPhone atau iPad
• •PNG 192px dan 512px — untuk layar utama Android dan pemasangan PWA, didaftarkan di site.webmanifest

Menyiapkan gambar sumber

Cara yang benar: mulai dari gambar persegi besar (512px ke atas) lalu diperkecil. Memperbesar gambar kecil hanya membuatnya buram.

Ikon harus tetap dikenali pada 16px, jadi makin sederhana makin baik. Satu simbol lebih unggul daripada logo penuh teks; sedikit margin di tepi mencegah kesan sesak; latar transparan cocok untuk tema terang maupun gelap.

Memasangnya di HTML

Unggah file ke folder akar situs, lalu tunjuk dengan tag link di head: rel="icon" untuk ICO dan PNG, rel="apple-touch-icon" untuk ikon 180px, dan rel="manifest" untuk site.webmanifest.

Sebagai cadangan, kebanyakan browser menemukan favicon.ico di akar situs meski tanpa tag. Namun agar PNG per ukuran dan ikon layar utama bekerja benar, pasang tag-nya.

Jangan rakit set-nya manual

Mengecilkan gambar satu per satu lalu mengemas ICO secara manual itu melelahkan. Letakkan satu gambar di pembuat favicon Image Converter NOW — favicon.ico, semua PNG, site.webmanifest, dan tag HTML siap tempel langsung jadi dalam satu ZIP.

Semua diproses di browser — logo Anda tidak pernah diunggah ke server.