Format favicon dijelaskan: ICO, PNG, SVG, dan yang dibutuhkan browser

Mengapa favicon masih terasa agak rumit

Favicon tampak seperti satu gambar kecil, tetapi ia berada di persimpangan antara chrome browser, bookmark, tab, pintasan yang disematkan, hasil pencarian, layar beranda seluler, dan instalasi progressive web app. Setiap konteks memiliki ekspektasi yang sedikit berbeda.

Itulah mengapa saran tentang favicon sering terasa berantakan. Sebagian tim hanya mengirim satu favicon.ico karena dulu itu sudah cukup. Yang lain menghasilkan belasan file tanpa tahu mana yang benar-benar digunakan. Jalan tengah yang masuk akal lebih kecil: pahami apa keunggulan masing-masing ICO, PNG, dan SVG, lalu kirim set ringkas yang mencakup browser saat ini dan konteks perangkat yang umum.

Favicon bukan tempat untuk memamerkan pipeline gambar. Favicon adalah tempat untuk bersikap membosankan, eksplisit, dan kompatibel.

ICO: format lama yang menolak mati

ICO adalah kontainer ikon Windows klasik. Ia dapat memuat beberapa gambar bitmap dalam ukuran berbeda, umumnya 16×16, 32×32, dan 48×48 piksel. Ini penting karena favicon dapat dirender sangat kecil di tab browser, lebih besar di daftar bookmark, dan berbeda lagi pada pintasan Windows.

Detail pentingnya adalah bahwa ICO merupakan kontainer, bukan sekadar satu gambar. favicon.ico yang baik biasanya berisi beberapa ukuran raster agar browser atau sistem operasi dapat memilih kecocokan terdekat alih-alih menskalakan satu bitmap kecil.

ICO masih berguna karena tiga alasan:

• Browser dapat meminta /favicon.ico secara otomatis, bahkan jika Anda tidak menautkannya di HTML.
• Beberapa browser dan integrasi lama mengharapkannya.
• Ini adalah fallback yang aman ketika deklarasi ikon yang lebih baru diabaikan.

Itu tidak berarti ICO harus menjadi satu-satunya ikon Anda. Format ini canggung untuk diedit, tidak terlalu ramah bagi alur kerja modern, dan buruk sebagai sumber kebenaran untuk tanda merek. Perlakukan sebagai fallback kompatibilitas.

Dalam praktiknya, letakkan /favicon.ico sungguhan di root situs. Jangan menyajikan 404 di sana kecuali Anda menikmati log yang berisik dan percobaan ulang browser yang tidak perlu.

PNG: pekerja andal

PNG masih menjadi format raster yang paling dapat diprediksi untuk favicon dan touch icon. Format ini mendukung transparansi, didukung secara luas, dan berperilaku konsisten di berbagai browser dan platform.

Untuk favicon, PNG berguna ketika Anda menginginkan ikon berukuran piksel eksplisit seperti 32×32 atau 48×48. Untuk ikon layar beranda seluler, PNG secara efektif wajib di beberapa lingkungan. Apple touch icon, misalnya, berbasis PNG dalam penggunaan produksi normal.

Beberapa aturan praktis membantu:

• Ekspor dari sumber vektor, bukan dari bitmap yang sudah kecil.
• Pastikan ikon terbaca pada 16×16 sebelum memikirkan ukuran yang lebih besar.
• Tambahkan padding yang cukup agar tanda tidak terasa terpotong dalam konteks bersudut membulat atau bermasker.
• Hindari teks kecil, garis tipis, dan ilustrasi yang mendetail.

Kompresi PNG biasanya tidak perlu dipikirkan berlebihan untuk favicon karena filenya sangat kecil. Namun, jangan mengirim touch icon 500 KB hanya karena file itu langsung keluar dari ekspor desain. Jika Anda sudah meninjau pilihan gambar yang lebih luas, cara berpikir disiplin yang sama dari keputusan format gambar di web modern juga berlaku di sini: pilih format sesuai tugasnya, bukan karena sedang populer.

SVG: opsi modern yang fleksibel

Favicon SVG menarik karena tidak bergantung pada resolusi. Satu file kecil dapat dirender bersih pada banyak ukuran, dan dapat diedit langsung dalam kode atau diekspor dari perangkat lunak desain.

Versi modern Chromium, Firefox, dan Safari mendukung favicon SVG. Ini menjadikan SVG format favicon utama yang baik untuk banyak situs, terutama ketika ikonnya berupa logo sederhana, glyph, atau tanda geometris.

Namun favicon SVG memiliki beberapa catatan.

Pertama, SVG harus mandiri. Jangan bergantung pada font eksternal, gambar jarak jauh, atau skrip. Browser menerapkan pembatasan pada SVG yang digunakan sebagai gambar, dan meskipun sesuatu berfungsi di satu browser, itu dapat gagal di browser lain.

Kedua, jaga agar tampilannya tetap sederhana. SVG tidak secara ajaib menyelesaikan masalah 16 piksel. Ilustrasi vektor yang mendetail tetap menjadi buram ketika dipadatkan ke dalam tab.

Ketiga, berhati-hatilah dengan styling dinamis. Sebagian tim menggunakan prefers-color-scheme di dalam favicon SVG agar ikon menyesuaikan dengan tema browser gelap dan terang. Ini bisa berhasil, tetapi perilaku browser dan caching dapat tidak merata. Jika pengenalan merek penting, satu ikon yang kokoh sering kali lebih baik daripada ikon adaptif yang cerdik.

SVG adalah sumber yang baik dan format pengiriman modern yang baik. Namun, itu bukan alasan untuk melewatkan file fallback.

Apa yang sebenarnya dicari browser

Browser menemukan favicon dengan dua cara utama: tautan HTML eksplisit dan permintaan root implisit.

Perilaku implisit adalah cara lama: jika browser menginginkan ikon dan belum menemukannya, ia dapat meminta /favicon.ico. Inilah mengapa file ICO di root tetap berguna bahkan di situs modern.

Perilaku eksplisit menggunakan elemen <link> di head dokumen. Penyiapan modern yang ringkas terlihat seperti ini:

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

Manifest kemudian dapat menunjuk ke ikon PNG yang lebih besar yang digunakan untuk aplikasi web yang dapat diinstal:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Ini bukan satu-satunya penyiapan yang valid, tetapi ini baseline yang baik. Ia memberi browser modern SVG, menyediakan fallback ICO konvensional, mencakup penyimpanan ke layar beranda iOS, dan mendukung konteks instalasi aplikasi.

Set favicon yang sebaiknya dikirim sebagian besar situs

Untuk situs pemasaran biasa, situs dokumentasi, aplikasi SaaS, atau publikasi, set ini sudah cukup:

• /favicon.ico berisi 16×16 dan 32×32, opsional 48×48.
• /icon.svg sebagai favicon modern yang dapat diskalakan.
• /apple-touch-icon.png pada 180×180.
• /icon-192.png dan /icon-512.png jika Anda memiliki manifest aplikasi web.

Anda dapat menambahkan lebih banyak ukuran jika sebuah platform memiliki persyaratan khusus, tetapi jangan menghasilkan sepuluh file karena kebiasaan. Setiap file tambahan adalah hal lain yang harus di-cache, dilupakan, salah dinamai, atau dibiarkan usang setelah rebrand.

Jika situs Anda tidak dapat diinstal dan tidak memiliki manifest, Anda mungkin tidak membutuhkan ikon 192 dan 512 piksel. Jika situs Anda berperilaku seperti aplikasi, kemungkinan Anda membutuhkannya.

Mode kegagalan umum

Bug favicon yang paling umum bukan masalah artistik. Itu masalah pengiriman.

Salah satunya adalah caching yang agresif. Browser mempertahankan favicon dengan keras kepala. Saat pengujian, ikon yang berubah mungkin tidak muncul sampai Anda melakukan hard refresh, menghapus data situs, menggunakan nama file baru, atau menguji di profil baru. Untuk rebrand produksi, mengubah /icon.svg?v=2 dapat membantu di HTML, tetapi root /favicon.ico lebih sulit karena browser memintanya secara langsung. Mengganti file dan menunggu cache berakhir sering menjadi bagian dari pekerjaan.

Masalah umum lainnya adalah MIME type yang salah. SVG harus disajikan sebagai image/svg+xml, PNG sebagai image/png, dan ICO umumnya sebagai image/x-icon atau image/vnd.microsoft.icon. Banyak browser memaafkan kesalahan ini, tetapi tidak semua konteks demikian. Jika sesuatu gagal hanya di satu browser, periksa respons jaringan sebelum menggambar ulang ikon. Kebiasaan yang sama saat men-debug redirect dan header HTTP di produksi berlaku di sini: lihat respons sebenarnya, bukan apa yang diklaim CMS sedang disajikan.

Masalah ketiga adalah kepadatan desain. Logo yang bekerja indah di header situs web sering gagal sebagai favicon. Ikon tab adalah ujian yang brutal. Hapus kata-kata, sederhanakan bentuk, tingkatkan kontras, dan uji pada ukuran nyata. Jika ikon adalah konten bermakna di dalam halaman, maka perhatian aksesibilitas seperti alt text penting; untuk favicon itu sendiri, ia adalah dekorasi antarmuka browser, bukan konten halaman. Untuk pembedaan ini, lihat panduan pragmatis kami tentang alt text gambar.

<!-- tool-cta:start -->

💡 Coba ini: Buat varian ICO, PNG, dan SVG yang diharapkan browser modern dalam satu proses dengan Ultimate Favicon Generator.

<!-- tool-cta:end -->

Checklist implementasi sederhana

Gunakan checklist ini sebelum mengirim:

1. Mulai dari master vektor yang bersih.
2. Uji tanda pada 16×16 dan 32×32.
3. Ekspor favicon SVG yang mandiri.
4. Buat fallback ICO multiukuran.
5. Ekspor Apple touch icon 180×180.
6. Tambahkan PNG 192×192 dan 512×512 jika menggunakan manifest.
7. Letakkan /favicon.ico di root situs.
8. Verifikasi status code, MIME type, dan header caching.
9. Uji setidaknya di satu browser Chromium, Firefox, dan Safari jika audiens Anda mencakup perangkat Apple.

Favicon memang kecil, tetapi juga sangat terlihat. Favicon yang rusak membuat situs terasa belum selesai. Favicon yang dibuat dengan baik menghilang ke dalam antarmuka, dan itulah tepatnya tujuannya.