Generator Favicon

Unggah gambar dan buat semua ukuran standar favicon dalam PNG.

Seret-jatuhkan gambar di sini, atau klik untuk memilih

Gambar persegi memberikan hasil terbaik (PNG, JPG, SVG)

Penjelasan ukuran favicon

16×16 · favicon tab browser standar

32×32 · tab Retina, shortcut taskbar

48×48 · shortcut situs Windows

180×180 · Apple Touch Icon (layar utama iOS)

192×192 · Android Chrome, ikon manifest PWA

512×512 · splash screen PWA, pencarian Google

Sejarah Singkat Favicon

Favicon dimulai sebagai fitur Microsoft di Internet Explorer 5, dirilis Maret 1999. Microsoft memperkenalkan konvensi mencari /favicon.ico di akar situs dan menampilkannya di sebelah situs yang dibookmark di bilah Favorit: dari sinilah nama "favicon" (favorite icon). Pilihan desain asli adalah format ICO Windows yang merupakan kepemilikan, yang dapat menampung beberapa ukuran bitmap dalam satu file. Browser lain mengadopsi konvensi ini hampir segera dan mulai mendukung favicon PNG juga, ditandai melalui tag <link rel="icon"> di head dokumen. iPhone Apple (diluncurkan 2007) menambahkan konvensi apple-touch-icon: PNG 180×180 yang digunakan ketika pengguna menambahkan situs web ke layar utama iOS mereka, ditampilkan pada ukuran yang sama dengan ikon aplikasi asli. Progressive Web Apps (PWA, diformalkan sekitar 2015) menambahkan file manifest.json dengan array icons-nya, mewajibkan varian PNG 192×192 (prompt pemasangan Chrome) dan 512×512 (layar splash PWA, layar utama Android, pinning menu Start Windows). Favicon SVG (didukung di Firefox sejak versi 41 pada 2015, Chrome sejak versi 80 pada Februari 2020, Safari sejak versi 12.1 pada 2019) sekarang adalah rekomendasi modern ketika ikon adalah bentuk sederhana: satu file menskalakan dengan sempurna ke kepadatan tampilan apa pun. File favicon.ico warisan masih diperlukan untuk Internet Explorer 11 dan browser yang lebih lama; tumpukan modern mengirim SVG plus ICO fallback dan PNG apple-touch-icon.

Mengapa Begitu Banyak Ukuran?

Setiap ukuran dalam set favicon melayani konteks rendering yang berbeda. 16×16 adalah favicon tab browser klasik pada DPI standar: ukuran yang mengajari desainer betapa brutalnya kendala piksel. 32×32 adalah ukuran tab browser DPI tinggi (Retina); banyak browser modern lebih memilih ini bahkan untuk tampilan "standar" karena ia menskalakan ke bawah lebih baik daripada 16×16 menskalakan ke atas. 48×48 adalah ukuran yang digunakan Windows untuk pintasan taskbar dan favicon situs yang dipin. 180×180 adalah apple-touch-icon, ditampilkan ketika pengguna menambahkan situs ke layar utama iOS. 192×192 adalah prompt pemasangan aplikasi web Chrome dan ikon layar utama Android standar. 512×512 adalah ikon layar splash PWA, thumbnail hasil pencarian Google, dan ikon ubin menu Start Windows. Alasan satu file resolusi tinggi tidak cukup: pada ukuran terkecil, ikon sering kali memerlukan penyederhanaan yang disetel manual untuk tetap dapat dibaca (logo kompleks pada 16×16 menjadi noda berwarna), jadi desain favicon profesional biasanya melibatkan pembuatan dua atau tiga varian: versi rinci untuk ukuran besar, versi sederhana untuk ukuran sedang, dan versi "hanya tanda" untuk ukuran terkecil. Generator ini menskalakan satu sumber melalui downsampling tetangga-terdekat-atau-bilinear standar, yang baik untuk bentuk sederhana; logo kompleks mungkin memerlukan sentuhan manual pada ukuran terkecil.

HTML yang Menyertai File

Membuat file adalah setengah pekerjaan; setengah lainnya adalah meta tag di <head> Anda yang memberi tahu browser file mana yang harus digunakan dalam konteks mana. Tumpukan favicon minimum-yang-layak pada 2026:

<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Browser memilih file yang paling sesuai berdasarkan kepadatan piksel perangkat dan format mana yang didukungnya. Browser modern lebih memilih SVG ketika ada; browser yang lebih lama jatuh ke ukuran PNG; iOS menggunakan apple-touch-icon; pemasangan PWA membaca manifest. favicon.ico di akar masih diambil secara otomatis sebagai fallback default bahkan tanpa tag link eksplisit: setiap situs masih harus memiliki satu untuk kompatibilitas mundur dengan browser dan tooling yang sangat lama.

Kapan Anda Sebenarnya Perlu Membuat Favicon

Mendesain untuk Kendala 16×16

Favicon 16×16 adalah kendala paling menuntut dalam desain antarmuka modern. 256 piksel: seluruh kanvas ikon: harus menyampaikan identitas merek yang cukup sehingga pengguna dapat menemukan tab Anda di antara dua puluh lainnya. Panduan praktis dari desainer yang telah melakukan ini berkali-kali: Sederhanakan secara agresif. Logo kompleks pada 16×16 adalah noda berwarna. Lepas detail hingga hanya bentuk minimum yang dapat dikenali yang tersisa. Maksimalkan kontras terhadap latar belakang tab. Tab browser biasanya abu-abu terang atau abu-abu gelap; ikon dengan kontras lemah menghilang ke dalam chrome. Lebih suka bentuk berani tunggal daripada garis tipis. Garis di bawah lebar 2px alias menjadi abu-abu pada 16px dan menjadi tidak terlihat. Uji pada ukuran sebenarnya di browser Anda. Apa yang terlihat baik-baik saja di alat desain Anda pada 256×256 mungkin tidak terbaca pada 16×16. Buka beberapa tab situs Anda dan lihat di bilah tab: itulah uji yang sebenarnya. Pertimbangkan kasus mode gelap. Ikon yang dirancang untuk bilah tab putih mungkin tidak terlihat pada bilah tab gelap. Favicon SVG dapat menyertakan media query prefers-color-scheme di dalam SVG untuk adaptasi terang/gelap otomatis; untuk fallback ICO dan PNG, desain sesuatu yang berfungsi pada kedua latar belakang.

File yang dihasilkan

Privasi: Pemrosesan Gambar Hanya-Browser

Logo atau gambar branding yang Anda unggah untuk membuat favicon mungkin rahasia: pekerjaan merek pra-peluncuran, branding alat internal, logo klien yang dilindungi NDA. Generator favicon sisi server (RealFaviconGenerator yang sangat populer dan serupa) mengambil salinan setiap gambar yang diunggah ke infrastruktur mereka di mana ia berada di log dan cache. Generator ini berjalan sepenuhnya di browser Anda melalui Canvas API: gambar dibaca ke browser, diskalakan ke setiap ukuran favicon oleh pipeline pengubahan ukuran gambar bawaan browser, dan dikemas untuk diunduh: semuanya di tab Anda. Verifikasi di tab Network DevTools saat Anda mengunggah (tidak ada permintaan yang dikirim setelah halaman dimuat), atau bawa halaman offline (mode pesawat) setelah dimuat dan generator masih bekerja pada file lokal. Aman untuk pekerjaan merek yang belum diumumkan, logo klien yang dilindungi NDA, branding alat internal, atau gambar apa pun yang tidak ingin Anda salin ke hard drive orang asing.

Alat terkait

Kompresor gambar

Kompresi gambar Anda hingga 80% lebih kecil. Seret-jatuhkan, unduh seketika. Tanpa unggahan ke server.

Pengubah ukuran gambar

Ubah ukuran gambar Anda ke dimensi piksel yang tepat. Preset untuk media sosial, web, dan lainnya.

Konverter gambar

Konversi antara PNG, JPEG, dan WebP. Konversi batch beberapa file sekaligus.