Apa Itu Favicon dan Mengapa Penting untuk Website Anda?

A favicon (kependekan dari "favorite icon") adalah gambar persegi kecil yang mewakili sebuah website di tab browser, bookmark, daftar riwayat, hasil pencarian Google, layar utama ponsel, dan aplikasi web yang terinstal. Favicon penting karena memberi situs Anda wajah yang mudah dikenali sekilas, memudahkan menemukan situs di antara banyak tab yang terbuka, menandakan bahwa situs tersebut profesional dan tepercaya, serta kini ditampilkan di samping nama situs Anda di hasil Google. Tanpa favicon, pengunjung hanya melihat ikon globe generik atau halaman kosong, dan server Anda akan memenuhi lognya dengan error 404. Anda dapat membuat set favicon lengkap secara gratis dengan generator favicon MakeFav.

Apa itu favicon?

Favicon adalah grafik merek mungil, biasanya versi sederhana dari logo atau satu huruf atau simbol, yang diambil browser dan perangkat lunak lain dari website Anda dan ditampilkan di mana pun diperlukan pengenal visual yang ringkas. Di browser desktop, favicon biasanya digambar pada ukuran 16 kali 16 piksel CSS, meskipun file aslinya sebaiknya lebih besar agar tetap tajam pada layar berkepadatan tinggi.

Secara teknis, favicon hanyalah file gambar yang dirujuk dari HTML Anda (atau ditemukan di lokasi default) dan diunduh oleh user agent secara terpisah dari konten halaman. Saat ini, "favicon" jarang berupa satu file saja. Situs modern biasanya menyertakan beberapa versi dari ikon yang sama agar browser, mesin pencari, iOS, dan Android semuanya mendapatkan format dan ukuran yang sesuai.

Sejarah singkat favicon

Favicon berawal dari Maret 1999, ketika Microsoft merilis Internet Explorer 5. Browser tersebut memungkinkan pengguna menyimpan halaman ke daftar "Favorites", dan juga mencari file ikon kecil bernama favicon.ico di root situs untuk ditampilkan di samping setiap entri yang disimpan. Idenya sederhana: jika sebuah situs menyediakan /favicon.ico, ikon itu akan muncul di samping bookmark.

Browser lain segera mengadopsi fitur ini, dan penjelajahan dengan tab membuatnya jauh lebih berguna. Seiring tab menjadi cara utama orang bernavigasi, favicon berubah dari hiasan bookmark menjadi alat bantu navigasi yang penting. Seiring waktu, pendekatannya berkembang:

• Awal 2000-an: elemen <link rel="icon"> memungkinkan situs menunjuk ke ikon di URL mana pun, bukan hanya di root, dan file PNG serta GIF mulai diterima oleh browser selain IE.
• 2010-an: Apple memperkenalkan apple-touch-icon untuk layar utama iOS, dan Android serta Windows menambahkan konvensi mereka sendiri seperti ikon manifest dan gambar tile.
• Saat ini: favicon SVG, web app manifest, ikon yang mendukung mode gelap, dan persyaratan favicon hasil pencarian Google telah menjadikan favicon bagian kecil namun nyata dari pengaturan teknis sebuah situs.

Di mana favicon muncul saat ini

Favicon Anda ditampilkan di jauh lebih banyak tempat daripada sekadar tab browser. Tempat-tempat utamanya adalah:

• Tab browser: tempat yang paling terlihat, di mana ikon sering kali menjadi satu-satunya hal yang bisa Anda lihat saat banyak tab terbuka.
• Bookmark dan favorit: ikon berada di samping judul halaman pada bilah dan menu bookmark.
• Riwayat dan halaman yang paling sering dikunjungi: browser menampilkan favicon di daftar riwayat dan pada halaman tab baru.
• Hasil pencarian Google: baik di ponsel maupun desktop, Google menampilkan favicon situs di samping nama situs dan URL.
• Layar utama: ketika pengunjung menambahkan situs Anda ke layar utama di iOS atau Android, ikon touch atau ikon manifest menjadi pintasan bergaya aplikasi.
• PWA yang terinstal: progressive web app menggunakan ikon dalam web app manifest-nya untuk ikon peluncur, layar splash, dan pengalih tugas.
• Tile Windows dan situs yang disematkan: Windows dan Edge versi lama menggunakan gambar tile yang ditentukan untuk situs yang disematkan; versi modern sebagian besar memakai ulang ikon standar Anda.
• Pratinjau tautan di beberapa aplikasi: beberapa alat obrolan dan produktivitas (Slack adalah contoh yang terkenal) menampilkan favicon situs di samping tautan yang diperluas. Sebagian besar pratinjau terutama mengandalkan gambar Open Graph, tetapi favicon sering menyediakan tanda merek kecilnya.

Mengapa favicon penting untuk website Anda

Pengenalan merek

Orang mengenali warna dan bentuk lebih cepat daripada membaca teks. Ikon yang konsisten dan berulang di tab, bookmark, dan hasil pencarian membangun keakraban setiap kali seseorang melihatnya, yang berarti paparan merek gratis di setiap kunjungan.

Kepercayaan dan kredibilitas

Favicon yang hilang membuat situs terlihat belum selesai. Ikon yang bersih dan tampil dengan benar adalah sinyal kecil bahwa seseorang peduli pada detail, yang mendukung persepsi bahwa situs tersebut sah. Ini bukan fitur keamanan, dan situs phishing bisa menyalin ikon, tetapi ikon default yang kosong jarang membantu bisnis terlihat mapan.

Rasio klik di hasil pencarian

Karena Google menampilkan favicon di samping listing Anda, favicon menjadi bagian dari tampilan hasil Anda di samping para pesaing. Google tidak mempublikasikan adanya efek peringkat dari favicon, dan Anda tidak boleh berharap peringkat akan naik. Manfaatnya terletak pada pengenalan visual: pengguna yang mengenal ikon Anda lebih mungkin memperhatikan dan memilih hasil Anda, terutama di ponsel di mana hasil tampil ringkas.

Kemudahan penggunaan saat banyak tab terbuka

Ketika browser membuka dua puluh tab, judul terpotong hingga tak terlihat dan favicon menjadi satu-satunya yang tersisa. Ikon yang khas memungkinkan orang menemukan tab Anda seketika dan kembali ke sana, alih-alih membuka duplikat atau melupakannya.

Kesan profesional

Favicon yang dirancang dengan baik menunjukkan perhatian pada detail yang sama seperti bagian lain dari situs Anda. Baik untuk halaman produk, dokumentasi, blog, maupun aplikasi web, favicon adalah salah satu penyempurna termurah yang bisa Anda tambahkan.

Aksesibilitas dalam menemukan tab

Ikon membantu pengguna yang memindai secara visual daripada membaca, termasuk penyandang disleksia atau perbedaan kognitif, dan siapa pun yang berpindah cepat antartugas. Ikon dengan kontras tinggi dan bentuk sederhana lebih mudah dikenali. Namun ingat, favicon hanyalah pelengkap: ia tidak menggantikan judul halaman yang jelas, yang menjadi andalan pembaca layar dan teknologi bantu.

Apa yang terjadi jika Anda tidak punya favicon

Browser secara otomatis meminta /favicon.ico dari root domain Anda, bahkan jika HTML Anda tidak menyebutkannya. Jika file tersebut tidak ada, beberapa hal terjadi:

• Ikon generik: pengunjung melihat ikon globe, dokumen, atau ikon kosong default di tab dan bookmark, yang terlihat anonim.
• Error 404 di log Anda: setiap browser yang meminta file tersebut menghasilkan permintaan gagal. Pada situs yang ramai, hal ini menambah noise pada log akses, pemantauan error, dan analitik, serta dapat menyembunyikan masalah yang sebenarnya.
• Tidak ada ikon di hasil Google: tanpa favicon yang valid dan dapat di-crawl, Google menampilkan placeholder default di samping listing Anda.
• Permintaan yang sia-sia: browser dapat mencoba lagi, menambah beban kecil namun tidak berguna pada server Anda.

Bahkan ikon yang sangat sederhana lebih baik daripada tidak ada sama sekali, karena menghilangkan 404 dan memberi pengguna sesuatu yang dikenali.

Penjelasan format favicon

Tidak ada satu format yang mencakup semua platform, sehingga kebanyakan situs menggunakan sekumpulan kecil file.

Gambar tile Windows lama (dikonfigurasi melalui browserconfig.xml) dulu dibutuhkan untuk Internet Explorer 11 dan Edge lama. Sekarang jarang diperlukan kecuali Anda harus mendukung lingkungan tersebut.

Panduan favicon Google untuk hasil pencarian

Jika Anda ingin ikon Anda muncul di Google Search, ikuti persyaratan yang dipublikasikan Google:

• Ukuran: gambar harus persegi (1:1) dan kelipatan 48 piksel, seperti 48x48, 96x96, atau 144x144. Google kemudian memperkecilnya menjadi 16x16 untuk ditampilkan. Ukuran minimum yang didukung adalah 8x8, tetapi 48x48 atau lebih besar direkomendasikan.
• Format: format apa pun yang didukung browser dapat digunakan, termasuk ICO, PNG, dan SVG.
• URL yang stabil: jangan sering mengubah URL favicon. Alamat yang stabil membantu Google menjaga ikon Anda tetap mutakhir.
• Dapat di-crawl: baik file favicon maupun beranda Anda harus dapat diakses oleh Googlebot. Jangan memblokirnya di robots.txt atau di balik login.
• Satu deklarasi per situs: ikon terkait dengan beranda situs, jadi letakkan tag <link> di head beranda Anda.
• Representatif dan pantas: ikon harus mencerminkan merek Anda, dan Google dapat mengganti ikon yang menyinggung atau menyesatkan dengan ikon default-nya.

Setelah Anda menerbitkan atau mengubah favicon, Google dapat membutuhkan beberapa hari hingga beberapa minggu untuk meng-crawl ulang dan memperbaruinya, jadi jangan berharap perubahan instan.

Cara membuat favicon dengan cepat menggunakan MakeFav

Anda tidak membutuhkan perangkat lunak desain atau command line. Generator MakeFav mengubah satu gambar sumber menjadi file-file yang dijelaskan di atas.

1. Siapkan karya Anda. Gunakan logo atau simbol persegi berukuran 512 x 512 px atau lebih besar. Bentuk sederhana bekerja paling baik karena ikon akan terlihat pada ukuran 16 px.
2. Unggah di beranda MakeFav, atau buka editor untuk menyesuaikan gambar, latar belakang, dan padding sebelum mengekspor.
3. Pratinjau hasilnya pada ukuran kecil dan di atas latar terang maupun gelap untuk memastikan tetap terbaca.
4. Unduh paketnya. Isinya mencakup ICO, berbagai ukuran PNG, Apple touch icon, ikon manifest, dan cuplikan HTML untuk ditempel.
5. Unggah file ke root website Anda agar dapat dijangkau di path seperti /favicon.ico.
6. Tambahkan HTML ke <head> setiap halaman, atau ke layout atau template bersama Anda.
7. Verifikasi dengan pemeriksa favicon, lalu bersihkan cache browser dan muat ulang untuk melihat ikon baru.

Contoh cuplikan HTML

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Atribut sizes="48x48" pada tautan ICO membantu browser memilih SVG saat mendukungnya sambil tetap menyimpan ICO sebagai cadangan. PNG 96 px memenuhi aturan kelipatan 48 dari Google.

Contoh web app manifest

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Jika Anda bekerja dengan build pipeline atau ingin mengotomatiskan pembuatan ikon, lihat sumber daya developer.

Tips desain untuk favicon yang efektif

• Buat sederhana. Satu bentuk, satu huruf, atau monogram tebal lebih baik daripada logo detail yang berubah menjadi kabur pada 16 px.
• Gunakan kontras yang kuat. Pastikan ikon terlihat pada tema browser terang maupun gelap. Tile berlatar warna dapat membantu.
• Hindari teks. Satu inisial tidak masalah; kata-kata tidak terbaca pada ukuran sekecil ini.
• Sisakan sedikit padding untuk ikon maskable dan bersudut membulat agar tidak ada bagian penting yang terpotong.
• Tetap konsisten dengan logo dan warna merek Anda agar favicon memperkuat pengenalan.
• Uji di perangkat sungguhan dan periksa tampilannya di tab, bookmark, dan hasil Google.

Masalah umum favicon

Jika ikon Anda tidak muncul, penyebab yang biasa adalah caching, path yang salah, dan file yang diblokir. Browser menyimpan cache favicon secara agresif, jadi hard refresh atau jendela pribadi baru sering kali cukup untuk melihat pembaruan. Periksa bahwa URL file mengembalikan status 200 dan content type yang benar, serta bahwa tag <link> berada di dalam <head>. Untuk pencarian, pastikan robots.txt tidak memblokir ikon maupun beranda. Pemeriksa MakeFav dapat membantu Anda menemukan masalah ini dengan cepat.

Pertanyaan yang sering diajukan

Apa kepanjangan favicon?

Favicon adalah kependekan dari "favorite icon". Nama ini berasal dari Internet Explorer 5, yang pada 1999 pertama kali menggunakan file ikon kecil untuk menghiasi entri di daftar Favorites browser. Istilah itu bertahan meskipun ikonnya kini muncul di banyak tempat lain.

Apakah favicon membantu SEO?

Favicon bukan faktor peringkat langsung. Namun, favicon muncul di samping nama situs Anda di hasil Google pada ponsel dan desktop, sehingga dapat meningkatkan pengenalan merek dan daya tarik visual listing Anda, yang secara tidak langsung dapat mendukung klik. Mengikuti panduan Google-lah yang membuat ikon memenuhi syarat untuk ditampilkan.

Berapa ukuran favicon yang sebaiknya digunakan?

Untuk Google Search, gunakan gambar persegi yang merupakan kelipatan 48 piksel, seperti 48x48 atau 96x96. Untuk cakupan yang lebih luas, sediakan juga file ICO, Apple touch icon 180x180, serta ikon manifest 192x192 dan 512x512. SVG merupakan tambahan yang baik untuk skalabilitas.

Apakah saya masih membutuhkan favicon.ico jika menggunakan PNG atau SVG?

Masih sebaiknya ada. Browser dan beberapa alat meminta /favicon.ico secara default, dan perangkat lunak lama mengandalkannya. Menyimpan file ICO di root situs mencegah error 404 dan memberi Anda cadangan yang aman ketika SVG atau PNG tidak didukung.

Mengapa favicon saya tidak diperbarui?

Browser dan mesin pencari menyimpan cache favicon dalam waktu lama. Coba hard refresh, jendela pribadi, atau bersihkan cache. Pastikan path file sudah benar dan file baru benar-benar disajikan. Di Google Search, ikon yang diubah dapat memerlukan beberapa hari atau minggu untuk di-crawl ulang dan diperbarui.