UX Favicon: Apa yang Menjadikan Favicon Hebat

Favicon yang hebat ialah tanda yang ringkas dan berkontras tinggi, biasanya logomark anda atau satu atau dua huruf, yang kekal mudah dibaca pada saiz 16x16 piksel pada tab pelayar yang cerah dan gelap, sepadan dengan jenama anda, dan jarang berubah. Segala-galanya dalam panduan ini (penjajaran piksel, warna, padding, ketelusan, saiz fail) menyokong matlamat tersebut: menjadikan laman anda mudah dicari serta-merta di antara berpuluh-puluh tab yang terbuka.

Favicon memang kecil, tetapi ia muncul di banyak tempat: tab pelayar, bar penanda halaman, senarai sejarah, menu carian tab, hasil carian Google pada mudah alih dan desktop, serta skrin utama telefon. Bagi pengguna yang membuka banyak tab, tajuk sering dipotong sehingga tiada apa yang tinggal dan ikon menjadi satu-satunya petunjuk. Ini menjadikannya elemen navigasi yang sebenar, bukan sekadar hiasan.

1. Kebolehbacaan pada 16x16

Saiz favicon klasik ialah 16x16 piksel CSS. Pada paparan standard, itu secara literal bermaksud 256 piksel; pada paparan retina 2x, pelayar biasanya memilih imej 32x32 untuk ruang yang sama. Apa sahaja yang anda reka mesti mampu bertahan selepas pengecilan ini.

Pastikan ia ringkas

• Satu bentuk atau satu hingga dua huruf. Satu huruf tebal, bulatan dengan simbol, atau tanda geometri yang ringkas sesuai digunakan. Tiga huruf atau satu perkataan akan menjadi bunyi bising visual.
• Satu titik tumpuan. Jika anda tidak dapat menerangkan ikon itu dalam lima perkataan, ia terlalu rumit.
• Tiada gradien, bayang atau tekstur halus. Ia akan menjadi conteng kabur pada saiz kecil.

Jajarkan dengan grid piksel

Pada 16x16, garisan yang diletakkan separuh piksel di luar grid akan dianti-alias merentasi dua baris piksel dan kelihatan kelabu serta lembut. Letakkan tepi pada sempadan piksel penuh dan gunakan lebar genap apabila bentuk itu simetri. Jika anda mengeksport daripada alat vektor, aktifkan pixel snapping, atau semak hasil yang telah dikecilkan dan betulkan secara manual.

Elakkan garisan nipis

Pukulan (stroke) yang lebih nipis daripada 2 piksel pada 16x16 (kira-kira 12 peratus daripada lebar ikon) cenderung hilang atau berkelip antara saiz. Tebalkan pukulan, buang butiran dalaman, dan gabungkan jurang kecil. Glif yang tebal dan agak berat biasanya lebih mudah dibaca daripada miniatur setia bagi logo yang terperinci.

Laraskan secara manual

Fail ICO dan PNG tidak mempunyai hinting gaya fon, jadi penyuntingan piksel secara manual ialah setaranya: anda melaraskan piksel individu supaya lengkung, pepenjuru dan counter (lubang dalam huruf seperti "a" atau "e") kekal tajam. Pengecilan automatik ialah draf pertama yang baik, tetapi beberapa piksel yang diletakkan secara manual sering membezakan antara gumpalan dan huruf yang dapat dikenali. Editor piksel MakeFav dibina untuk tujuan ini: buka kanvas 16x16, betulkan piksel yang bermasalah, dan eksport.

2. Kontras pada tab cerah dan gelap

Pelayar kini lazim dijalankan dalam mod gelap, dan ramai pengguna mempunyai jalur tab yang berbeza daripada tema halaman. Ikon biru laut tua dengan latar belakang lutsinar boleh kelihatan sempurna pada tab putih tetapi hampir tidak kelihatan pada tab kelabu gelap. Sentiasa uji kedua-duanya.

Penyelesaian praktikal

• Tambah bentuk latar belakang. Segi empat sama bulat atau bulatan pepejal dalam warna jenama memastikan tanda itu mempunyai kontras sendiri, tanpa mengira tab.
• Gunakan garis luar nipis atau halo. Tepi 1px yang lebih cerah di sekeliling glif gelap (atau sebaliknya) memastikan siluet kekal kelihatan pada kedua-dua tema, tetapi pada 16x16 ia mesti kekal tajam, jadi ujilah.
• Pilih warna jenama bernada pertengahan. Warna seperti biru pekat, oren, hijau atau magenta biasanya sesuai pada permukaan putih dan hampir hitam. Kuning yang sangat cerah atau biru laut yang sangat gelap ialah pilihan yang berisiko.
• Gunakan favicon SVG adaptif. SVG boleh menyertakan media query prefers-color-scheme supaya ikon berubah mengikut 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>

Perhatikan bahawa media query mencerminkan tema sistem pengendalian atau pelayar, yang biasanya diikuti oleh jalur tab, tetapi tidak selalu. Sokongan untuk favicon SVG juga berbeza: Chrome dan Firefox menyokongnya, manakala Safari secara sejarahnya ketinggalan, jadi sentiasa sediakan fallback PNG atau ICO. Reka bentuk berlatar belakang pepejal ialah pilihan yang paling mantap kerana ia tidak memerlukan logik tema langsung.

3. Kebolehcamkan dan keselarasan jenama

Gunakan logomark (simbol atau monogram), bukan keseluruhan logo lockup bersama wordmark. Teks di dalam ikon 16x16 tidak boleh dibaca, dan logo mendatar yang lebar dikecilkan ke dalam segi empat sama hanya meninggalkan jalur kecil di tengah.

• Jika jenama anda mempunyai simbol, ringkaskannya untuk saiz kecil dan bukan sekadar mengecilkannya. "Versi favicon" dengan lebih sedikit butiran ialah amalan standard.
• Jika jenama anda hanya wordmark, ambil huruf pertama atau pasangan huruf yang tersendiri dan tetapkannya dalam fon jenama anda pada ketebalan berat.
• Pastikan warna selaras dengan logo, ikon aplikasi dan avatar sosial anda, supaya pengguna mengenali jenama yang sama di mana-mana.

Keunikan sama pentingnya dengan kesetiaan. Lihat sebaris tab: jika tiga laman lain turut menggunakan bulatan biru, laman anda tidak akan menonjol. Bentuk atau warna yang berbeza lebih berguna daripada pengecilan yang setia sepenuhnya.

4. Warna: palet terhad dan tepu

Dengan piksel yang begitu sedikit, setiap warna tambahan menambah kekusutan. Sasarkan satu atau dua warna ditambah, paling banyak, putih atau hitam. Warna tepu lebih menonjol pada saiz kecil berbanding warna pastel, yang cenderung bersebati dengan latar belakang tab.

Pinjam sedikit daripada pemikiran kebolehcapaian. WCAG meminta kontras sekurang-kurangnya 3:1 untuk objek grafik yang bermakna (kriteria kejayaan 1.4.11, Non-text Contrast). Favicon tidak dilindungi secara formal, kerana ia adalah chrome pelayar dan bukan kandungan halaman, tetapi 3:1 antara glif dan latar belakangnya, serta antara ikon dan tab, ialah sasaran yang munasabah. Elakkan juga menyampaikan apa-apa maklumat melalui rona sahaja: varian merah berbanding hijau bagi ikon yang sama tidak dapat dibezakan oleh ramai pengguna buta warna, jadi variasikan bentuk atau tambah simbol.

5. Bentuk, padding dan zon selamat

Penuhkan segi empat sama

Tab pelayar memaparkan favicon pada saiz kecil yang tetap, jadi margin tambahan hanya menjadikan tanda anda lebih kecil. Untuk ikon tab standard, gunakan sebahagian besar kanvas, dengan hanya satu atau dua piksel ruang bernafas, supaya tanda itu sebesar yang mungkin.

Bulat atau segi empat?

Pelayar pada umumnya tidak memangkas favicon tab, jadi bentuk yang anda lukis ialah bentuk yang pengguna lihat. Segi empat sama dengan sudut sedikit bulat kelihatan kemas dan memberikan latar belakang yang konsisten; glif bebas atau bulatan pada latar lutsinar boleh kelihatan lebih ringan dan lebih tersendiri. Kedua-duanya boleh digunakan. Pilih satu dan pastikan seluruh set ikon anda konsisten.

Ikon Apple touch

iOS menambah sudut bulatnya sendiri pada apple-touch-icon (180x180 ialah saiz biasa). Sediakan segi empat sama full-bleed tanpa sudut yang telah dibulatkan, jika tidak anda mungkin mendapat kepingan gelap atau putih yang kelihatan di sudut.

Ikon maskable untuk Android dan PWA

Ikon maskable dipangkas oleh sistem pengendalian menjadi bulatan, squircle atau bentuk lain. Pastikan semua kandungan penting berada di dalam zon selamat: bulatan yang berpusat dalam ikon dengan jejari 40 peratus daripada lebar ikon. Panjangkan warna latar belakang sehingga ke tepi supaya mana-mana mask kelihatan betul. Jangan guna semula favicon tab yang rapat dari tepi ke tepi sebagai ikon maskable, kerana mask akan memangkasnya.

6. Ketelusan

Ketelusan sesuai untuk favicon tab, dan ia membolehkan ikon glif sahaja berada dengan kemas pada mana-mana warna tab. Namun, ia menjadi masalah untuk ikon Apple touch: iOS mengisi kawasan lutsinar dengan warna pepejal (lazimnya hitam), yang boleh merosakkan reka bentuk. Sentiasa berikan apple-touch-icon latar belakang legap dalam warna jenama anda. Perkara yang sama berlaku untuk ikon maskable dan kebanyakan kes penggunaan skrin utama Android, di mana latar belakang legap memberikan hasil yang boleh diramal.

7. Kestabilan: jangan terlalu kerap mengubahnya

Favicon membina pengecaman melalui pengulangan. Menukarnya dengan kerap memaksa pengguna mempelajari semula tab mana milik anda, dan ia juga menimbulkan masalah teknikal. Pelayar melakukan caching favicon secara agresif, dan Google mengambil serta menyimpannya secara berasingan daripada halaman anda, jadi ikon baharu boleh mengambil masa beberapa hari atau minggu untuk muncul dalam hasil carian. Google juga meminta URL favicon yang stabil, ikon yang saiznya gandaan 48 piksel (48x48, 96x96, dan seterusnya), dan fail yang boleh dirangkak (tidak disekat oleh robots.txt). Anggap perubahan favicon sebagai keputusan setaraf penjenamaan semula, bukan hiasan bermusim.

8. Keadaan pemberitahuan dan favicon dinamik

Sesetengah aplikasi web menukar favicon untuk menunjukkan mesej belum dibaca, status rakaman atau ralat. Jika dilakukan dengan baik, ia berguna; jika keterlaluan, ia mengganggu.

• Gunakan lencana kecil (titik atau kiraan pendek) di sudut, bukan reka bentuk semula sepenuhnya. Ikon asas harus kekal dapat dikenali.
• Gunakan secara jarang. Simpan lencana untuk peristiwa yang memerlukan tindakan pengguna. Jangan animasikan ikon secara berterusan.
• Hadkan nombor. Pada 16x16 hanya satu atau dua digit yang boleh dibaca; paparkan "9+" atau titik biasa dan bukan "137".
• Tetapkan semula dengan segera apabila pengguna telah menguruskan perkara itu, dan pulihkan ikon lalai.
• Jangan bergantung pada warna sahaja. Titik merah juga harus disokong oleh tajuk halaman, seperti "(3) Peti Masuk", supaya maklumat itu tersedia kepada semua orang.

Favicon dinamik biasanya dilukis pada kanvas dan digantikan dengan mengemas kini href elemen pautan ikon. Hadkan kekerapan kemas kini (throttle), kerana menukar favicon secara berterusan boleh menggunakan CPU dan mengalih perhatian pengguna.

9. Prestasi

Favicon memang kecil, tetapi ia tetap permintaan yang boleh dilakukan dengan buruk.

• Pastikan fail kecil. Favicon PNG biasanya beberapa ratus bait hingga beberapa kilobait. SVG yang ringkas boleh kurang daripada 1 KB.
• Elakkan fail ICO yang membengkak. ICO berbilang saiz dengan imej 16, 32 dan 48 piksel sudah memadai. Membenamkan imej 256x256 menggandakan saiz fail tanpa manfaat yang kelihatan dalam tab pelayar.
• Tetapkan pengepala caching. Hidangkan ikon dengan jangka hayat Cache-Control yang panjang, contohnya public, max-age=31536000, immutable, dan gunakan nama fail berversi atau ber-hash apabila anda mengubahnya.
• Isytiharkan ikon secara eksplisit. Pelayar meminta /favicon.ico secara lalai, jadi sediakan satu walaupun anda mengisytiharkan ikon lain, untuk mengelakkan hingar 404 dalam log anda.
• Mampatkan. Jalankan PNG melalui pengoptimum 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 menjana semua fail ini daripada satu imej sumber, penjana favicon MakeFav menghasilkan set standard, dan halaman pembangun merangkumi pilihan integrasi.

10. Kebolehcapaian

Favicon tidak mempunyai teks alt dan pembaca skrin tidak mengumumkannya, jadi alat kebolehcapaian tradisional seperti atribut alt tidak terpakai. Perkara yang penting:

• Tajuk halaman membawa maksud. Tulis elemen <title> yang unik dan deskriptif. Jangan sekali-kali bergantung pada ikon untuk menyampaikan keadaan; cerminkan sebarang lencana dalam tajuk.
• Kebolehlihatan untuk pengguna penglihatan rendah. Kontras tinggi, bentuk tebal dan tanda yang besar membantu pengguna yang mengimbas tab secara visual.
• Kebebasan daripada warna. Pastikan bentuk atau huruf membezakan keadaan, bukan hanya rona.
• Kurangkan gangguan. Elakkan favicon yang berkelip atau beranimasi, yang boleh menjadi masalah bagi pengguna yang sensitif terhadap gerakan.

Senarai semak UX favicon

Senarai semak ujian

Jangan percayai pratonton besar dalam alat reka bentuk anda. Uji ikon sebenar dalam keadaan sebenar:

1. Pelbagai pelayar. Semak Chrome, Firefox, Safari dan Edge, kerana setiap satu memilih ikon dan saiz dengan sedikit berbeza.
2. Mod cerah dan gelap. Tukar tema OS dan pelayar dan lihat jalur tab setiap kali.
3. Paparan retina dan standard. Semak pada monitor 1x dan skrin 2x atau 3x, dan zum dalam pelayar.
4. Bar penanda halaman. Tandakan halaman dan lihat sama ada ikon masih boleh dibaca di sebelah laman lain.
5. Banyak tab. Buka 20 tab dan lihat sama ada anda boleh menemui tab anda sekali pandang.
6. Pratonton SERP Google. Semak hasil carian mudah alih selepas ikon dirangkak semula. Ingat bahawa ia mungkin mengambil masa untuk dikemas kini.
7. Skrin utama. Tambah laman ke skrin utama iOS dan Android dan pastikan ikon tidak terpangkas, tiada sudut hitam, dan tidak terlalu kecil di dalam masknya.
8. Semakan teknikal. Jalankan domain anda melalui penyemak favicon MakeFav untuk mengesahkan fail wujud, memulangkan status 200, mempunyai saiz yang betul dan diisytiharkan dengan betul dalam HTML anda.

Aliran kerja praktikal

1. Mulakan daripada logomark anda dan ringkaskannya kepada satu bentuk atau huruf.
2. Cipta kanvas segi empat sama dengan latar belakang pepejal atau berbentuk yang sesuai dalam kedua-dua tema.
3. Eksport saiz 32x32 dan 16x16 dan perhalusi versi kecil secara manual dalam editor piksel.
4. Jana set penuh (ICO, PNG, apple-touch-icon, ikon manifest) dengan penjana.
5. Tambah tag pautan, tetapkan pengepala cache, lancarkan, dan sahkan dengan penyemak.

Favicon ialah salah satu aset terkecil di laman anda dan salah satu yang paling kerap dilihat. Beberapa keputusan yang teliti tentang kontras, kesederhanaan dan keselarasan menjadikannya berfungsi pada setiap tab, tema dan peranti.

Soalan lazim

Apakah saiz favicon yang sepatutnya?

Reka untuk 16x16 dan 32x32 bagi tab pelayar (pelayar menggunakan 32x32 pada paparan berketumpatan tinggi), sediakan apple-touch-icon 180x180 untuk iOS, dan PNG 192x192 serta 512x512 untuk Android dan PWA. Untuk hasil carian Google, gunakan ikon segi empat sama yang saiznya gandaan 48 piksel, seperti 48x48 atau 96x96. Sumber SVG boleh diskalakan kepada kesemuanya.

Haruskah saya menggunakan logo penuh sebagai favicon?

Biasanya tidak. Logo penuh dengan wordmark terlalu terperinci dan terlalu lebar untuk ikon segi empat sama 16x16. Gunakan logomark atau monogram satu atau dua huruf, dan ringkaskannya supaya kekal dapat dikenali apabila kecil.

Bagaimana saya menjadikan favicon berfungsi dalam mod gelap?

Pendekatan paling selamat ialah memberikan ikon bentuk latar belakang pepejalnya sendiri atau garis luar yang berkontras, supaya ia tidak bergantung pada warna tab. Sebagai alternatif, gunakan favicon SVG dengan media query prefers-color-scheme untuk menukar warna, dan sediakan fallback PNG atau ICO untuk pelayar yang tidak menyokong ikon SVG. Sentiasa uji dalam kedua-dua tema cerah dan gelap.

Mengapa favicon baharu saya tidak muncul?

Pelayar melakukan caching favicon untuk jangka masa yang lama, dan Google menyimpan salinannya sendiri, yang dikemas kini mengikut jadualnya sendiri, sering mengambil masa beberapa hari atau minggu. Lakukan muat semula paksa (hard refresh) pada halaman, kosongkan cache pelayar, gunakan nama fail berversi yang baharu, dan pastikan tag pautan serta /favicon.ico di akar menunjuk ke fail yang betul. Anda boleh mengesahkan persediaan dengan penyemak MakeFav.

Adakah idea yang baik untuk memaparkan lencana pemberitahuan pada favicon?

Ya, jika digunakan secara jarang. Titik kecil atau kiraan satu atau dua digit membantu pengguna menyedari sesuatu yang memerlukan tindakan, tetapi animasi berterusan atau nombor besar menjejaskan kebolehbacaan dan perhatian. Sentiasa cerminkan keadaan dalam tajuk halaman, pulihkan ikon lalai apabila perkara itu telah diuruskan, dan jangan bergantung pada warna sahaja.