Cara Membuat Favicon
favicon modern lebih dari sekadar gambar berukuran 16×16. Panduan ini membahas persiapan sumber, pembuatan multi-ukuran, penyiapan HTML, contoh dunia nyata, dan perbaikan untuk masalah yang membuat sebagian besar tim tersandung.
Apa itu favicon?
favicon adalah ikon kecil yang ditampilkan browser di tab, bilah bookmark, daftar riwayat, dan bilah alamat. Di ponsel, ini menjadi ikon layar beranda ketika seseorang menyimpan situs Anda. Pada Windows muncul di pin taskbar dan pintasan desktop.
Kata ini berasal dari ikon favorit, namun pekerjaannya telah berkembang jauh melampaui satu GIF berukuran 16×16. favicon saat ini adalah kelompok aset kecil: favicon.ico tingkat root, varian opsional SVG dan PNG, ikon sentuh apel untuk iOS, dan ikon manifes untuk PWA yang dapat diinstal.
Pengguna jarang mengomentari favicon yang bagus, tetapi mereka langsung melihat ada yang hilang atau buram. Ikon yang tajam menandakan kesempurnaan dan membuat tab Anda mudah dikenali di antara dua puluh halaman yang terbuka.
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
Siapkan gambar sumber Anda
Mulailah dari gambar persegi minimal 512x512 piksel. SVG dengan kotak viewBox sangat ideal karena dapat diskalakan dengan rapi ke setiap ukuran raster yang akan Anda ekspor.
Hindari goresan tipis, tipografi halus, dan gradien rumit. Pada ukuran 16x16, detail garis rambut menyatu menjadi bubur abu-abu. Sederhanakan tandanya: lebih sedikit bentuk, kontras lebih tinggi, lebih banyak bantalan di sekitar mesin terbang.
Jika logo Anda horizontal, buat potongan persegi yang memusatkan simbol tanpa tanda kata. Bentuk huruf di bawah tinggi 8 piksel jarang bertahan dalam penurunan skala.
Ekspor PNG-32 dengan transparansi saat raster adalah satu-satunya pilihan Anda. Latar belakang putih yang dipanggang akan terlihat salah di browser chrome yang gelap dan pada peluncur seluler berwarna.
Hasilkan .ico multi-ukuran
Gabungkan bingkai 16, 32, 48, 64, 128, dan 256 piksel dalam satu file favicon.ico. Browser dan Windows membaca header direktori dan hanya mendekode ukuran yang diperlukan.
Tempatkan favicon.ico di root situs Anda (/favicon.ico). Meskipun Anda mendeklarasikan tag <link> modern, crawler dan klien lama masih menyelidiki jalur tersebut berdasarkan konvensi.
Generator favicon kami melakukan rasterisasi setiap ukuran di sisi klien dalam waktu kurang dari satu detik. Gambar sumber Anda tidak pernah keluar dari browser, hal ini penting jika tandanya adalah logo produk yang belum dirilis.
Tambahkan tag HTML
Letakkan tag ini di <head> untuk penyiapan lengkap tahun 2026:
<link rel="icon" href="/favicon.ico" size="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Garis SVG memberikan tab tajam pada Chromium dan Firefox. Baris .ico mencakup fallback Safari, pintasan Windows, dan pembaca RSS yang mengabaikan SVG.
Contoh dunia nyata
Situs pemasaran statis: unggah logomark Anda berukuran 512×512 PNG, buat favicon.ico plus ikon sentuh apel berukuran 180×180, tambahkan empat baris <link>, terapkan ke /public atau root web. Total waktu: kurang dari lima menit.
Aplikasi React / Vite: tempatkan ikon di /public, rujuk dengan jalur relatif root di index.html. Vite menyalin /public tidak berubah pada waktu build, sehingga /favicon.ico terselesaikan dengan benar dalam produksi.
WordPress: lewati manual HTML — gunakan Penampilan → Kustomisasi → Identitas Situs → Site Icon. Unggah sumber 512×512; WordPress mengeluarkan tag yang tepat secara otomatis. Lihat tutorial WordPress kami untuk tips menghilangkan cache.
Merek mode gelap: mengekspor SVG yang pengisiannya dialihkan ke dalam @media (prefers-color-scheme: gelap). Pasangkan dengan fallback .ico netral untuk klien yang tidak pernah memuat SVG.
Verifikasi di setiap browser
Penyegaran paksa (Ctrl+Shift+R atau Cmd+Shift+R) di Chrome, Safari, Firefox, dan Edge. Reload normal sering kali menyimpan cache favicon selama berhari-hari.
Periksa empat permukaan: tab browser, bilah bookmark, Tambahkan ke Layar Utama di iOS, dan ikon bilah tugas Windows yang disematkan. Setiap permukaan mungkin meminta resolusi berbeda dari paket Anda.
Buka DevTools → Jaringan, filter berdasarkan ico atau png, muat ulang, dan konfirmasi 200 respons untuk setiap URL ikon yang Anda nyatakan. Satu angka 404 di apple-touch-icon.png adalah kesalahan yang umum terjadi.
Pertanyaan yang sering diajukan
Apakah saya masih memerlukan favicon.ico jika saya memiliki SVG? Ya. Pertahankan .ico sebagai cadangan universal. SVG adalah penyempurnaan, bukan pengganti.
Berapa minimum favicon yang layak? favicon.ico multi-ukuran di /favicon.ico. Segala sesuatu yang lain meningkatkan kejelasan pada layar DPI tinggi dan layar beranda seluler.
Bisakah saya menggunakan JPG? Bisa, tetapi Anda kehilangan transparansi. PNG atau SVG hampir selalu lebih baik untuk ikon antarmuka.
Seberapa sering saya harus memperbarui favicon? Kapan pun tanda merek Anda berubah. Masukkan kueri ?v=2 pada tag <link> satu kali untuk mengalahkan cache browser yang agresif.
Pemecahan masalah
Ikon tidak diperbarui setelah penerapan: browser menyimpan cache favicon secara terpisah dari HTML. Segarkan ulang, hapus data situs, atau tambahkan ?v=2 ke URL ikon untuk sementara.
Ikon tab buram: sumber Anda terlalu kecil atau tidak berbentuk persegi. Regenerasi dari 512×512 atau SVG; verifikasi .ico benar-benar berisi bingkai 32x32.
Kotak putih di sekitar logo: sumbernya memiliki latar belakang buram. Ekspor ulang dengan transparansi dan buat ulang .ico dengan entri terkompresi PNG.
Berfungsi secara lokal tetapi tidak dalam produksi: konfirmasi file berada di root web publik, tidak hanya di src/. Periksa cache CDN dan jalur peka huruf besar/kecil di server Linux.
Daftar periksa langkah demi langkah
Ekspor atau temukan master persegi dengan ukuran 512×512 atau lebih besar. Konfirmasikan transparansi, profil warna sRGB, dan tidak ada lapisan latar belakang tersembunyi di file desain Anda.
Jalankan master melalui generator favicon sisi klien. Unduh favicon.ico, favicon.svg jika berlaku, apple-touch-icon.png, dan manifeskan PNG dalam satu pass.
Unggah semua file ke root web publik Anda. Pada host statis artinya folder yang sama dengan index.html; pada kerangka kerja, gunakan direktori /public atau /static yang dipetakan ke /.
Tempelkan blok <link> yang direkomendasikan ke dalam <head> sebelum skrip pemblokiran render apa pun. Penempatan awal membantu browser menemukan ikon pada tampilan pertama.
Validasi dengan penyegaran paksa di Chrome, Safari, dan Firefox. Sematkan tab, tandai halaman, dan uji Tambahkan ke Layar Utama di iPhone asli jika lalu lintas iOS penting bagi Anda.
Dokumentasikan kumpulan ikon di README atau sistem desain Anda sehingga perubahan merek berikutnya tidak dimulai dari satu ukuran 32×32 PNG yang ditemukan seseorang di email.
Kesalahan umum yang harus dihindari
Menggunakan logo horizontal penuh yang diperbesar menjadi slot 16×16 — teks menjadi noise yang tidak dapat dibaca. Pangkas ke simbol.
Hanya menyediakankan 16×16 PNG yang diubah namanya menjadi .ico tanpa direktori multi-ukuran yang tepat — Windows dan tab Retina kelas atas dan buram.
Melupakan ikon sentuh apel sambil terobsesi dengan tab desktop — pengguna iOS merupakan bagian terbesar dari lalu lintas web seluler.
Mengarahkan <link href> ke jalur CDN yang berbeda antara staging dan produksi tanpa build yang sadar lingkungan.
Dengan asumsi WordPress, Shopify, atau Webflow secara ajaib akan memperbaiki unggahan sumber beresolusi rendah. Sampah masuk, sampah keluar dalam berbagai ukuran.