Setiap proyek serius butuh favicon yang jelas di tab browser, ikon Apple touch untuk iOS, dan ikon aplikasi untuk Android dan PWA. Alat ini membantu Anda membuat semuanya dari satu gambar: unggah logo persegi, pilih ukuran, unduh PNG, dan salin cuplikan HTML ke situs Anda.
Mengapa favicon dan ikon aplikasi penting
- Favicon — ikon kecil di tab browser dan bookmark. Tanpanya, tab terlihat generik dan merek Anda kurang dikenali.
- Ikon Apple touch — dipakai saat pengguna menambahkan situs ke layar utama di iPhone dan iPad. Ukuran yang tepat (mis. 180×180) membuat ikon tetap tajam.
- Ikon PWA / Android — diperlukan untuk “Tambah ke layar utama” dan pemasangan. Ukuran umum: 192×192 dan 512×512.
Satu gambar sumber persegi bisa memenuhi semuanya. Generator berjalan sepenuhnya di browser; logo Anda tidak pernah meninggalkan perangkat Anda.
Gambar sumber yang disarankan
Gunakan gambar persegi (PNG atau SVG) minimal 512×512 piksel. Resolusi lebih tinggi tidak masalah; alat akan mengecilkannya. Hindari gambar terlalu kecil atau terdistorsi agar ikon tetap tajam di layar berdensitas tinggi.
Mulai cepat dengan alat
- Unggah — Klik “Pilih file” dan pilih logo Anda (PNG atau SVG, persegi, 512×512 atau lebih besar).
- Latar — Pilih warna latar jika logo punya transparansi; juga dipakai sebagai
theme-colordi cuplikan. - Ukuran — Centang ukuran yang Anda butuhkan (favicon 16/32, Apple 180, PWA 192/512, dll.).
- Unduh — Klik pratinjau untuk mengunduh ukuran itu sebagai PNG, atau “Unduh semua sebagai ZIP” untuk mendapat semuanya sekaligus.
- Cuplikan — Salin blok HTML dan tempel ke
<head>situs Anda. Unggah PNG ke server (mis./assets/icons/) dan sesuaikan path di cuplikan bila perlu.
Di mana menaruh file
Pengaturan umum:
- Taruh PNG favicon dan ikon di folder seperti
/assets/icons/atau di root. - Perbarui cuplikan agar nilai
hrefmengarah ke path tersebut (mis./assets/icons/favicon-32x32.png). - Tambahkan
site.webmanifestuntuk PWA dengan path yang sama ke ikon 192×192 dan 512×512.
Ringkasan
Generator favicon dan ikon aplikasi memungkinkan Anda dari satu logo mendapat semua ukuran yang dibutuhkan dan cuplikan siap tempel untuk <head>. Gunakan gambar persegi beresolusi baik, unduh PNG, dan sisipkan cuplikan ke proyek Anda.