Cara Membuat Favicon
Membuat favicon adalah pekerjaan dua menit dengan alat yang tepat. Mulai dari gambar sumber persegi — setidaknya 512×512 piksel — jalankan melalui favicon generator, dan dapatkan paket lengkap: .ico multi-ukuran, SVG, apple-touch-icon, dan manifes PNGs. Panduan ini memandu setiap langkah mulai dari persiapan sumber hingga verifikasi browser. Untuk referensi mendalam lihat juga full tutorial.
Favicon adalah ikon kecil yang ditampilkan browser di bilah tab, bilah alamat, dan daftar bookmark. Di perangkat seluler, ini menjadi ikon layar utama saat pengguna menyimpan situs Anda. Pada Windows muncul di pin taskbar dan pintasan desktop. Membuat favicon dengan benar adalah upaya kecil dengan dampak merek yang sangat besar — setiap tampilan halaman dimulai dengan ikon Anda berada di tab pengguna.
Pengaturan favicon modern bukanlah sebuah file tunggal — ini adalah kumpulan yang terkoordinasi. .ico multi-ukuran menangani fallback browser universal. SVG menghadirkan rendering tajam dan terukur pada browser modern, termasuk dukungan mode gelap. 180×180 PNG (apple-touch-icon) adalah yang digunakan iOS untuk pemasangan layar utama. 192×192 dan 512×512 PNG memberi makan prompt instalasi Android PWA. Satu gambar sumber yang dipersiapkan dengan baik menghasilkan semua ini sekaligus.
Persiapan gambar sumber adalah langkah yang paling diabaikan. Logo Anda harus berbentuk persegi — potongan asimetris selalu menghasilkan hasil yang melebar. Rancang versi sederhana dari tanda merek Anda yang terbaca jelas dalam ukuran kecil: kurangi garis halus, hilangkan teks kecil, dan tingkatkan kontras. Apa yang tampak elegan pada ukuran 512x512 dapat menjadi gumpalan yang tidak terbaca pada ukuran 16x16 jika Anda melewatkan langkah penyederhanaan ini.
SVG adalah format sumber yang ideal karena tidak bergantung pada resolusi. Grafik vektor di-rasterisasi ke kerapatan piksel apa pun tanpa kehilangan kualitas. Jika Anda hanya memiliki raster PNG atau JPG, pastikan ukurannya minimal 512×512 sebelum membuatnya — memperkecil skala dari yang lebih kecil akan menyebabkan keburaman yang bertambah pada setiap langkah pengubahan ukuran dan menghasilkan ikon tab yang kabur.
Format .ico adalah sebuah wadah, bukan gambar tunggal. Ini menampung beberapa bingkai raster — biasanya 16×16, 32×32, 48×48, dan 64×64 — dalam satu file. Browser mem-parsing direktori ICO dan hanya merender frame yang paling sesuai dengan kepadatan tampilan yang dibutuhkan. Pendekatan file tunggal ini berarti Anda tidak memerlukan tag tautan terpisah untuk setiap resolusi — satu tag mencakup semua ukuran tab.
Unggah gambar sumber Anda ke favicon generator. Alat ini memproses semuanya secara lokal di browser Anda — gambar Anda tidak pernah keluar dari perangkat Anda. Dalam hitungan detik, ia menghasilkan paket unduhan yang berisi favicon.ico, favicon.svg, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png, dan site.webmanifest, ditambah tag tautan HTML yang siap ditempel.
Menempatkan file sangatlah mudah. Letakkan semua file yang dihasilkan ke direktori root publik situs Anda — folder yang sama yang melayani index.html Anda. Untuk proyek Vite dan Buat Aplikasi React, ini adalah folder /public. Untuk proyek Next.js App Router, tempatkan favicon.ico di dalam /app dan file PNG di /public. Untuk situs statis, letakkan semuanya di samping file HTML Anda.
Tag tautan HTML memberi tahu browser file mana yang akan digunakan untuk setiap konteks. Minimumnya adalah satu baris: `<link rel='icon' href='/favicon.ico'>`. Kumpulan lengkap yang direkomendasikan menambahkan tiga baris lagi: satu untuk varian SVG, satu untuk apple-touch-icon, dan satu lagi untuk manifes web. Tempelkan cuplikan yang dihasilkan ke dalam elemen `<head>` Anda. Urutan tag tidak menjadi masalah asalkan mendahului `</head>`.
Caching browser adalah penyebab utama kebingungan ketika favicon tidak muncul untuk diperbarui. Browser melakukan cache /favicon.ico per asal dan mungkin tidak mengikuti header kontrol cache standar seperti yang mereka lakukan untuk aset lainnya. Jika ikon lama Anda tetap ada, buka jendela penyamaran baru, atau tambahkan string kueri penghancur cache seperti `?v=2` ke href di tag tautan Anda untuk memaksa browser mengambil file yang diperbarui.
Kesalahan umum termasuk mengunggah gambar non-persegi (menghasilkan ikon memanjang), menggunakan sumber di bawah 256×256 piksel (buram pada ukuran layar lebih besar), dan menghilangkan apple-touch-icon (penginstalan layar utama XiOS malah menampilkan tangkapan layar halaman). Ketiganya diselesaikan dengan memulai dari sumber persegi 512×512 PNG atau SVG dan membiarkan generator menangani setiap ukuran keluaran.
Dukungan mode gelap layak untuk dikembangkan sejak awal. Banyak browser menampilkan bilah tab dalam warna chrome gelap saat sistem pengguna dalam mode gelap. Jika ikon Anda berupa tanda gelap pada latar belakang transparan, ikon tersebut dapat hilang di tab gelap. Kirimkan favicon SVG dengan blok gaya `@media (prefers-color-scheme: dark)` tertanam yang mengubah warna isian — tidak diperlukan tag HTML tambahan, cukup file SVG yang diperbarui.
Verifikasi favicon Anda menggunakan live favicon tester setelah penerapan. Penguji menyimulasikan tab browser, bookmark, dan konteks perintah penginstalan serta menunjukkan bagaimana ikon Anda ditampilkan pada 16, 32, 48, 128, dan 512 piksel secara berdampingan. Periksa juga secara manual tab yang disematkan di Chrome dan Safari, dan gunakan 'Tambahkan ke Layar Beranda' di iOS untuk mengonfirmasi apple-touch-icon.
Untuk penelusuran khusus platform, lihat favicon for WordPress, favicon for Shopify, favicon for React, dan favicon for Next.js. Kumpulan file yang dihasilkan identik di semua platform — yang berbeda-beda adalah tempat Anda mengunggah file dan cara platform memasukkan atau mengganti tag tautan HTML.
Kunjungi kembali favicon Anda setiap kali Anda mengubah citra. Favicon yang di-cache tetap ada di bookmark dan layar beranda seluler lama setelah desain ulang situs ditayangkan. Memperbarui string versi di tag tautan Anda href memaksa browser mengambil file baru pada kunjungan berikutnya, secara bertahap menggantikan ikon lama di semua lokasi cache. Lihat panduan best favicon format untuk perincian format demi format mengenai ukuran file dan trade-off kompatibilitas.
Cara kerjanya
- 1
Siapkan gambar sumber persegi
Ekspor logo atau ikon Anda sebagai 512×512 PNG dengan latar belakang transparan, atau sebagai SVG dengan kotak viewBox (misalnya, `viewBox='0 0 512 512'`). Sederhanakan detail halus yang tidak akan terlihat pada ukuran 16×16.
- 2
Hasilkan paket favicon Anda
Unggah sumber ke [favicon generator](tool:favicon-generator). Alat ini menghasilkan favicon.ico (multi-ukuran 16/32/48/64), favicon.svg, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png, dan site.webmanifest — semuanya dalam satu pass.
- 3
Salin semua file ke root situs Anda
Tempatkan setiap file dari zip unduhan ke root publik proyek Anda — direktori yang melayani index.html. Untuk Next.js App Router, favicon.ico masuk /app; PNG masuk /public.
- 4
Tempelkan tag tautan HTML ke dalam <head>
Salin cuplikan HTML yang dihasilkan dan tambahkan ke dalam elemen `<head>` Anda. Set lengkap mencakup fallback .ico, varian SVG, apple-touch-icon, dan tautan manifes — total enam baris.
- 5
Verifikasi di seluruh browser dan perangkat
Buka situs Anda dalam format Chrome, Safari, Firefox, dan Edge. Periksa tab, bilah bookmark, dan bilah alamat. Pada iOS, ketuk lembar Bagikan dan 'Tambahkan ke Layar Utama' untuk menguji apple-touch-icon. Gunakan [favicon tester](utility:favicon-tester) untuk simulasi cepat.
- 6
Penghancuran cache saat memperbarui favicon yang ada
Jika mengganti favicon langsung, tambahkan string versi di tag tautan Anda href (`?v=2`, `?v=3`, dll.). Hal ini memaksa semua browser untuk mengambil file yang diperbarui pada pemuatan halaman berikutnya daripada menyajikan versi cache.
Coba sekarang
Buat favicon Anda sekarang
Pembuat FaviconFAQ
Apa cara termudah untuk membuat favicon?+
Unggah PNG atau SVG persegi berukuran 512×512 ke generator FetchFavicon. Ini menghasilkan semua file yang diperlukan — .ico, SVG, apple-touch-icon, manifes PNGs — plus HTML siap tempel dalam waktu kurang dari satu detik, tanpa registrasi dan tanpa unggahan server.
Berapa ukuran gambar sumber saya?+
Setidaknya 512×512 piksel, idealnya sebagai SVG. Menjadi lebih kecil berisiko terlihat kabur pada ukuran 256×256 yang digunakan oleh Windows dan pada ukuran 512×512 yang diperlukan untuk perintah penginstalan PWA. Memperbesar gambar kecil akan menambah penurunan kualitas pada setiap langkah pengubahan ukuran.
Apakah saya memerlukan apple-touch-icon?+
Boleh, jika ada pengunjung yang menggunakan iPhone atau iPad. Tanpanya, pemasangan layar beranda iOS akan menampilkan gambar mini tangkapan layar berkualitas rendah dari laman Anda dan bukan merek Anda. Anda hanya memerlukan ukuran 180×180 PNG yang ditautkan dengan `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>`.
Mengapa favicon saya tidak muncul di tab browser?+
Paling sering ini adalah masalah cache. Buka jendela pribadi/penyamaran dan navigasikan ke situs Anda. Jika masih tidak muncul, verifikasi bahwa favicon.ico disajikan di root domain Anda dan jalur href tag tautan teratasi dengan benar — periksa apakah ada kesalahan ketik dan garis miring di depan yang hilang.
Apakah saya memerlukan .ico dan SVG?+
Ya, untuk cakupan penuh. .ico menangani browser lama, pintasan Windows, dan alat pihak ketiga yang mengambil /favicon.ico secara langsung. SVG menangani rendering tajam pada Chrome, Firefox, Edge, dan Safari 15+ dan mendukung peralihan warna mode gelap. Ukuran file gabungan biasanya di bawah 30 KB.
Berapa lama waktu yang dibutuhkan untuk menyebarkan perubahan favicon?+
Mulai dari hitungan detik hingga beberapa hari, bergantung pada seberapa agresif browser menyimpan cache aslinya. Perbaikan tercepat adalah menambahkan string kueri baru (`?v=2`) ke favicon href Anda. Hal ini membuat browser memperlakukannya sebagai URL baru dan segera mengambil salinan baru.
Bisakah saya menggunakan JPEG sebagai sumber favicon saya?+
Anda dapat mengunggah JPEG ke generator, tetapi JPEG tidak mendukung transparansi. Jika ikon Anda memerlukan latar belakang transparan — yang terlihat paling baik di tab browser — mulailah dari PNG-32 atau SVG. Generator akan mengonversi ke .ico dan PNG dengan benar.