Konverter Gratis

Pembuat Favicon

Buat file favicon dalam berbagai ukuran (16x16 hingga 512x512) dari gambar apa pun. Gratis, instan, dan berjalan sepenuhnya di browser Anda.

Seret & Jatuhkan gambar di sini

Mendukung PNG, JPG, SVG, WebP. Maks 10MB.

Atau

Tentang alat ini

Favicon adalah ikon kecil yang muncul di tab browser, bookmark, dan daftar riwayat. Favicon asli — file ICO 16×16 di /favicon.ico — telah diperluas menjadi sekumpulan ikon kompleks dengan ukuran berbeda untuk platform berbeda: 16×16 dan 32×32 untuk tab browser, 180×180 untuk layar beranda iOS, 192×192 dan 512×512 untuk Android, dan berbagai ukuran untuk ubin Windows. Memproduksi semua ini dari satu gambar sumber adalah hal yang dilakukan oleh generator favicon modern.

Alat ini mengambil satu gambar sumber beresolusi tinggi (biasanya logo persegi) dan menghasilkan set lengkap aset favicon ditambah tag tautan HTML yang diperlukan untuk mereferensikannya. Outputnya mencakup ICO, beberapa PNG, dan manifest.json untuk metadata aplikasi web progresif. Letakkan file yang dihasilkan di root situs Anda dan referensikan melalui HTML yang dihasilkan.

Semua pemrosesan terjadi di browser Anda. Tanpa unggahan, tanpa panggilan API, tanpa batasan tarif. Outputnya berfungsi di setiap browser modern dan sistem operasi yang menampilkan favicon.

Mengapa Menghasilkan Favicon

Situs tanpa favicon terlihat belum selesai. Tab browser menampilkan ikon umum; bookmark tidak memiliki pengenal visual; situs tersebut tampak kurang profesional. Menambahkan set favicon yang tepat adalah langkah pemolesan berdampak tinggi yang mudah dilakukan dan menandakan perhatian terhadap detail.

Persyaratan favicon modern telah berkembang melampaui /favicon.ico. Ikon layar beranda iOS, ikon Android Chrome, ikon ubin Windows, dan varian mode gelap semuanya menggunakan file yang berbeda. Menghasilkan semuanya dari satu sumber memastikan branding yang konsisten tanpa mengelola setiap file secara manual.

Cara menggunakan

Unggah gambar sumber, dapatkan set favicon lengkap.

  1. Unggah gambar sumber: Gunakan gambar persegi minimal 512×512 piksel. PNG lebih disukai (dukungan transparansi); SVG juga diterima. Sumber resolusi lebih tinggi menghasilkan ikon kecil yang lebih tajam.
  2. Konfigurasikan opsi platform: Aktifkan output iOS, Android, Windows, dan PWA sesuai kebutuhan. Pengaturan default menghasilkan set standar yang dibutuhkan sebagian besar situs.
  3. Sesuaikan warna dan tema: Pilih warna tema untuk ubin Windows dan layar splash PWA. Cocokkan identitas merek Anda.
  4. Unduh dan terapkan: Simpan zip yang dihasilkan. Tempatkan file di root situs Anda dan tambahkan tag tautan HTML yang dihasilkan ke <head> Anda. HTML mereferensikan setiap ikon dengan ukuran yang tepat.

Kasus Penggunaan Umum

Detail Teknis

Kumpulan favicon modern lengkap: favicon.ico (16+32+48 multi-resolusi), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png, mstile-150x150.png. Ditambah site.webmanifest untuk PWA, browserconfig.xml untuk Windows.

Setiap PNG dihasilkan oleh downsampling berbasis kanvas dari sumbernya. ICO dibuat dalam JavaScript dengan menggabungkan versi 16/32/48 ke dalam format ICO multi-resolusi menggunakan penulisan DataView.

Tag tautan HTML mereferensikan setiap file dengan atribut rel dan ukuran yang sesuai. Generator menghasilkan cuplikan ini sebagai cuplikan siap salin dan tempel untuk <head> situs Anda.

Praktik Terbaik

Pertanyaan yang sering diajukan

Format gambar apa yang harus saya unggah?
PNG dengan latar belakang transparan berfungsi paling baik. Gunakan gambar persegi minimal 512x512 piksel sehingga alat dapat memperkecil skala tanpa kehilangan kualitas. SVG juga berfungsi dengan baik karena dapat diskalakan ke berbagai ukuran.
Berapa ukuran yang dihasilkannya?
16x16 (tab browser), 32x32 (tab browser @2x), 48x48 (bilah tugas Windows), 180x180 (ikon Apple Touch), 192x192 (layar beranda Android), 512x512 (layar pembuka PWA). File ICO berisi ukuran 16, 32, dan 48px.
Di mana saya meletakkan file favicon?
Tempatkan favicon.ico di direktori root situs web Anda. Ukuran PNG lainnya masuk ke folder publik Anda atau jalur apa pun yang dapat diakses. Tambahkan tag tautan HTML di bagian <head> yang menunjuk ke setiap lokasi file.
Mengapa favicon saya tidak diperbarui di browser?
Browser secara agresif menyimpan favicon dalam cache. Hapus cache browser Anda, coba buka di jendela penyamaran, atau tambahkan string kueri versi (?v=2) ke URL favicon untuk memaksa penyegaran.
Mengapa favicon saya tidak diperbarui?
Browser menyimpan cache favicon secara agresif, terkadang selama berhari-hari. Paksa penyegaran dengan mengosongkan cache, membuka URL ikon secara langsung, atau menambahkan parameter kueri versi ke tag tautan.
Apakah gambar saya diunggah ke server?
Tidak. Pembuatan terjadi di browser Anda.
Haruskah saya menggunakan SVG atau PNG?
SVG untuk sumbernya (tidak bergantung pada resolusi). Generator mengeluarkan PNG pada ukuran tertentu; browser modern juga mendukung favicon SVG melalui tautan rel=icon type=image/svg+xml.
Apa itu site.webmanifest?
Manifes JSON untuk aplikasi web progresif yang menjelaskan ikon, warna, dan metadata lainnya. Diperlukan untuk aplikasi web yang dapat diinstal; tidak berbahaya untuk disertakan bahkan di situs standar.