UX Favicon: Apa yang Membuat Favicon Hebat

Favicon yang hebat adalah tanda sederhana berkontras tinggi, biasanya logomark Anda atau satu-dua huruf, yang tetap terbaca pada ukuran 16x16 piksel di tab browser terang maupun gelap, sesuai dengan merek Anda, dan jarang diubah. Semua hal lain dalam panduan ini (perataan piksel, warna, padding, transparansi, ukuran file) melayani tujuan tersebut: membuat situs Anda langsung mudah ditemukan di antara puluhan tab yang terbuka.

Favicon memang kecil, tetapi muncul di banyak tempat: tab browser, bilah bookmark, daftar riwayat, menu pencarian tab, hasil pencarian Google di ponsel dan desktop, serta layar utama ponsel. Bagi pengguna yang membuka banyak tab, judul sering terpotong hingga tak terlihat dan ikon menjadi satu-satunya petunjuk yang tersisa. Itu menjadikannya elemen navigasi yang nyata, bukan sekadar hiasan.

1. Keterbacaan pada 16x16

Ukuran favicon klasik adalah 16x16 piksel CSS. Pada layar standar itu benar-benar 256 piksel; pada layar retina 2x, browser biasanya memilih gambar 32x32 untuk ruang yang sama. Apa pun yang Anda desain harus tetap bertahan setelah diperkecil sedemikian rupa.

Buat tetap sederhana

• Satu bentuk atau satu hingga dua huruf. Satu huruf tebal, lingkaran dengan simbol, atau tanda geometris sederhana cocok digunakan. Tiga huruf atau satu kata akan berubah menjadi noise.
• Satu titik fokus. Jika Anda tidak bisa mendeskripsikan ikon dalam lima kata, berarti ikon itu terlalu rumit.
• Tanpa gradasi, bayangan, atau tekstur halus. Semuanya akan menjadi noda buram pada ukuran kecil.

Sejajarkan dengan grid piksel

Pada 16x16, garis yang diposisikan setengah piksel dari grid akan di-anti-alias ke dua baris piksel dan terlihat abu-abu serta lembut. Letakkan tepi pada batas piksel utuh dan gunakan lebar genap jika bentuknya simetris. Jika Anda mengekspor dari alat vektor, aktifkan pixel snapping, atau periksa hasil yang sudah diperkecil lalu perbaiki secara manual.

Hindari garis tipis

Goresan yang lebih tipis dari 2 piksel pada 16x16 (sekitar 12 persen dari lebar ikon) cenderung menghilang atau berkedip di antara ukuran-ukuran berbeda. Tebalkan goresan, hapus detail di dalam, dan gabungkan celah-celah kecil. Glyph yang tebal dan agak berat biasanya lebih mudah dibaca daripada miniatur logo detail yang persis sama.

Lakukan hinting secara manual

File ICO dan PNG tidak memiliki hinting gaya font, sehingga penyuntingan piksel manual adalah padanannya: Anda menyesuaikan piksel satu per satu agar lengkungan, diagonal, dan counter (lubang pada huruf seperti "a" atau "e") tetap tajam. Pengecilan otomatis adalah draf awal yang baik, tetapi beberapa piksel yang ditempatkan manual sering menjadi pembeda antara gumpalan dan huruf yang dapat dikenali. Editor piksel MakeFav dibuat untuk ini: buka kanvas 16x16, perbaiki piksel yang bermasalah, lalu ekspor.

2. Kontras pada tab terang dan gelap

Browser kini umum dijalankan dalam mode gelap, dan banyak pengguna memiliki bilah tab yang berbeda dari tema halaman. Ikon biru navy tua dengan latar transparan bisa sempurna di tab putih tetapi nyaris tak terlihat di tab abu-abu gelap. Selalu uji keduanya.

Solusi praktis

• Tambahkan bentuk latar. Persegi membulat atau lingkaran solid dengan warna merek menjamin tanda tersebut memiliki kontras sendiri, apa pun tab-nya.
• Gunakan outline atau halo tipis. Tepi 1px yang lebih terang di sekeliling glyph gelap (atau sebaliknya) menjaga siluet tetap terlihat di kedua tema, tetapi pada 16x16 tepi itu harus tetap tajam, jadi ujilah.
• Pilih warna merek bernada menengah. Warna seperti biru pekat, oranye, hijau, atau magenta umumnya cocok di permukaan putih maupun hampir hitam. Kuning yang sangat terang atau navy yang sangat gelap adalah yang berisiko.
• Gunakan favicon SVG adaptif. SVG dapat menyertakan media query prefers-color-scheme sehingga ikon berubah mengikuti tema sistem.

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

Perlu diingat bahwa media query mencerminkan tema sistem operasi atau browser, yang biasanya diikuti oleh bilah tab, tetapi tidak selalu. Dukungan untuk favicon SVG juga bervariasi: Chrome dan Firefox mendukungnya, sedangkan Safari secara historis tertinggal, jadi selalu sediakan cadangan PNG atau ICO. Desain dengan latar solid adalah opsi paling andal karena tidak memerlukan logika tema sama sekali.

3. Keterkenalan dan konsistensi merek

Gunakan logomark (simbol atau monogram), bukan keseluruhan logo lockup beserta wordmark. Teks di dalam ikon 16x16 tidak terbaca, dan logo horizontal lebar yang dikecilkan ke dalam persegi hanya menyisakan strip kecil di tengah.

• Jika merek Anda memiliki simbol, sederhanakan untuk ukuran kecil alih-alih sekadar memperkecilnya. "Versi favicon" dengan detail lebih sedikit adalah praktik standar.
• Jika merek Anda hanya berupa wordmark, ambil huruf pertama atau sepasang huruf yang khas, lalu tulis dengan tipografi merek Anda pada ketebalan berat.
• Jaga konsistensi warna dengan logo, ikon aplikasi, dan avatar media sosial Anda, agar pengguna mengenali merek yang sama di mana pun.

Keunikan sama pentingnya dengan kesetiaan pada logo asli. Lihat deretan tab: jika tiga situs lain juga memakai lingkaran biru, situs Anda tidak akan menonjol. Bentuk atau warna yang berbeda lebih berguna daripada pengecilan yang sepenuhnya setia.

4. Warna: palet terbatas dan jenuh

Dengan piksel yang begitu sedikit, setiap warna tambahan menambah kekacauan. Targetkan satu atau dua warna ditambah, paling banyak, putih atau hitam. Warna jenuh lebih mudah terlihat pada ukuran kecil dibandingkan warna pastel, yang cenderung menyatu dengan latar tab.

Pinjam sedikit dari pemikiran aksesibilitas. WCAG meminta kontras minimal 3:1 untuk objek grafis yang bermakna (kriteria keberhasilan 1.4.11, Non-text Contrast). Favicon secara formal tidak tercakup, karena ia merupakan chrome browser dan bukan konten halaman, tetapi 3:1 antara glyph dan latarnya, serta antara ikon dan tab, adalah target yang masuk akal. Hindari pula menyampaikan sesuatu hanya lewat rona: varian merah dan hijau dari ikon yang sama tidak dapat dibedakan oleh banyak pengguna buta warna, jadi variasikan bentuk atau tambahkan simbol.

5. Bentuk, padding, dan safe zone

Isi seluruh persegi

Tab browser menampilkan favicon pada ukuran kecil yang tetap, sehingga margin ekstra hanya membuat tanda Anda menjadi lebih kecil. Untuk ikon tab standar, gunakan sebagian besar kanvas, hanya dengan satu atau dua piksel ruang bernapas, agar tanda tampil sebesar mungkin.

Membulat atau persegi?

Browser umumnya tidak memotong favicon tab, jadi bentuk yang Anda gambar adalah bentuk yang dilihat pengguna. Persegi dengan sudut sedikit membulat tampak rapi dan memberikan latar yang konsisten; glyph bebas atau lingkaran di atas transparansi dapat terlihat lebih ringan dan lebih khas. Keduanya baik. Pilih satu dan jaga konsistensi seluruh set ikon Anda.

Apple touch icon

iOS menambahkan sudut membulatnya sendiri pada apple-touch-icon (180x180 adalah ukuran yang umum). Sediakan persegi full-bleed tanpa sudut yang sudah dibulatkan sebelumnya, jika tidak Anda mungkin mendapati serpihan gelap atau putih yang terlihat di sudut-sudutnya.

Ikon maskable untuk Android dan PWA

Ikon maskable dipotong oleh sistem operasi menjadi lingkaran, squircle, atau bentuk lain. Simpan semua konten penting di dalam safe zone: lingkaran yang berpusat di ikon dengan radius 40 persen dari lebar ikon. Perluas warna latar hingga ke tepi agar mask apa pun terlihat benar. Jangan menggunakan ulang favicon tab yang rapat dari tepi ke tepi sebagai ikon maskable, karena mask akan memotongnya.

6. Transparansi

Transparansi tidak masalah untuk favicon tab, dan justru itulah yang membuat ikon berisi glyph saja tampil bersih di warna tab apa pun. Namun transparansi menjadi masalah untuk Apple touch icon: iOS mengisi area transparan dengan warna solid (biasanya hitam), yang dapat merusak desain. Selalu berikan apple-touch-icon latar buram dengan warna merek Anda. Hal yang sama berlaku untuk ikon maskable dan sebagian besar kasus layar utama Android, di mana latar buram memberikan hasil yang dapat diprediksi.

7. Stabilitas: jangan terlalu sering mengubahnya

Favicon membangun pengenalan lewat pengulangan. Sering mengubahnya memaksa pengguna mempelajari ulang tab mana yang milik Anda, dan itu juga menimbulkan masalah teknis. Browser menyimpan cache favicon secara agresif, dan Google mengambil serta menyimpannya terpisah dari halaman Anda, sehingga ikon baru bisa membutuhkan berhari-hari atau berminggu-minggu untuk muncul di hasil pencarian. Google juga meminta URL favicon yang stabil, ikon dengan ukuran kelipatan 48 piksel (48x48, 96x96, dan seterusnya), serta file yang dapat di-crawl (tidak diblokir oleh robots.txt). Perlakukan perubahan favicon sebagai keputusan setingkat rebranding, bukan dekorasi musiman.

8. Status notifikasi dan favicon dinamis

Beberapa aplikasi web mengubah favicon untuk menandakan pesan belum dibaca, status perekaman, atau kesalahan. Jika dilakukan dengan baik, ini membantu; jika berlebihan, mengganggu.

• Gunakan badge kecil (titik atau angka singkat) di sudut, bukan desain ulang total. Ikon dasar harus tetap dapat dikenali.
• Gunakan seperlunya. Sediakan badge untuk peristiwa yang memerlukan tindakan pengguna. Jangan menganimasikan ikon terus-menerus.
• Batasi angka. Pada 16x16 hanya satu atau dua digit yang terbaca; tampilkan "9+" atau titik biasa alih-alih "137".
• Setel ulang dengan segera ketika pengguna sudah menangani item tersebut, dan pulihkan ikon default.
• Jangan hanya mengandalkan warna. Titik merah juga sebaiknya didukung oleh judul halaman, misalnya "(3) Kotak Masuk", agar informasinya tersedia bagi semua orang.

Favicon dinamis biasanya digambar pada kanvas lalu dipasang dengan memperbarui href dari elemen link ikon. Batasi frekuensi pembaruan (throttle), karena mengubah favicon terus-menerus dapat menggunakan CPU dan mengalihkan perhatian pengguna.

9. Performa

Favicon memang kecil, tetapi tetap merupakan request yang bisa ditangani dengan buruk.

• Jaga ukuran file tetap kecil. Favicon PNG biasanya berukuran beberapa ratus byte hingga beberapa kilobyte. SVG sederhana bisa di bawah 1 KB.
• Hindari file ICO yang membengkak. ICO multi-ukuran dengan gambar 16, 32, dan 48 piksel sudah cukup. Menyematkan gambar 256x256 melipatgandakan ukuran file tanpa manfaat yang terlihat di tab browser.
• Atur header caching. Sajikan ikon dengan masa berlaku Cache-Control yang panjang, misalnya public, max-age=31536000, immutable, dan gunakan nama file berversi atau ber-hash saat Anda mengubahnya.
• Deklarasikan ikon secara eksplisit. Browser meminta /favicon.ico secara default, jadi sediakan satu meskipun Anda mendeklarasikan ikon lain, untuk menghindari noise 404 di log Anda.
• Kompres. Jalankan PNG melalui optimizer lossless, dan minify SVG.

<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='/manifest.webmanifest'>

Jika Anda ingin membuat semua file ini dari satu gambar sumber, generator favicon MakeFav menghasilkan set standarnya, dan halaman developer membahas opsi integrasi.

10. Aksesibilitas

Favicon tidak memiliki teks alt dan pembaca layar tidak membacakannya, sehingga alat aksesibilitas tradisional seperti atribut alt tidak berlaku. Yang penting adalah:

• Judul halaman membawa makna. Tulis elemen <title> yang unik dan deskriptif. Jangan pernah mengandalkan ikon untuk menyampaikan status; cerminkan setiap badge di judul.
• Keterlihatan bagi pengguna dengan penglihatan rendah. Kontras tinggi, bentuk tebal, dan tanda yang besar membantu pengguna yang memindai tab secara visual.
• Independen dari warna. Pastikan bentuk atau huruf yang membedakan status, bukan hanya rona.
• Gangguan yang berkurang. Hindari favicon yang berkedip atau beranimasi, yang bisa menjadi masalah bagi pengguna yang sensitif terhadap gerakan.

Daftar periksa UX favicon

Daftar periksa pengujian

Jangan percaya pratinjau besar di alat desain Anda. Uji ikon yang sebenarnya dalam kondisi yang sebenarnya:

1. Beberapa browser. Periksa Chrome, Firefox, Safari, dan Edge, karena masing-masing memilih ikon dan ukuran dengan cara yang sedikit berbeda.
2. Mode terang dan gelap. Ganti tema OS dan browser lalu lihat bilah tab setiap kali.
3. Layar retina dan standar. Periksa pada monitor 1x dan layar 2x atau 3x, lalu perbesar tampilan di browser.
4. Bilah bookmark. Bookmark halaman dan lihat apakah ikon masih terbaca di samping situs lain.
5. Banyak tab. Buka 20 tab dan lihat apakah Anda bisa menemukan tab Anda sekilas.
6. Pratinjau SERP Google. Periksa hasil pencarian di ponsel setelah ikon di-crawl ulang. Ingat bahwa pembaruannya mungkin butuh waktu.
7. Layar utama. Tambahkan situs ke layar utama iOS dan Android, lalu pastikan ikon tidak terpotong, tidak memiliki sudut hitam, dan tidak terlalu kecil di dalam mask-nya.
8. Pemeriksaan teknis. Jalankan domain Anda melalui pemeriksa favicon MakeFav untuk memastikan file tersedia, mengembalikan status 200, memiliki ukuran yang tepat, dan dideklarasikan dengan benar di HTML Anda.

Alur kerja praktis

1. Mulailah dari logomark Anda dan sederhanakan menjadi satu bentuk atau huruf.
2. Buat kanvas persegi dengan latar solid atau berbentuk yang berfungsi di kedua tema.
3. Ekspor ukuran 32x32 dan 16x16 lalu sempurnakan versi kecilnya secara manual di editor piksel.
4. Hasilkan set lengkap (ICO, PNG, apple-touch-icon, ikon manifest) dengan generator.
5. Tambahkan tag link, atur header cache, deploy, lalu verifikasi dengan pemeriksa.

Favicon adalah salah satu aset terkecil di situs Anda sekaligus salah satu yang paling sering dilihat. Beberapa keputusan cermat tentang kontras, kesederhanaan, dan konsistensi membuatnya berfungsi di setiap tab, tema, dan perangkat.

Pertanyaan yang sering diajukan

Berapa ukuran favicon yang seharusnya?

Desain untuk 16x16 dan 32x32 untuk tab browser (browser menggunakan 32x32 pada layar berkepadatan tinggi), sediakan apple-touch-icon 180x180 untuk iOS, serta PNG 192x192 dan 512x512 untuk Android dan PWA. Untuk hasil pencarian Google, gunakan ikon persegi dengan ukuran kelipatan 48 piksel, seperti 48x48 atau 96x96. Sumber SVG dapat diskalakan ke semuanya.

Haruskah saya menggunakan logo lengkap sebagai favicon?

Biasanya tidak. Logo lengkap dengan wordmark terlalu detail dan terlalu lebar untuk ikon persegi 16x16. Gunakan logomark atau monogram satu atau dua huruf, dan sederhanakan agar tetap dapat dikenali saat berukuran kecil.

Bagaimana cara membuat favicon berfungsi di mode gelap?

Pendekatan paling aman adalah memberi ikon bentuk latar solidnya sendiri atau outline yang kontras, sehingga tidak bergantung pada warna tab. Alternatifnya, gunakan favicon SVG dengan media query prefers-color-scheme untuk menukar warna, dan sediakan cadangan PNG atau ICO untuk browser yang tidak mendukung ikon SVG. Selalu uji di tema terang maupun gelap.

Mengapa favicon baru saya tidak muncul?

Browser menyimpan cache favicon dalam waktu lama, dan Google menyimpan salinannya sendiri, yang diperbarui sesuai jadwalnya sendiri, sering kali memakan waktu berhari-hari atau berminggu-minggu. Lakukan hard-refresh pada halaman, hapus cache browser, gunakan nama file berversi yang baru, dan pastikan tag link serta /favicon.ico di root mengarah ke file yang benar. Anda dapat memverifikasi pengaturannya dengan pemeriksa MakeFav.

Apakah menampilkan badge notifikasi pada favicon itu ide yang baik?

Ya, jika digunakan seperlunya. Titik kecil atau angka satu atau dua digit membantu pengguna memperhatikan sesuatu yang memerlukan tindakan, tetapi animasi terus-menerus atau angka besar merusak keterbacaan dan perhatian. Selalu cerminkan statusnya di judul halaman, pulihkan ikon default saat item sudah ditangani, dan jangan hanya mengandalkan warna.