Apa Itu Favicon & Cara Memasangnya di Website

Favicon adalah ikon kecil yang mewakili sebuah website. Singkatan dari "favorite icon", favicon adalah gambar mungil yang muncul di tab browser di sebelah judul halaman, di daftar bookmark, di riwayat penjelajahan, dan di layar utama ponsel saat seseorang menyimpan situs-mu sebagai aplikasi (PWA). Singkatnya, favicon adalah wajah brand-mu di seluruh permukaan tempat website disimpan, dibuka, dan dibagikan.

Meski berukuran sekecil 16 piksel, favicon adalah salah satu sentuhan branding paling sering dilihat. Setiap kali pengunjung membuka banyak tab, favicon-mu lah yang membantu mereka menemukan situsmu di antara puluhan tab lain. Tanpa favicon, browser hanya menampilkan ikon dokumen kosong yang membuat situsmu terasa belum jadi.

Di Mana Favicon Muncul?

Favicon hadir di lebih banyak tempat daripada yang dibayangkan kebanyakan orang:

• Tab browser — di sebelah kiri judul halaman, di Chrome, Firefox, Safari, dan Edge.
• Bookmark / favorit — saat pengunjung menyimpan halamanmu, favicon menjadi penandanya.
• Riwayat dan saran alamat — browser menampilkan favicon di samping URL yang pernah dikunjungi.
• Layar utama ponsel (PWA) — saat seseorang memilih "Tambahkan ke Layar Utama", apple-touch-icon atau ikon android-chrome menjadi ikon aplikasi situsmu.
• Hasil pencarian seluler — Google menampilkan favicon di samping nama domain pada hasil pencarian di ponsel.
• Ubin Windows dan pintasan — mstile dan safari-pinned-tab muncul di konteks sistem operasi tertentu.

Karena favicon muncul di banyak konteks dengan bentuk berbeda — kotak, bulat, bahkan bermasker — kamu butuh lebih dari satu berkas, bukan hanya satu file .ico mungil.

Mengapa Favicon Penting untuk Brand dan Kepercayaan

Favicon yang rapi memberi sinyal bahwa situsmu dikelola dengan serius. Di tab yang penuh sesak, favicon membantu pengunjung mengenali brand-mu dalam sekejap — pengenalan visual instan yang membangun keakraban dan loyalitas. Sebaliknya, ikon dokumen kosong atau favicon buram langsung terasa amatir, dan kesan pertama itu memengaruhi kepercayaan sebelum pengunjung membaca satu kata pun.

Untuk bisnis kecil dan UMKM, favicon adalah peluang branding gratis yang sering terlewat. Ia juga bagian dari identitas digital yang utuh. Kalau kamu sedang membangun brand dari nol, mulailah dari fondasi yang benar — baca cara membuat logo UMKM yang profesional, karena favicon yang baik lahir dari logo yang memang dirancang untuk terbaca kecil.

Ukuran dan Format Favicon yang Dibutuhkan Hari Ini

Standar favicon telah berkembang. Pada 2026, satu file favicon.ico saja tidak lagi cukup untuk menutupi semua perangkat. Berikut set yang direkomendasikan:

• favicon.ico — kontainer multi-ukuran berisi 16×16, 32×32, dan 48×48. Inilah fallback klasik untuk browser dan bookmark lama.
• favicon.svg — versi vektor yang skalanya tak terbatas dan tajam di layar resolusi tinggi. Browser modern (Chrome, Firefox, Edge, Safari 14+) sudah mendukungnya, dan SVG bisa beradaptasi ke mode gelap lewat CSS.
• PNG 16×16 dan 32×32 — ikon tab untuk browser yang lebih menyukai PNG.
• apple-touch-icon 180×180 — ikon layar utama iOS. Buat solid (tanpa transparansi), dengan sedikit padding, karena iOS menambahkan sudut membulat sendiri.
• android-chrome 192×192 dan 512×512 — untuk ikon layar utama dan dialog instalasi PWA di Android.
• maskable icon — varian dengan "zona aman" 80% di tengah, agar Android bisa memotongnya ke bentuk apa pun (lingkaran, kotak membulat) tanpa memotong markmu.
• mstile dan safari-pinned-tab — opsional, untuk ubin Windows dan tab tersemat Safari (yang butuh SVG satu warna).
• site.webmanifest dan browserconfig.xml — berkas konfigurasi yang memberi tahu Android dan Windows tempat menemukan ikon dan warna tema.

Terasa banyak? Memang. Inilah alasan banyak orang memasang favicon setengah jadi. EmblemKit merakit seluruh set favicon ini secara otomatis dari logomu — favicon.ico, PNG/WebP/AVIF, apple-touch, android-chrome, maskable, mstile, safari-pinned-tab, plus site.webmanifest, browserconfig.xml, dan head-snippet siap tempel.

Cara Memasang Favicon di Situs HTML Biasa

Untuk situs HTML statis, prosesnya dua langkah: salin berkas favicon ke folder root (tempat index.html berada), lalu tempel snippet link di dalam bagian setiap halaman.

Langkah pertama, taruh semua berkas (favicon.ico, favicon.svg, apple-touch-icon.png, dan seterusnya) di direktori root situsmu. Langkah kedua, tambahkan tag berikut di dalam :

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.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">

Perhatikan path yang diawali garis miring (/favicon.ico) — ini menunjuk ke root domain, sehingga favicon bekerja di setiap halaman, bukan hanya beranda. Setelah menyimpan, muat ulang halaman; bila favicon belum muncul, bersihkan cache browser karena browser cenderung menyimpan favicon secara agresif.

Cara Memasang Favicon di WordPress

WordPress membuatnya jauh lebih mudah — kamu tidak perlu menyentuh kode sama sekali untuk kebutuhan dasar. Masuk ke dasbor, lalu buka Tampilan (Appearance) > Sesuaikan (Customize) > Identitas Situs (Site Identity). Di sana ada bidang Ikon Situs (Site Icon). Unggah gambar persegi minimal 512×512 piksel, dan WordPress akan otomatis menghasilkan ukuran favicon yang dibutuhkan untuk tab, bookmark, dan layar utama.

Untuk hasil terbaik, unggah PNG persegi 512×512 dengan markmu di tengah dan sedikit ruang kosong di tepi. Bila kamu ingin memakai favicon SVG sejati di WordPress (yang lebih tajam), kamu butuh plugin seperti Safe SVG karena WordPress memblokir unggahan SVG secara default demi keamanan. Pasang plugin tersebut lebih dahulu, baru unggah SVG-mu.

Kalau kamu sudah punya brand kit lengkap, kamu bisa langsung memakai berkas yang sesuai. Pelajari cara memanfaatkan setiap berkas di panduan cara pakai brand kit.

Kesalahan Umum Memasang Favicon

Beberapa kesalahan yang membuat favicon tampil buruk atau tidak muncul sama sekali:

• Hanya memasang file .ico mungil. Tanpa apple-touch-icon dan ikon android-chrome, situsmu terlihat rusak saat disimpan ke layar utama ponsel.
• Favicon buram. Memperbesar gambar kecil membuatnya pecah. Selalu mulai dari sumber resolusi tinggi atau dari vektor.
• Tidak ada apple-touch-icon. iOS akan menangkap tangkapan layar halaman sebagai ikon — hasilnya berantakan.
• Path salah. Memakai path relatif (favicon.ico tanpa garis miring) membuat ikon hanya bekerja di sebagian halaman. Selalu pakai path absolut dari root (/favicon.ico).
• Lupa membersihkan cache. Browser menyimpan favicon lama dengan keras kepala; uji di mode penyamaran bila perubahan belum terlihat.

Mendesain Favicon yang Terbaca di 16 Piksel

Tantangan terbesar favicon adalah ukurannya. Pada 16×16 piksel, detail halus, teks panjang, dan gradasi rumit menghilang menjadi noda berwarna. Logo lengkap dengan nama bisnis hampir tidak pernah bekerja sebagai favicon.

Rahasianya adalah menyederhanakan markmu. Ambil elemen paling ikonik dari logomu — sebuah simbol, inisial, atau bentuk tunggal — dan buang sisanya. Pakai satu atau dua warna dengan kontras kuat agar mark tetap jelas di latar terang maupun gelap. Hindari garis tipis yang lenyap saat diperkecil, dan beri sedikit ruang napas di tepi.

Aturan praktisnya: kalau markmu masih dikenali setelah diperkecil ke seukuran favicon, desainmu kuat. Prinsip kesederhanaan ini sama persis dengan yang membuat logo bagus — pelajari format dan varian file logo agar kamu tahu berkas mana yang menjadi sumber favicon.

Tanya Jawab Singkat

Apakah favicon wajib? Tidak wajib secara teknis, tetapi sangat disarankan. Tanpa favicon, situsmu terlihat belum selesai dan kehilangan peluang branding gratis di setiap tab.

Berapa ukuran favicon ideal? Tidak ada satu ukuran. Hari ini kamu butuh satu set: favicon.ico (16/32/48), SVG, apple-touch 180×180, dan android-chrome 192/512. Mulailah desain dari 512×512 lalu turunkan.

Apa bedanya favicon dan apple-touch-icon? Favicon muncul di tab dan bookmark browser; apple-touch-icon adalah ikon layar utama saat situsmu disimpan sebagai aplikasi di iPhone atau iPad.

Bisakah pakai SVG sebagai favicon? Bisa, dan disarankan untuk browser modern karena tajam di semua resolusi dan bisa beradaptasi ke mode gelap. Tetap sediakan favicon.ico sebagai fallback.

Mulai dari Favicon yang Benar

Favicon yang baik adalah hasil sampingan dari logo yang dirancang dengan benar. Daripada menambal satu file .ico belakangan, mulailah dari brand kit yang sudah memikirkan ukuran kecil sejak awal. EmblemKit membangun logomu sebagai vektor asli lalu menurunkan seluruh set favicon — favicon.ico, PNG/WebP/AVIF, apple-touch, android-chrome, maskable, mstile, safari-pinned-tab, site.webmanifest, browserconfig.xml, dan head-snippet siap tempel — sekaligus. Lihat pilihan paket dan harga, atau langsung coba di studio tanpa akun.