Cara Membuat Favicon untuk Situs Web Anda: Panduan File ICO
Ikon kecil di tab browser Anda melakukan lebih banyak pekerjaan daripada yang Anda kira. Favicon muncul di tab, bookmark, riwayat browser, layar beranda seluler, dan pintasan desktop. Favicon yang hilang membuat situs Anda terlihat belum selesai. Yang bagus membuatnya langsung dikenali di antara lusinan tab yang terbuka. Membuatnya membutuhkan waktu sekitar lima menit jika Anda mengetahui ukuran dan format yang diperlukan.
Apa itu Favicon?
Favicon (kependekan dari "favorite icon") adalah ikon kecil yang dikaitkan dengan situs web Anda. Browser menampilkannya di bilah tab di sebelah judul halaman Anda, di daftar bookmark, dan di riwayat browser. Perangkat seluler menggunakannya saat pengguna menambahkan situs Anda ke layar beranda mereka. Mesin pencari mungkin menampilkannya dalam hasil. Ini adalah salah satu elemen visual terkecil dari situs Anda, namun salah satu yang paling sering dilihat.
Ukuran Favicon yang Diperlukan
Konteks berbeda menampilkan favicon Anda dalam ukuran berbeda. Untuk mencakup semua kasus penggunaan, Anda memerlukan beberapa versi:
16x16 piksel — Tab peramban. Ini adalah ukuran favicon klasik dan versi terkecil yang Anda perlukan. 32x32 piksel — Pintasan bilah tugas, tab browser baru pada tampilan DPI tinggi. 48x48 piksel — Pintasan desktop Windows dan ikon situs.
180x180 piksel — Ikon Sentuhan Apple. Inilah yang digunakan iOS ketika seseorang menambahkan situs Anda ke layar beranda mereka. Ini adalah ukuran ponsel yang paling penting. 192x192 piksel — Ikon layar beranda Android Chrome dan ikon PWA (Aplikasi Web Progresif). 512x512 piksel — Layar pembuka PWA dan dialog pemasangan Android.
Format Favicon Dijelaskan
format ICO: Format favicon asli, dan satu-satunya yang berfungsi di mana saja — termasuk browser lama dan Internet Explorer. File ICO dapat menggabungkan beberapa ukuran menjadi satu file (biasanya 16x16, 32x32, dan 48x48). Untuk kompatibilitas maksimal, setiap situs web harus memiliki file favicon.ico di direktori root. Itu Konverter PNG ke ICO di iformat.io membuat pembuatannya menjadi sederhana.
format PNG: Alternatif modern. Favicon PNG lebih mudah dibuat (satu gambar per file) dan mendukung transparansi penuh. Semua browser modern mendukung favicon PNG. Kelemahannya adalah Anda memerlukan file terpisah untuk setiap ukuran, dan browser yang sangat lama mungkin tidak mendukungnya.
Format SVGnya: Opsi terbaru. Karena SVG adalah format vektor, satu file dapat diskalakan dengan sempurna ke berbagai ukuran — tanpa pikselasi, tanpa banyak file. Favikon SVG didukung oleh Chrome, Firefox, dan Edge, tetapi tidak oleh Safari (mulai awal tahun 2026). Favicon SVG juga mendukung adaptasi mode gelap melalui kueri media CSS, yang tidak dapat dilakukan oleh PNG dan ICO.
Langkah 1: Rancang Ikon Anda
Aturan terpenting dalam desain favicon: tetap sederhana. Ikon Anda akan ditampilkan sekecil 16x16 piksel — yaitu kotak yang hanya terdiri dari 256 kotak. Detail halus, garis tipis, dan teks kecil tidak akan terbaca pada ukuran tersebut. Favicon terbaik adalah bentuk yang berani dan dapat dikenali dengan kontras tinggi.
Gunakan logo Anda jika berfungsi pada ukuran kecil. Banyak perusahaan hanya menggunakan huruf pertama dari namanya atau versi sederhana dari tanda logonya. Hindari foto — foto menjadi gumpalan yang tidak dapat dikenali pada ukuran 16x16. Warna solid dan bentuk geometris sederhana paling cocok digunakan. Uji desain Anda dengan melihatnya pada ukuran 16x16 piksel sebelum melakukannya.
Langkah 2: Buat File ICO
Mulailah dengan gambar PNG persegi minimal 512x512 piksel. Sumber yang lebih besar memberi Anda hasil yang lebih bersih saat diperkecil. Gunakan Konverter PNG ke ICO untuk menghasilkan file ICO Anda. Konverter membuat ICO multi-ukuran yang berisi versi 16x16, 32x32, dan 48x48 — semuanya dari gambar sumber tunggal Anda.
Jika gambar sumber Anda adalah JPG (seperti logo yang diekspor dari alat desain), gunakan Konverter JPG ke ICO alih-alih. Untuk logo vektor dalam format SVG, Konverter SVG ke ICO menghasilkan hasil paling tajam karena merender vektor pada setiap ukuran target.
Langkah 3: Tambahkan Kode HTML
Tempatkan file favicon.ico Anda di direktori root situs web Anda. Kebanyakan browser akan menemukannya secara otomatis di /favicon.ico bahkan tanpa tag HTML. Namun untuk kontrol eksplisit dan untuk mendukung semua format, tambahkan tag ini di dalam HTML Anda
<head> bagian:<link rel="icon" type="image/x-icon" href="/favicon.ico"> — Favicon ICO klasik. <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> — Favicon PNG untuk browser modern. <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> — Ikon layar beranda perangkat Apple.Langkah 4: Hasilkan Ikon Apple Touch dan Ikon Android
Ikon Apple Touch (180x180 PNG) ditampilkan saat pengguna iOS menambahkan situs Anda ke layar beranda mereka. Buat ikon versi PNG 180x180 piksel dengan beberapa bantalan di tepinya — iOS akan menerapkan sudut membulatnya sendiri. Beri nama apple-touch-icon.png dan rujuk dalam HTML Anda.
Untuk Android dan Aplikasi Web Progresif, Anda memerlukan ikon PNG 192x192 dan 512x512. Ini biasanya direferensikan dalam file manifes aplikasi web (manifest.json atau site.webmanifest). File manifes juga memungkinkan Anda menyetel nama aplikasi, warna tema, dan mode tampilan saat pengguna menginstal situs Anda sebagai aplikasi.
Kesalahan Umum Favicon
Menggunakan terlalu banyak detail: Logo kompleks dengan garis tipis dan teks kecil tampak bagus pada ukuran 200 piksel, namun menjadi noda yang tidak terbaca pada ukuran 16 piksel. Sederhanakan tanpa ampun. Melupakan mode gelap: Jika favicon Anda menggunakan warna gelap dengan latar belakang transparan, favicon tersebut tidak akan terlihat di browser dengan bilah tab gelap. Pertimbangkan untuk menambahkan batas terang atau menggunakan favicon SVG dengan CSS mode gelap.
Tidak menguji pada ukuran sebenarnya: Selalu pratinjau favicon Anda dalam ukuran 16x16 di tab browser sebenarnya. Apa yang tampak bagus di alat desain Anda pada zoom 400% mungkin tidak berfungsi pada ukuran sebenarnya. Melewatkan file ICO: Meskipun favicon PNG berfungsi di browser modern, memiliki favicon.ico di direktori root Anda memastikan kompatibilitas dengan setiap browser dan crawler, termasuk sistem lama.
Menguji Favicon Anda
Setelah mengunggah file favicon dan menambahkan HTML, uji di beberapa browser: minimal Chrome, Firefox, Safari, dan Edge. Periksa apakah ikon muncul dengan benar di tab, di bookmark (tandai halaman dan verifikasi), dan di perangkat seluler (tambahkan ke layar beranda di iOS dan Android). Cache browser bisa menjadi agresif dengan favicon — jika Anda tidak melihat ikon baru, coba bersihkan cache atau buka jendela penyamaran.
Jika Anda perlu pergi ke arah lain — mengekstraksi ikon dari file ICO yang ada — itu Konverter ICO ke PNG mengekstrak gambar yang disematkan. Ini berguna ketika Anda perlu memperbarui favicon tetapi hanya memiliki file ICO dan bukan karya seni sumber aslinya.
Pembuatan favicon yang tepat membutuhkan waktu lima menit, tetapi memberikan tampilan profesional dan sempurna pada situs web Anda. Mulailah dengan desain yang sederhana dan berani, buat file ICO Anda dengan konverter online, tambahkan tag HTML, dan uji di seluruh browser. Situs Anda akan terlihat lengkap — dan pengguna Anda akan dapat menemukan tab Anda di antara lusinan tab yang mereka buka.