§

Unggah gambar

PNG, JPEG, WebP — hingga 10 MB.

Menyusun set favicon untuk situs baru sering berarti membuka aplikasi grafis, mengekspor enam PNG berbeda dan menulis tag secara manual. Alat ini memadatkan seluruh proses menjadi satu langkah: taruh gambar (atau ketik kata atau emoji), pilih font dan warna, dapatkan setiap ukuran favicon plus HTML dan cuplikan manifest dalam ZIP. Pendekatannya murni sisi browser — Canvas API menangani pengubahan ukuran dan fflate mengemas bundel di memori. Tidak ada yang diunggah, sehingga berfungsi di komputer perusahaan terkunci atau lingkungan terisolasi. Favicon yang dihasilkan adalah PNG standar yang berfungsi di semua browser pendukung , dan ikon Apple-touch-icon serta PWA siap digunakan ke dalam build produksi.

// Alat Terkait

./image-format-converter
Konverter Format Gambar
Konversi PNG, JPEG, dan WebP secara lokal — tanpa unggahan, dukungan massal.
→
./image-compressor
Kompresor Gambar
Kompres gambar JPEG, PNG, dan WebP secara lokal — kualitas atau ukuran target, tanpa unggahan.
→
./image-resizer
Pengubah Ukuran Gambar
Ubah ukuran foto menggunakan piksel, persentase, atau sisi terpanjang — tanpa unggahan, dukungan massal.
→
./
Semua Alat
Telusuri rangkaian lengkap alat daring Ultim8Soft.
→

Cara kerja pembuatan favicon berbasis browser

Seluruh pipeline generasi berjalan di dalam tab browser Anda menggunakan Canvas API dan pustaka kompresi fflate. Tidak ada pemrosesan server, tidak ada unggahan, tidak ada layanan pihak ketiga.

  1. Muat gambar sumber Anda atau render teks atau emoji Anda di canvas offscreen dengan resolusi tinggi. Jika Anda memilih gambar, gambar akan didekode oleh browser secara native. Jika Anda memilih mode teks, halaman akan menggambar kata Anda ke canvas dengan font, warna teks, dan warna latar yang dipilih.
  2. Untuk setiap ukuran target (16, 32, 48, 180, 192, 512 piksel), halaman membuat canvas offscreen baru pada dimensi yang tepat, lalu menggambar konten sumber ke atasnya menggunakan Canvas API. Pengubahan ukuran gambar bawaan browser menangani penurunan skala dengan filter bilinear atau bicubic secara otomatis, menghasilkan favicon yang tajam di setiap ukuran.
  3. Setiap canvas diekspor ke PNG Blob melalui canvas.toBlob(). Panel pratinjau menunjukkan keenam ukuran sehingga Anda dapat memeriksa hasilnya sebelum mengunduh. Blok HTML siap-tempel dan cuplikan manifes aplikasi web (manifest.json) dibuat dari nama file sehingga Anda dapat menempelkannya langsung ke tag head situs Anda.
  4. Saat Anda mengklik Unduh ZIP, halaman membaca setiap PNG Blob ke memori, menggunakan fflate untuk mengemasnya bersama file manifest.json ke dalam satu arsip ZIP, dan memicu unduhan dengan satu klik. Seluruh bundel dibuat di browser Anda — tidak ada yang diunggah di tahap mana pun.

Mengapa membuat favicon di browser?

  • Set favicon lengkap menghilangkan 404 favicon-tidak-ditemukan browser pada kunjungan pertama dan memastikan situs Anda terlihat profesional di bookmark, tab browser, dan layar instalasi PWA. Ukuran yang hilang berarti browser tidak memuat apa pun atau menggunakan skala tetangga terdekat yang buram.
  • HTML dan cuplikan manifes yang disertakan menghemat waktu Anda dari menulis enam tag dan blok manifest JSON secara manual. Tempelkan ke head situs Anda, sesuaikan jalur jika perlu, dan selesai dalam hitungan detik, bukan menit.
  • Generasi sisi klien adalah satu-satunya pilihan di perangkat perusahaan terkunci yang tidak memiliki editor foto. Karena tidak ada yang diunggah, tidak ada risiko kebocoran data dan tidak perlu tinjauan kepatuhan untuk gambar sensitif atau bermerek.
  • Mode teks dan emoji memungkinkan Anda membuat favicon tanpa gambar sama sekali. Ketik inisial merek Anda, huruf, atau emoji, pilih font dan warna, dan dapatkan set lengkap — sempurna untuk proyek pribadi, purwarupa, atau situs yang hanya membutuhkan favicon sementara sekarang.

Aplikasi pembuatan favicon umum

Setiap situs yang dibookmark atau diinstal orang membutuhkan favicon. Berikut tiga skenario di mana generator berbasis browser menghemat waktu.

  • Menyiapkan laman landas atau microsite baru. Hasilkan set favicon lengkap dari logo merek dalam waktu kurang dari satu menit, salin tag ke head situs, dan terapkan. Tidak perlu alat desain.
  • Memproduksi ikon PWA untuk aplikasi web progresif. Ikon PNG 192×192 dan 512×512 diperlukan untuk manifest.json. Hasilkan bersama sisa set favicon dalam satu langkah, bukan mengubah ukuran logo secara manual.
  • Membuat placeholder untuk purwarupa dan situs pementasan. Ketik satu huruf atau emoji, pilih warna latar, dan dapatkan favicon realistis tanpa menunggu aset merek final dari tim desain.

Contoh kerja: membuat set favicon dari logo perusahaan

Anda memiliki logo PNG 500×500 dan membutuhkan set favicon lengkap untuk situs pemasaran baru.

Buka halaman ini dan taruh logo PNG ke zona unggahan. Gambar dimuat dan pratinjau muncul di samping petak ukuran. Klik Hasilkan favicon. Halaman menggambar logo ke enam canvas offscreen pada 16, 32, 48, 180, 192, dan 512 piksel dan menampilkan setiap hasil. Di bawah panel pratinjau, blok HTML siap-tempel muncul dengan entri rel="icon" untuk ukuran 16/32/48, tautan apple-touch-icon untuk ukuran 180, dan tautan manifest untuk ikon PWA. Cuplikan manifes di bawahnya mencantumkan ikon 192 dan 512. Klik Unduh ZIP — halaman mengemas keenam PNG plus manifest.json ke dalam satu arsip ZIP melalui fflate. Seluruh proses memakan waktu dua detik dan tidak menggunakan bandwidth selain pemuatan halaman awal.

Ukuran favicon apa yang dihasilkan alat ini?

Enam ukuran: 16×16, 32×32, dan 48×48 untuk favicon browser standar, 180×180 untuk Apple Touch Icon, dan 192×192 dan 512×512 untuk ikon manifest PWA. Setiap ukuran dikeluarkan sebagai PNG. Browser modern menerima favicon PNG melalui .

Bisakah saya membuat favicon dari teks atau emoji?

Ya. Beralih ke mode teks atau emoji, ketik kata atau tempel emoji, pilih font, warna teks, dan warna latar, lalu klik Hasilkan. Teks dirender ke canvas offscreen pada resolusi tinggi dan kemudian diubah ukurannya ke setiap ukuran favicon target.

Apakah gambar diunggah ke server?

Tidak. Gambar tidak pernah meninggalkan perangkat Anda. Halaman menggunakan File API browser untuk membaca gambar ke memori dan Canvas API untuk mengubah ukuran dan mengekspor setiap favicon. Buka panel Network DevTools saat menghasilkan — satu-satunya permintaan keluar adalah pemuatan halaman awal dan panggilan iklan. Tidak ada data gambar yang dikirimkan.

Format apa yang diterima untuk unggahan gambar?

Format apa pun yang dapat didekode browser: PNG, JPEG, WebP, GIF, dan SVG (dirasterisasi oleh browser). Batas ukuran file adalah 10 MB per unggahan.

Bagaimana cara kerja unduhan ZIP?

Halaman menggunakan pustaka fflate (dimuat sesuai permintaan dari jalur vendor bersama) untuk mengemas semua PNG yang dihasilkan plus manifest.json ke dalam arsip ZIP standar. Pengemasan terjadi sepenuhnya di memori browser — tanpa unggahan, tanpa perjalanan bolak-balik server. ZIP disajikan sebagai unduhan Blob dengan satu klik.

Bisakah saya menggunakan favicon ini di situs web mana pun?

Ya. Favicon PNG yang dihasilkan berfungsi di semua browser modern yang mendukung tag . Apple Touch Icon 180×180 mencakup iOS dan Safari. Ikon PWA 192×192 dan 512×512 memenuhi persyaratan manifes untuk Chrome di Android dan browser pendukung PWA lainnya.

Apakah ada opsi format .ico yang sesungguhnya?

Versi saat ini mengeluarkan PNG karena setiap browser modern menerimanya melalui . Format .ico multi-resolusi yang sesungguhnya belum didukung dan mungkin akan ditambahkan di rilis mendatang.