Generator favicon
Jangan launch dengan ikon tab default. Unggah satu gambar lalu ekspor set favicon yang diharapkan browser, iOS, Android, dan PWA.
Unggah gambar
PNG, JPG, dan SVG didukung. Sumber 512x512 atau lebih besar paling baik.
Pratinjau live
Cuplikan HTML
<!-- Add inside <head> --> <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">
Praktik baik favicon
Mengapa banyak ukuran penting
Browser, bookmark, pinned tab, prompt instalasi, dan shortcut mobile meminta ukuran berbeda. Set lengkap menjaga ikon tetap tajam, bukan membiarkan platform memperbesar file kecil.
PNG vs ICO
Browser modern menangani ikon PNG dengan baik. ICO masih berguna untuk kompatibilitas lama, sedangkan PNG biasanya memberi transparansi lebih bersih dan asset handling lebih sederhana.
Desain untuk ukuran kecil
Favicon sering dilihat pada 16x16. Bentuk sederhana, kontras kuat, dan detail lebih sedikit biasanya lebih bertahan daripada logo penuh yang dipaksa masuk ke tab.
Panduan ikon platform
Browser desktop
Dipakai untuk tab, bookmark, dan daftar riwayat browser.
iOS / iPhone
Dipakai saat website ditambahkan ke home screen. Artwork opaque biasanya paling aman.
Android Chrome
Dipakai bersama web manifest untuk prompt instalasi, splash screen, dan task switcher.
Panduan instalasi cepat
Unduh dan ekstrak
Gunakan tombol unduh untuk mengekspor file zip berisi asset PNG, file manifest, dan cuplikan head.
Unggah ke root publik
Tempatkan file hasil ekstraksi di lokasi yang bisa diakses publik, seperti direktori public website.
Tambahkan markup head
Salin snippet head yang dibuat ke document head dan bersihkan cache browser untuk memverifikasi ikon baru.
Pertanyaan umum
Apa isi file zip?
Zip berisi PNG favicon browser umum, Apple touch icon, ukuran ikon Android, dan file site.webmanifest.
Apa itu site.webmanifest?
Ini file manifest JSON yang memberi tahu browser bagaimana website berperilaku saat diinstal ke home screen atau dibuka seperti app.
Bagaimana memakai ikon ini?
Unggah file yang dibuat ke root publik dan sertakan markup head yang dihasilkan pada halaman yang perlu menampilkan favicon.
Mengapa favicon lama masih muncul?
Browser menyimpan cache favicon dengan agresif. Coba hard refresh, hapus site data, ubah URL ikon, atau uji di profil browser baru.
Apakah favicon harus sama persis dengan app icon?
Sebaiknya terasa masih satu keluarga, tetapi tidak harus identik. Banyak brand memakai mark yang disederhanakan untuk ukuran favicon dan ikon lebih kaya untuk app terinstal.