Apa Itu Favicon?

Favicon (singkatan dari "favorite icon") adalah ikon kecil yang ditampilkan di tab browser, bookmark, dan bilah alamat di samping nama situs web Anda. Ini membantu pengguna dengan cepat mengidentifikasi situs Anda di antara banyak tab terbuka dan memperkuat identitas merek Anda.

Situs web modern memerlukan favicon dalam berbagai ukuran dan format untuk memastikan kompatibilitas di berbagai browser, perangkat, dan platform — dari browser desktop hingga layar beranda iOS dan peluncur aplikasi Android.

Tips profesional: Favicon yang dirancang dengan baik meningkatkan pengenalan merek dan membantu pengguna menavigasi antar tab browser dengan lebih efisien.

Mengapa Anda Memerlukan Berbagai Ukuran Favicon

Browser Desktop

16×16 & 32×32 — Ikon tab browser standar
48×48 — Taskbar Windows dan pintasan situs

Seluler & PWA

180×180 — Apple Touch Icon untuk layar beranda iOS
192×192 & 512×512 — Ikon Android dan Progressive Web App

Alat ini menghasilkan semua ukuran ini dari satu gambar, menghemat upaya Anda dalam mengubah ukuran dan mengonversi setiap gambar secara manual.

Cara Menggunakan Pembuat Favicon

Unggah Gambar Anda

Klik area unggah atau seret dan lepas file gambar. Format yang didukung mencakup PNG, JPG, SVG, WebP, dan GIF. Untuk hasil terbaik, gunakan gambar persegi dengan ukuran minimum 512×512 piksel.

Praktik terbaik: Gunakan gambar persegi beresolusi tinggi (512×512 atau lebih besar) untuk memastikan output yang tajam di semua ukuran.

Sesuaikan Pengaturan

Bentuk — Pilih antara Persegi (favicon standar), Sudut membulat (tampilan modern), atau Lingkaran (ikon gaya aplikasi)
Latar Belakang — Pertahankan transparan atau atur warna solid di belakang ikon Anda
Padding — Sesuaikan jarak di sekitar ikon Anda (0% hingga 40%) untuk memberikan ruang napas

Pratinjau

Lihat bagaimana favicon Anda terlihat di semua ukuran standar dalam kisi pratinjau. Mockup tab browser menunjukkan dengan tepat bagaimana tampilannya di tab browser nyata.

Unduh

ICO — Unduh favicon.ico yang berisi ukuran 16×16, 32×32, dan 48×48
PNG — Unduh file PNG 32×32 tunggal
Apple Touch — Unduh apple-touch-icon.png pada 180×180
Unduh Semua — Dapatkan file ZIP dengan semua ukuran (ICO + 8 PNG), kode HTML siap pakai, dan file site.webmanifest

Fitur

Format Output Beragam

Buat favicon dalam format ICO (file ikon multi-ukuran tradisional yang digunakan browser) dan file PNG individual di setiap ukuran standar.

File ICO dengan 16×16, 32×32, dan 48×48 tertanam
File PNG individual untuk semua ukuran
Kompatibilitas browser maksimal

Kustomisasi Bentuk

Pilih dari tiga opsi bentuk untuk mencocokkan gaya merek Anda.

Persegi — Tampilan favicon klasik
Membulat — Kelembutan modern dengan sudut proporsional
Lingkaran — Ikon gaya aplikasi bersih untuk PWA

Kontrol Latar Belakang & Padding

Atur warna latar belakang khusus untuk logo dengan transparansi, atau pertahankan transparan untuk tampilan bersih.

Warna latar belakang khusus
Dukungan latar belakang transparan
Padding yang dapat disesuaikan (0% hingga 40%)

Pratinjau Tab Browser Langsung

Lihat dengan tepat bagaimana favicon Anda akan muncul di tab browser nyata sebelum mengunduh.

Pembaruan pratinjau real-time
Mockup tab browser akurat
Penyesuaian dengan percaya diri

Paket Favicon Lengkap

Opsi "Unduh Semua" memberi Anda semua yang Anda butuhkan dalam satu file ZIP.

favicon.ico + semua 8 ukuran PNG
Tag tautan HTML siap pakai
site.webmanifest untuk dukungan PWA

Data Anda Tetap Pribadi

Semua pemrosesan terjadi di browser Anda:

Tanpa unggahan — Gambar tidak pernah meninggalkan perangkat Anda
Tanpa pelacakan — Kami tidak mengumpulkan data penggunaan
Pemrosesan 100% sisi klien

Pertanyaan yang Sering Diajukan

Ukuran gambar apa yang harus saya gunakan untuk hasil terbaik?

Gunakan gambar persegi setidaknya 512×512 piksel. Ini memastikan ukuran output terbesar (512×512 untuk PWA) tetap tajam. Gambar non-persegi secara otomatis disesuaikan dan berpusat dalam batas favicon sambil mempertahankan rasio aspek mereka.

Rekomendasi: Untuk hasil profesional, gunakan grafis vektor (SVG) atau file PNG beresolusi tinggi pada 1024×1024 atau lebih besar.

Apa perbedaan antara favicon ICO dan PNG?

Format ICO

File Multi-Ukuran Tradisional

Berisi berbagai ukuran dalam satu file
Didukung oleh semua browser secara native
File tunggal untuk 16×16, 32×32, 48×48
Terbaik untuk dukungan browser lama

Format PNG

File Individual Modern

File gambar individual per ukuran
Ditentukan menggunakan tag tautan HTML
Kualitas dan transparansi lebih baik
Lebih disukai oleh browser modern

Untuk kompatibilitas maksimal, gunakan keduanya: file ICO sebagai fallback dan file PNG untuk browser modern.

Apakah saya memerlukan semua ukuran favicon?

Persyaratan minimum:

favicon.ico (16/32/48) untuk browser desktop
apple-touch-icon.png (180×180) untuk iOS

Cakupan lengkap (direkomendasikan):

Semua ukuran minimum di atas
192×192 dan 512×512 untuk Android dan PWA
File site.webmanifest untuk Progressive Web Apps

Solusi cepat: Opsi "Unduh Semua" mencakup semua yang Anda butuhkan untuk cakupan platform lengkap.

Bagaimana cara menambahkan favicon ke situs web saya?

Unggah File

Tempatkan file favicon di direktori root situs web Anda (di mana index.html berada).

Tambahkan Kode HTML

Salin tag tautan HTML dari file favicon-usage.html yang disertakan dan tempel ke bagian <head> halaman Anda.

Uji

Hapus cache browser Anda dan muat ulang situs web untuk melihat favicon baru.

Disertakan: ZIP "Unduh Semua" mencakup kode HTML siap pakai dengan semua tag tautan yang diperlukan.

Bentuk mana yang harus saya pilih?

Persegi

Pilihan standar untuk situs web tradisional dan merek profesional.

Paling Umum

Membulat

Bekerja dengan baik untuk merek modern dan ramah dengan estetika yang lebih lembut.

Modern

Lingkaran

Ideal untuk ikon gaya aplikasi, terutama untuk PWA atau layar beranda seluler.

Gaya Aplikasi

Pratinjau setiap opsi untuk melihat mana yang terlihat terbaik dengan logo Anda.

Bisakah saya menggunakan latar belakang transparan?

Ya, latar belakang transparan didukung dan dipilih secara default. Ini bekerja dengan baik untuk logo yang ditempatkan di atas latar belakang situs web yang bervariasi.

Catatan penting: Beberapa platform (seperti iOS) menampilkan latar belakang putih atau hitam di belakang ikon transparan, jadi pertimbangkan untuk menggunakan warna latar belakang solid untuk Apple Touch Icons.

Praktik terbaik:

Gunakan latar belakang transparan untuk favicon desktop
Pertimbangkan latar belakang solid untuk ikon layar beranda seluler
Uji favicon Anda pada tema browser terang dan gelap