Lewati ke konten
ID

Generator favicon

Buat favicon situs Anda dari huruf, emoji, atau logo: favicon.ico, PNG, ikon Apple dan Android, manifest, dan kode HTML.

  • Gratis
  • Tanpa daftar
  • Tanpa unggah file
  • Windows, Mac, Android, iPhone

Memuat alat…

Tentang alat ini

Buat sekaligus semua ikon yang dibutuhkan situs Anda: dari huruf atau emoji (font, warna, bentuk persegi, membulat, atau bundar) atau dari logo Anda. Anda mendapatkan favicon.ico, favicon.svg, PNG 16 dan 32 px, ikon Apple 180 px, ikon Android 192 dan 512 px, file site.webmanifest, dan kode HTML untuk ditempel.

Kapan menggunakannya

Situs web atau blog baru

Favicon dengan inisial situs di atas warna utamanya selesai dalam semenit dan membuat tab mudah dikenali.

Ikon aplikasi web

Dengan manifest dan ikon Android, situs bisa ditambahkan ke layar utama ponsel seperti aplikasi.

Logo yang sudah ada

Pilih logo Anda: logo dipotong menjadi persegi dengan margin yang bisa diatur dan dibuat dalam semua ukuran.

Cara menggunakan

  1. Pilih huruf, emoji, atau logo Anda.
  2. Atur warna, bentuk, dan ukuran sambil melihat pratinjau ukuran asli.
  3. Buat filenya, unduh, lalu salin kode HTML.

Cara kerjanya

Setiap ukuran digambar terpisah di canvas (bukan diperkecil dari gambar besar), sehingga ikon kecil tetap tajam. Teks dipusatkan berdasarkan tinggi huruf sebenarnya dan diperkecil jika melebihi 90% lebar.

File .ico disusun byte demi byte: header, satu entri per ukuran, lalu gambar PNG, format yang diterima semua browser. Semuanya dibuat di perangkat Anda.

Tips untuk hasil terbaik

  • Maksimal satu atau dua huruf: pada 16 px, satu kata utuh tidak terbaca.
  • Pilih warna yang sangat kontras, ikonnya sangat kecil.
  • Periksa pratinjau 16 px, ukuran asli tab browser.
  • Hapus cache browser setelah mengganti favicon: favicon lama masih terlihat lama.

Masalah umum dan solusinya

Favicon lama masih muncul

Browser menyimpan favicon di cache. Muat ulang dengan Ctrl+F5, atau buka halaman di jendela privat.

Emoji terlihat berbeda

Emoji bergantung pada sistem. Di file PNG dan ICO, emoji perangkat Anda yang digambar; favicon.svg memakai emoji pengunjung.

Logo terpotong

Logo dipotong menjadi persegi. Perbesar margin, atau siapkan versi logo yang persegi.

Pertanyaan umum

File apa saja yang dibutuhkan favicon?

favicon.ico (16, 32, dan 48 px) untuk semua browser, PNG 32 px, apple-touch-icon.png (180 px) untuk layar utama iPhone, dan dua ikon 192 dan 512 px untuk Android dengan file site.webmanifest. Alat ini membuat semuanya.

Di mana file diletakkan?

Di root situs (di samping halaman beranda), lalu tambahkan kode HTML yang diberikan di dalam tag head halaman Anda.

Mengapa ikon Apple tidak transparan?

iOS mengganti transparansi dengan hitam di layar utama, jadi ikon Apple selalu diberi warna latar Anda.

Bisakah saya memakai emoji?

Ya. Dalam mode teks, favicon.svg juga dibuat: tajam di semua ukuran dan sangat ringan.

Pencarian terkait

Masih bermasalah?

Tanyakan di forum: kategori, alat, data perangkat, dan hasil tes akan diisi otomatis.