MUTools

Gambar

Generator Favicon

Generator Favicon adalah alat untuk membuat favicon.ico beserta ikon untuk setiap perangkat dari satu gambar sekaligus, lengkap dengan kode HTML pemasangannya yang dihasilkan secara otomatis. Tanpa perlu mengunggah, cukup muat gambar ke browser dan seluruh ukuran ikon langsung tersedia.

Seret & lepas gambar (PNG / JPG / WebP / SVG) ke sini

atau

Mendukung PNG / JPG / WebP / SVG · maks. 20 MB (disarankan gambar bujur sangkar)

Semua gambar yang Anda unggah diproses di dalam browser Anda dan tidak dikirim ke server eksternal.

Apa itu alat Generator Favicon?

Generator Favicon adalah alat untuk membuat favicon.ico beserta ikon untuk setiap perangkat dari satu gambar sekaligus, lengkap dengan kode HTML pemasangannya yang dihasilkan secara otomatis. Tanpa perlu mengunggah, cukup muat gambar ke browser dan seluruh ukuran ikon langsung tersedia.

Yang dihasilkan adalah favicon.ico yang dipakai pada tab browser (multi-resolusi 16 / 32 / 48 px), Apple Touch Icon untuk layar beranda iPhone (180px), ikon 192 / 512px untuk Android Chrome dan PWA, serta site.webmanifest (manifest.json). Jika Anda mengunggah berkas SVG, ikon vektor icon.svg untuk browser modern juga disertakan.

Warna latar, jarak tepi (padding), dan sudut membulat dapat diatur langsung dan langsung tercermin pada pratinjau. Anda bebas menambahkan latar putih pada logo PNG transparan atau membuat ikon dengan sudut membulat. Nama aplikasi dan warna tema pada manifest juga dapat diisi, lalu disalin atau diunduh bersama cuplikan HTML pemasangan.

Semua gambar yang Anda masukkan diproses sepenuhnya di dalam browser pengguna dan tidak dikirim ke server eksternal. Logo rahasia perusahaan maupun desain yang belum dipublikasikan pun dapat digunakan dengan tenang. Gratis, tanpa perlu registrasi, dan berjalan sepenuhnya di browser Anda.

Cara penggunaan

  1. Seret & lepas gambar (PNG / JPG / WebP / SVG) ke area drop, atau klik untuk memilih (mendukung pula penempelan dari clipboard).
  2. Atur warna latar, jarak tepi, dan sudut membulat sesuai kebutuhan. Pratinjau diperbarui secara langsung.
  3. Isi pengaturan manifest (nama aplikasi, nama singkat, warna tema, warna latar).
  4. Unduh setiap ikon yang dihasilkan satu per satu, atau ambil seluruhnya sekaligus melalui "Unduh sebagai ZIP".
  5. Letakkan berkas dalam ZIP di root situs Anda, lalu tempelkan kode HTML yang ditampilkan ke dalam <head>.

Skenario penggunaan

  • Saat ingin memasang favicon yang tampil di tab browser dan bookmark pada situs web atau blog yang baru dipublikasikan.
  • Saat ingin menyiapkan tidak hanya favicon.ico, tetapi juga ikon untuk layar beranda iPhone / Android dan PWA sekaligus.
  • Pembuat web yang ingin membuat set ikon untuk berbagai perangkat dari gambar logo, lalu langsung menyalin HTML pemasangannya.
  • Saat ingin membuat ikon dari logo rahasia perusahaan atau desain yang belum dipublikasikan secara lokal tanpa mengunggahnya ke luar.
  • Saat ingin menyiapkan dari logo SVG, baik favicon SVG untuk browser modern maupun setiap ukuran raster sekaligus.

Hal yang perlu diperhatikan

  • Yang dihasilkan adalah favicon.ico (16 / 32 / 48 px), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180px), android-chrome-192x192.png, android-chrome-512x512.png, dan site.webmanifest.
  • favicon.ico adalah ikon multi-resolusi yang menggabungkan 16 / 32 / 48 px dalam satu berkas.
  • Apple Touch Icon tidak mendukung transparansi, sehingga meskipun latar diatur ke "transparan", latarnya tetap diisi dengan warna putih.
  • Disarankan menggunakan gambar yang mendekati bujur sangkar. Gambar dengan rasio sisi yang berbeda akan ditempatkan di tengah dan diberi jarak tepi.
  • Hanya jika Anda mengunggah berkas SVG, ikon vektor icon.svg turut disertakan dalam paket.

Pertanyaan yang sering diajukan

Apakah gambar diunggah ke server?
Tidak. Seluruh proses pembuatan berlangsung sepenuhnya di dalam browser Anda dan gambar tidak dikirim ke luar. Logo rahasia perusahaan maupun gambar pribadi pun dapat digunakan dengan tenang.
Ukuran apa saja yang ada di dalam favicon.ico?
Berkas ICO yang menggabungkan tiga resolusi 16 / 32 / 48 px dalam satu berkas. Ukuran yang paling sesuai akan dipakai bergantung pada tempat tampilnya, seperti tab browser atau bookmark.
Di mana saya harus menempelkan HTML pemasangannya?
Letakkan berkas dalam ZIP di direktori root situs Anda, lalu tempelkan tag <link> / <meta> yang ditampilkan ke dalam <head> pada HTML.
Gambar seperti apa yang sebaiknya saya unggah?
Mendukung PNG / JPG / WebP / SVG. Menggunakan PNG atau SVG bujur sangkar dengan latar transparan akan menghasilkan tampilan yang rapi pada setiap ukuran.
Apa itu site.webmanifest (manifest.json)?
Berkas pengaturan untuk menentukan ikon, nama aplikasi, dan warna tema pada Android Chrome serta PWA. Alat ini menghasilkannya secara otomatis sesuai isian Anda dan menyertakannya dalam ZIP.