DevToolPal
ID

Generator Favicon

Buat favicon dari teks, emoji, atau logo Anda: favicon.ico, berbagai ukuran PNG, Apple touch icon, web manifest, dan tag HTML dalam satu ZIP.

Berjalan lokal, tidak pernah diunggah

Opsi

Sumber
Bentuk

Pratinjau

HTML untuk <head>

Fungsi alat ini

Generator Favicon mengubah sebuah huruf, emoji, atau logo Anda menjadi semua ikon yang dibutuhkan situs web modern. Alat ini merender ikon di setiap ukuran, mengemas favicon.ico, menulis web app manifest, dan memberi Anda tag <link> untuk ditempel ke <head> halaman Anda. Unduh semuanya sebagai satu ZIP.

Memulai dari teks adalah cara tercepat untuk mendapatkan ikon yang bersih: ketik satu sampai tiga karakter atau sebuah emoji, lalu pilih warna, font, dan bentuk (persegi, sudut membulat, atau lingkaran). Ikon teks juga mendapat favicon.svg yang bisa diskalakan, sehingga tetap tajam di setiap ukuran dan di layar berkerapatan tinggi.

Cara menggunakannya

  1. Pilih Teks atau Gambar sebagai sumber. Untuk gambar, tekan Pilih gambar… dan pilih PNG, SVG, atau JPG persegi.
  2. Atur Bentuk, lalu aktifkan Isi latar belakang untuk menaruh ikon di atas petak berwarna, atau matikan agar tetap transparan.
  3. Masukkan Nama situs: inilah label di bawah ikon saat seseorang menambahkan situs Anda ke layar utama ponsel, ditulis ke site.webmanifest (Android) dan tag apple-mobile-web-app-title (iOS). Lalu atur Folder ikon tempat Anda akan mengunggah file, biasanya /.
  4. Periksa pratinjaunya: ikon 16 px adalah yang dilihat orang di tab browser.
  5. Tekan Unduh ZIP, unggah file-filenya ke situs Anda, dan tempel HTML-nya ke <head>.

Contoh

Pengaturan default menghasilkan tag berikut:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="apple-mobile-web-app-title" content="My Site">

Tips

  • Browser menyimpan cache favicon dengan sangat agresif. Setelah mengganti ikon, buka halaman di jendela privat untuk melihat perubahannya.
  • iOS mengabaikan transparansi pada Apple touch icon dan mengisinya dengan hitam, jadi biarkan latar belakang terisi agar ikon di layar utama tampak bersih.

FAQ

› File apa saja yang saya dapatkan?

favicon.ico (16, 32, dan 48 px), ikon PNG berukuran 16, 32, dan 48 px, Apple touch icon 180 px, ikon Android 192 dan 512 px, site.webmanifest, tag HTML, dan favicon.svg jika Anda memulai dari teks.

› Apakah logo saya diunggah ke suatu tempat?

Tidak. Gambar dibaca dan diubah ukurannya di browser Anda dengan canvas; file ZIP juga dibuat di perangkat Anda.

› Gambar seperti apa yang paling bagus?

PNG atau SVG persegi minimal 512 × 512 px dengan latar belakang transparan. Bentuk yang sederhana dan tegas tetap terbaca di 16 px; detail halus dan teks tipis tidak.

› Apakah saya masih butuh favicon.ico?

Ya, untuk browser lama dan alat yang langsung meminta /favicon.ico. Browser modern memakai link PNG atau SVG di HTML.