Cara Menambahkan Favicon di HTML (Dan Tag rel Mana yang Harus Digunakan)

Menambahkan favicon ke situs web Anda seharusnya menjadi salah satu tugas paling sederhana dalam pengembangan web, namun sering kali membuat pengembang bingung. Antara saran yang bertentangan tentang tag <link> mana yang harus digunakan, nilai atribut rel yang membingungkan, dan browser yang keras kepala meng-cache ikon lama, membuat favicon benar-benar muncul bisa terasa seperti permainan tebak-tebakan.

Kenyataannya adalah bahwa pengaturan favicon untuk sebagian besar situs web dapat dikurangi menjadi satu file dan satu tag HTML. Panduan ini memotong kebisingan dan memberi Anda persis apa yang Anda butuhkan: pengaturan praktis minimal, variasi tag rel yang paling berguna, dan instruksi jelas untuk menangani masalah caching yang membuat favicon baru Anda tidak terlihat.

Jika Anda belum memiliki file favicon.ico, buat satu dengan Any2ICO dalam waktu kurang dari satu menit. Ini menerima PNG, SVG, JPG, WebP, dan format lainnya, dan menghasilkan file ICO multi-ukuran yang berfungsi di mana-mana. Kemudian kembali ke sini untuk menghubungkannya ke HTML Anda.

Pengaturan Favicon Paling Sederhana

Sebelum menyelami variasi tag dan kasus tepi, inilah pendekatan yang bekerja untuk sebagian besar situs web. Ini memerlukan satu file dan satu baris HTML.

Tempatkan favicon.ico di root domain Anda. Unggah atau terapkan file favicon.ico Anda sehingga dapat diakses di https://domainanda.com/favicon.ico. Ini adalah jalur yang telah diperiksa browser secara default sejak akhir 1990-an. Bahkan tanpa tag HTML apa pun yang menunjuknya, sebagian besar browser akan menemukan dan menampilkan favicon di lokasi ini secara otomatis. Konvensi ini tertanam dalam perilaku browser dan tidak akan hilang.

Tambahkan satu tag link ke HTML head Anda. Meskipun konvensi jalur root berfungsi sendiri, menambahkan tag eksplisit menghilangkan semua ambiguitas dan memastikan perilaku konsisten di semua browser, subdomain, dan aplikasi satu halaman di mana root dokumen mungkin tidak memetakan langsung ke root server.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Judul Halaman Anda</title>
  <link rel="icon" href="/id/favicon.ico" sizes="any">
</head>
<body>
  <!-- konten Anda -->
</body>
</html>

Tag <link> tunggal itu cukup untuk setiap browser utama: Chrome, Firefox, Safari, Edge, dan bahkan versi lama Internet Explorer. Atribut sizes="any" memberi tahu browser bahwa file ICO berisi beberapa resolusi dan ia harus memilih yang paling sesuai untuk konteks saat ini, apakah itu ikon tab 16x16 atau ikon bookmark 32x32.

Ini adalah pengaturan yang kami rekomendasikan untuk sebagian besar situs web. Ini sederhana, andal, dan didukung secara universal. Anda dapat berhenti di sini dan favicon Anda akan berfungsi dengan benar di hampir setiap skenario.

Caching dan "Favicon Tidak Muncul"

Anda menerapkan favicon baru Anda, me-refresh halaman, dan ikon lama masih menatap balik dari tab browser. Ini bukan bug dalam kode Anda. Ini hampir pasti masalah caching, dan ini adalah alasan paling umum mengapa pengembang berpikir pengaturan favicon mereka rusak padahal sebenarnya berfungsi sempurna.

Browser meng-cache favicon secara agresif. Tidak seperti aset halaman biasa, favicon sering di-cache secara terpisah dan untuk periode yang jauh lebih lama. Chrome, misalnya, menyimpan favicon dalam database khusus yang tidak selalu merespons refresh halaman normal. Firefox dan Safari memiliki perilaku serupa. Ini berarti bahwa bahkan setelah Anda mengganti file di server Anda, browser mungkin terus menampilkan ikon lama selama berjam-jam atau bahkan berhari-hari.

Hard refresh: Tekan Ctrl+Shift+R (Windows/Linux) atau Cmd+Shift+R (macOS) untuk melewati cache dan memuat ulang semua aset dari server. Ini berfungsi untuk sebagian besar sumber daya halaman tetapi tidak selalu menghapus cache favicon secara khusus.

Jendela incognito: Buka situs Anda di jendela browsing pribadi atau incognito. Ini dimulai dengan cache yang sepenuhnya kosong dan akan memuat favicon segar dari server. Jika Anda melihat favicon yang benar dalam mode incognito, pengaturan Anda benar dan sesi browsing normal hanya perlu waktu untuk mengambil perubahan.

Hapus cache browser secara manual: Jika incognito mengonfirmasi favicon baru tetapi sesi reguler Anda masih menunjukkan yang lama, hapus gambar dan file yang di-cache browser Anda. Di Chrome, buka Settings, Privacy and Security, Clear browsing data, dan pilih Cached images and files. Setelah menghapus, muat ulang situs Anda.

Tambahkan query string cache-busting: Sebagai langkah sementara selama pengembangan, Anda dapat menambahkan query string untuk memaksa browser memperlakukan favicon sebagai sumber daya baru: <link rel="icon" href="/id/favicon.ico?v=2" sizes="any">. Tingkatkan nomor versi setiap kali Anda memperbarui favicon. Hapus query string setelah Anda puas dengan ikon, atau pertahankan sebagai strategi versioning permanen.

Ukuran dan Pilihan File: ICO vs PNG

Haruskah Anda menggunakan file ICO, file PNG, atau keduanya? Jawabannya tergantung pada seberapa banyak kompleksitas yang Anda inginkan dalam pengaturan Anda dan browser mana yang perlu Anda dukung.

ICO adalah pilihan universal. Format ICO telah menjadi format favicon standar sejak Internet Explorer 5 memperkenalkan favicon pada tahun 1999. Setiap browser yang mendukung favicon mendukung ICO. Satu file ICO dapat berisi beberapa ukuran (16x16, 32x32, 48x48, dan lainnya), jadi browser selalu memiliki resolusi yang tepat tersedia tanpa Anda perlu memelihara file terpisah untuk setiap ukuran. Untuk kesederhanaan dan kompatibilitas maksimum, ICO adalah taruhan paling aman.

PNG adalah alternatif modern. Semua versi terbaru Chrome, Firefox, Safari, dan Edge mendukung favicon PNG melalui tag <link rel="icon" type="image/png">. Favicon PNG sedikit lebih sederhana untuk dibuat (file PNG tunggal pada satu ukuran) tetapi Anda memerlukan file dan tag terpisah untuk setiap ukuran yang ingin Anda sediakan. Ini dapat berarti dua atau tiga tag link tambahan di HTML head Anda.

SVG adalah opsi terbaru. Favicon SVG didukung di Chrome, Firefox, dan Edge, tetapi tidak di Safari pada awal 2025. Favicon SVG diskalakan sempurna ke ukuran apa pun, yang menarik untuk tampilan high-DPI. Namun, kurangnya dukungan Safari berarti Anda masih memerlukan fallback ICO atau PNG.

Untuk sebagian besar situs web, kami merekomendasikan pendekatan pragmatis: gunakan file ICO multi-ukuran sebagai favicon utama Anda dan opsional tambahkan ikon PNG atau SVG sebagai peningkatan. Ini memberi Anda kompatibilitas universal melalui file ICO dan optimisasi modern melalui format tambahan. Untuk rincian detail ukuran mana yang harus disertakan dan mengapa, lihat panduan ukuran favicon dijelaskan kami.