Langsung ke konten utama

Pembuat Favicon

Unggah logo Anda dan dapatkan semua ikon yang dibutuhkan situs dalam satu ZIP: favicon.ico berisi gambar 16, 32, dan 48 piksel, PNG 48 piksel untuk Google, Apple Touch Icon berlatar buram untuk iPhone, ikon 192 dan 512 piksel untuk Android, ikon maskable dengan zona aman yang sudah dihitung, dan site.webmanifest. Jika Anda mengunggah SVG, icon.svg ikut disertakan. Anda melihat pratinjau tab, hasil Google, dan layar utama, lalu menyalin kode <head> siap pakai; semuanya berjalan di browser.

  • Gratis, tanpa daftar
  • File tidak pernah meninggalkan perangkat Anda
  • Hingga 50 MB per file

Tambahkan gambar logo atau ikon Anda untuk mulai. PNG, SVG, JPG, dan WebP semuanya bisa; hasil terbaik didapat dari gambar persegi minimal 512 × 512 piksel.

File Anda tidak pernah meninggalkan perangkat; gambar diproses di browser Anda. Data EXIF dan lokasi tidak ditambahkan ke hasil.

Cara membuat favicon

  1. Tambahkan logo Anda

    Unggah logo PNG, SVG, JPG, atau WebP. Hasil terbaik didapat dari gambar persegi minimal 512 × 512 piksel; SVG juga bisa.

  2. Atur nama, warna, dan jarak tepi

    Ketik nama situs dan nama singkat, pilih warna tema dan latar, lalu tambahkan jarak tepi jika perlu. Pratinjau menunjukkan tampilan ikon di tab, di Google, dan di layar utama.

  3. Unduh paket lalu pasang

    Unduh ZIP, unggah file ke folder root situs Anda, dan tambahkan potongan <head> yang ditampilkan ke halaman Anda.

Apa yang dipertahankan?

Dipertahankan

  • Proporsi logo Anda: gambar yang tidak persegi dimuat di dalam persegi, tidak pernah diregangkan
  • Transparansi (pada ikon standar; jika Anda memilih warna latar, warna itu yang mengisi)
  • Jika Anda mengunggah SVG, icon.svg disertakan apa adanya

Berubah

  • Setiap ikon diambil sampelnya ulang ke ukurannya sendiri dengan kualitas tinggi
  • Apple Touch Icon dan ikon maskable selalu berlatar buram: warna yang Anda pilih, atau putih jika “Transparan” dipilih
  • Pada ikon maskable, konten berada di zona aman 80%

Tidak terbawa

  • Tidak ada vektor (SVG) yang dibuat dari PNG atau JPG; icon.svg hanya ada untuk masukan SVG
  • EXIF dan metadata lain tidak ditambahkan ke ikon

Kapan digunakan

Set ikon lengkap untuk situs baru

Satu favicon.ico saja tidak lagi cukup: layar utama iPhone, Android, dan hasil pencarian Google menginginkan file yang berbeda. Satu kali unggah memberi semuanya dengan nama dan ukuran yang benar.

Menampilkan ikon di hasil pencarian Google

Google menampilkan ikon situs di hasil pencarian dari file persegi yang ukurannya kelipatan 48 piksel, dan file itu harus bisa dirayapi. Paket ini menyertakan file tersebut beserta tautan <head>-nya.

Situs yang bisa ditambahkan seperti aplikasi (PWA)

Jika Anda ingin situs bisa ditambahkan ke layar utama, Anda membutuhkan manifest dan ikon 192/512 piksel. Ikon maskable menjaga logo tidak terpotong ketika Android memotong ikon menjadi lingkaran atau persegi bersudut bulat.

Keterbatasan yang perlu diketahui

  • Hasil terbaik didapat dari gambar persegi minimal 512 × 512 piksel; ikon besar yang dibuat dari sumber lebih kecil tampak buram.
  • Garis tipis dan teks kecil menjadi tidak terbaca pada ikon 16 dan 32 piksel; logo yang tebal dan berkontras tinggi lebih cocok.
  • Warna tema hanya diterapkan di bilah alamat browser seluler dan bergantung pada pengaturan browser.
  • Google bisa membutuhkan berhari-hari bahkan berminggu-minggu untuk memperbarui ikon di hasil pencarian, dan browser juga menyimpan ikon di cache.

Pertanyaan yang sering diajukan

File favicon apa saja yang dibutuhkan sebuah situs?

Pendekatan terkini: favicon.ico di folder root, PNG 48 piksel untuk Google, icon.svg bila memungkinkan, apple-touch-icon.png 180 piksel untuk iPhone, ikon 192 dan 512 piksel untuk Android, dan site.webmanifest. Pembuat ini menghasilkan semuanya dan memberi Anda tautan <head>-nya.

Apa itu ikon maskable?

Ikon maskable menjaga kontennya di dalam zona aman dan memiliki latar yang terisi penuh, sehingga Android dapat memotongnya menjadi lingkaran, persegi bersudut bulat, atau bentuk lain sesuai perangkat. Di sini kontennya ditempatkan di area tengah 80% dari gambar 512 piksel.

Mengapa Apple Touch Icon berlatar buram dan bersudut siku?

iOS menampilkan area transparan sebagai hitam dan membulatkan sudutnya sendiri. Karena itu ikon dibuat terisi penuh tanpa sudut membulat, dengan warna latar pilihan Anda (putih jika transparan dipilih).

Mengapa ikon saya tidak muncul di hasil Google?

File ikon tidak boleh diblokir oleh robots.txt, harus ditautkan dari <head> beranda, dan harus berupa persegi dengan ukuran kelipatan 48 piksel. Setelah diperbaiki, Anda bisa meminta pengindeksan ulang beranda di Search Console; pembaruannya tetap bisa memakan waktu berhari-hari atau berminggu-minggu.

Apa yang terjadi jika saya mengunggah gambar yang tidak persegi?

Ikon dimuat di dalam persegi tanpa distorsi sehingga menyisakan ruang kosong di sisinya. Jika Anda ingin bingkai memenuhi persegi, potong dulu ke 1:1 dengan alat potong.

Apakah alat ini membuat favicon SVG dari PNG?

Tidak. Mengubah piksel menjadi vektor secara otomatis bisa diam-diam mengubah tampilan ikon, jadi icon.svg hanya disertakan jika Anda sendiri mengunggah SVG.

Apakah alat ini gratis?

Ya, sepenuhnya gratis. Tanpa akun, langganan, atau watermark.

Apakah file saya diunggah ke suatu tempat?

Tidak. Gambar diproses di browser Anda dan tidak pernah meninggalkan perangkat. Data EXIF dan lokasi tidak ditambahkan ke hasil.