Generator Favicon
Buat favicon dari huruf, emoji, atau gambar: favicon.ico multi-ukuran, PNG 16–512 px, Apple touch icon, web manifest, dan tag link HTML. Semua di browser.
Maksimal 3 karakter, mis. "A", "AK", atau "🚀".
Apa itu Generator Favicon?
Buat set favicon lengkap untuk situs web Anda dari huruf atau emoji (dengan warna dan bentuk pilihan Anda) atau dari sebuah gambar. Anda mendapatkan favicon.ico multi-ukuran (16, 32, dan 48 px), ikon PNG berukuran 16, 32, 48, 180 (Apple touch icon), 192, dan 512 px, site.webmanifest, serta tag <link> HTML untuk ditempel ke <head> Anda.
Cara menggunakan Generator Favicon
- Pilih Sumber: Teks atau emoji, atau Gambar (gambar persegi paling baik).
- Atur Bentuk, Latar belakang, dan Warna teks, serta Nama aplikasi (untuk manifest).
- Klik Unduh favicon.ico dan unduh file PNG yang Anda butuhkan dari pratinjau.
- Salin HTML untuk <head> dan site.webmanifest, lalu taruh semua file di folder root situs Anda.
Contoh
Text "A", Rounded, Background #4f46e5
<link rel="icon" href="/favicon.ico" sizes="48x48"> <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">
Ditambah favicon.ico (16, 32, 48 px) dan enam file PNG.
Kapan menggunakan Generator Favicon
Pakai untuk situs web baru, proyek sampingan, alat internal, dan situs dokumentasi. Jika Anda punya logo yang detail, buat versi sederhana untuk 16 dan 32 px, karena detail halus hilang pada ukuran itu. Gunakan juga favicon SVG jika Anda ingin ikon tajam yang menyesuaikan mode gelap.
Cara kerja Generator Favicon
Setiap ukuran digambar pada canvas terpisah: bentuk diisi dengan warna latar dan hingga tiga karakter ditempatkan di tengah dan diskalakan sesuai ukuran ikon, atau gambar dipotong di tengah menjadi persegi dan diubah ukurannya dengan penghalusan berkualitas tinggi. Setiap canvas diekspor sebagai PNG. File .ico dirakit byte demi byte: header ICONDIR 6 byte, satu entri direktori 16 byte per ukuran (lebar, tinggi, 32 bpp, ukuran data, dan offset), serta gambar PNG yang disematkan setelahnya, yaitu format PNG-in-ICO yang didukung semua browser saat ini dan Windows Vista ke atas. Apple touch icon 180 px selalu persegi dan buram karena iOS membulatkan sudutnya sendiri.
Kasus Penggunaan Umum
- Membuat favicon huruf atau emoji untuk proyek sampingan dalam hitungan detik
- Membuat semua ukuran ikon dari logo persegi
- Menambahkan Apple touch icon dan web manifest untuk instalasi di layar utama
- Membuat favicon.ico multi-ukuran sungguhan untuk browser lama
Pertanyaan Umum
Apakah saya masih memerlukan favicon.ico?
Browser meminta /favicon.ico secara otomatis, dan beberapa alat serta pembaca RSS hanya mencari di sana, jadi tetap layak disediakan di samping ikon PNG.
Mengapa favicon saya tidak berubah?
Browser menyimpan cache favicon dengan agresif. Lakukan hard refresh, buka URL ikon secara langsung, atau tambahkan query string versi pada tag link.
Apakah gambar saya diunggah?
Tidak. Semua ikon dan file .ico dibuat di browser Anda.