Generator favicon
Ubah logo jadi paket favicon lengkap untuk situsmu.
Jalan di browser kamu. File kamu tidak pernah keluar dari perangkat.
- ICO plus semua ukuran PNG
- Kode HTML siap pakai
- Padding bisa diatur
Cara membuat favicon
- Taruh logo atau gambar persegi di sini.
- Atur padding dan latar belakang kalau perlu.
- Unduh ZIP-nya dan tempel kode HTML-nya.
Apa saja isi ZIP-nya
| File | Ukuran | Dipakai oleh |
|---|---|---|
| favicon.ico | 16, 32, dan 48 px dalam satu file | Browser lama, bookmark |
| favicon-16x16.png | 16 x 16 | Tab browser |
| favicon-32x32.png | 32 x 32 | Tab browser, taskbar |
| apple-touch-icon.png | 180 x 180 | Layar utama iPhone dan iPad |
| android-chrome-192x192.png | 192 x 192 | Layar utama Android |
| android-chrome-512x512.png | 512 x 512 | Splash screen dan ikon aplikasi Android |
| site.webmanifest | File teks | Memberi tahu Android ikon mana yang dipakai |
Ke mana file-file ini harus ditaruh
Upload setiap file dari ZIP ke folder root situsmu, folder yang sama dengan index.html, bukan subfolder. Lalu tempel kode HTML yang diberikan di dalam head setiap halaman, atau ke template header bersama situsmu kalau ada.
Tips padding dan latar belakang
- Tambahkan padding 10 sampai 15 persen untuk logo yang menyentuh tepi kotaknya, supaya tidak terlihat terpotong di ukuran 16 piksel.
- Aktifkan isi latar belakang kalau logomu punya transparansi dan terlihat aneh di atas warna tab browser.
- Logo yang sederhana dan kontras tinggi lebih mudah terbaca di 16x16 dibanding logo dengan detail halus atau teks tipis.
FAQ Generator favicon
Apa isi ZIP-nya?
favicon.ico dengan ukuran 16, 32, dan 48 piksel, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, dua PNG android-chrome, dan file site.webmanifest.
File-file ini ditaruh di mana?
Upload ke folder root situsmu, lalu tempel kode HTML-nya di dalam head setiap halaman.
Apakah gambarku harus sudah persegi?
Logo persegi memberi hasil paling rapi. Gambar yang tidak persegi disesuaikan ke dalam kotak persegi dengan padding, jadi tidak ada yang tertarik memanjang.
Apa fungsi padding?
Ini menambahkan ruang kosong di sekitar logo kamu di dalam kotak persegi, supaya desainnya tidak menyentuh tepi di ukuran ikon yang kecil.
Apakah gambarku diupload?
Tidak. Setiap ukuran ikon dibuat di browser kamu, jadi gambarnya tidak pernah keluar dari perangkatmu.
Apakah aku butuh keenam file itu, atau cukup favicon.ico saja?
Browser modern kebanyakan pakai file PNG dan site.webmanifest. favicon.ico dipertahankan untuk browser lama dan beberapa bookmark bar, jadi upload semuanya untuk dukungan paling luas.
Ukuran gambar berapa yang sebaiknya jadi awal?
Minimal 512 kali 512 piksel. Ikon utamanya dibuat di ukuran itu, jadi gambar sumber yang lebih kecil akan diregangkan ke atas dan bisa terlihat kurang tajam.
Apakah file manifest-nya perlu diedit?
site.webmanifest yang dibuat memakai teks placeholder untuk nama situs. Buka di text editor setelahnya dan perbarui kolom name dan short_name supaya sesuai situsmu.