Apakah Favicon dan Mengapa Ia Penting untuk Laman Web Anda?

Favicon (singkatan bagi "favorite icon", iaitu ikon kegemaran) ialah imej segi empat sama yang kecil yang mewakili sesebuah laman web dalam tab pelayar, penanda halaman, senarai sejarah, hasil carian Google, skrin utama telefon dan aplikasi web yang dipasang. Ia penting kerana memberikan laman anda wajah yang mudah dikenali sekali pandang, memudahkan laman anda dicari dalam banyak tab yang dibuka, menunjukkan bahawa laman itu profesional dan boleh dipercayai, dan kini dipaparkan di sebelah nama laman anda dalam hasil Google. Tanpa favicon, pelawat hanya melihat ikon glob generik atau ikon halaman kosong, dan pelayan anda memenuhkan lognya dengan ralat 404. Anda boleh membuat set favicon yang lengkap secara percuma dengan penjana favicon MakeFav.

Apakah favicon?

Favicon ialah grafik berjenama yang kecil, biasanya versi ringkas logo atau satu huruf atau simbol, yang diambil oleh pelayar dan perisian lain daripada laman web anda dan dipaparkan di mana-mana sahaja yang memerlukan pengecam visual yang padat. Pada pelayar desktop, ia lazimnya dilukis pada saiz 16 kali 16 piksel CSS, walaupun fail itu sendiri hendaklah lebih besar supaya kekal tajam pada skrin berketumpatan tinggi.

Secara teknikal, favicon hanyalah fail imej yang dirujuk daripada HTML anda (atau ditemui pada lokasi lalai) yang dimuat turun oleh ejen pengguna secara berasingan daripada kandungan halaman. Hari ini, "favicon" jarang sekali berupa satu fail sahaja. Laman web moden biasanya menyediakan beberapa versi ikon yang sama supaya pelayar, enjin carian, iOS dan Android masing-masing mendapat format dan saiz yang sesuai.

Sejarah ringkas favicon

Favicon bermula pada Mac 1999, apabila Microsoft mengeluarkan Internet Explorer 5. Pelayar itu membenarkan pengguna menyimpan halaman ke dalam senarai "Favorites", dan ia turut mencari fail ikon kecil bernama favicon.ico di akar laman untuk dipaparkan di sebelah setiap entri yang disimpan. Idea ini mudah: jika sesebuah laman menyediakan /favicon.ico, ikon itu akan muncul di sebelah penanda halaman.

Pelayar lain tidak lama kemudian menerima pakai ciri ini, dan pelayaran bertab menjadikannya jauh lebih berguna. Apabila tab menjadi cara utama orang menavigasi, favicon berubah daripada hiasan penanda halaman kepada alat bantu navigasi yang utama. Sepanjang tahun, pendekatan ini berkembang:

• Awal 2000-an: elemen <link rel="icon"> membolehkan laman menuding ke ikon pada sebarang URL dan bukan hanya di akar, dan fail PNG serta GIF mula diterima oleh pelayar selain IE.
• 2010-an: Apple memperkenalkan apple-touch-icon untuk skrin utama iOS, manakala Android dan Windows menambah konvensyen masing-masing seperti ikon manifest dan imej jubin.
• Hari ini: favicon SVG, manifest aplikasi web, ikon yang peka mod gelap dan keperluan favicon hasil carian Google telah menjadikan favicon sebahagian kecil tetapi nyata daripada persediaan teknikal sesebuah laman.

Di mana favicon dipaparkan hari ini

Favicon anda dipaparkan di lebih banyak tempat daripada sekadar tab pelayar. Tempat utamanya ialah:

• Tab pelayar: tempat yang paling ketara, di mana ikon sering menjadi satu-satunya yang boleh dilihat apabila banyak tab dibuka.
• Penanda halaman dan kegemaran: ikon berada di sebelah tajuk halaman dalam bar dan menu penanda halaman.
• Sejarah dan halaman paling kerap dilawati: pelayar memaparkan favicon dalam senarai sejarah dan pada halaman tab baharu.
• Hasil carian Google: pada mudah alih dan desktop, Google memaparkan favicon sesebuah laman di sebelah nama dan URL laman itu.
• Skrin utama: apabila pelawat menambah laman anda ke skrin utama pada iOS atau Android, ikon sentuh atau ikon manifest menjadi pintasan bergaya aplikasi.
• PWA yang dipasang: aplikasi web progresif menggunakan ikon dalam manifest aplikasi webnya untuk ikon pelancar, skrin percikan dan penukar tugas.
• Jubin Windows dan laman yang disematkan: versi Windows dan Edge yang lebih lama menggunakan imej jubin yang ditetapkan untuk laman yang disematkan; versi moden kebanyakannya menggunakan semula ikon standard anda.
• Pratonton pautan dalam sesetengah aplikasi: sesetengah alat sembang dan produktiviti (Slack ialah contoh yang terkenal) memaparkan favicon sesebuah laman di sebelah pautan yang dibentangkan. Kebanyakan pratonton bergantung terutamanya pada imej Open Graph, tetapi favicon sering menyediakan tanda jenama yang kecil itu.

Mengapa favicon penting untuk laman web anda

Pengecaman jenama

Orang mengecam warna dan bentuk lebih pantas daripada membaca teks. Ikon yang konsisten dan berulang dalam tab, penanda halaman dan hasil carian membina kebiasaan setiap kali ia dilihat, yang bermaksud pendedahan jenama percuma pada setiap lawatan.

Kepercayaan dan kredibiliti

Favicon yang tiada menjadikan laman kelihatan belum siap. Ikon yang kemas dan dipaparkan dengan betul ialah isyarat kecil bahawa seseorang mengambil berat tentang perincian, yang menyokong tanggapan bahawa laman itu sah. Ia bukan ciri keselamatan, dan laman pancingan data boleh menyalin ikon, tetapi ikon lalai yang kosong jarang membantu perniagaan kelihatan mantap.

Kadar klik lalu dalam hasil carian

Oleh sebab Google memaparkan favicon di sebelah penyenaraian anda, ia menjadi sebahagian daripada rupa hasil anda berbanding pesaing. Google tidak menerbitkan sebarang kesan kedudukan untuk favicon, dan anda tidak seharusnya mengharapkan peningkatan kedudukan. Manfaatnya berkaitan pengecaman visual: pengguna yang mengenali ikon anda lebih cenderung untuk menyedari dan memilih hasil anda, terutamanya pada mudah alih yang hasilnya dipaparkan secara padat.

Kebolehgunaan dengan banyak tab dibuka

Apabila pelayar membuka dua puluh tab, tajuk dipotong sehingga hilang dan favicon sahajalah yang tinggal. Ikon yang tersendiri membolehkan orang menemui tab anda dengan serta-merta dan kembali kepadanya, bukannya membuka tab pendua atau melupakannya.

Kesan profesional

Favicon yang direka dengan baik menunjukkan perhatian yang sama terhadap perincian seperti bahagian lain laman anda. Sama ada untuk halaman produk, dokumentasi, blog atau aplikasi web, ia antara perkara penambah kilauan yang paling murah untuk ditambah.

Kebolehcapaian dalam mencari tab

Ikon membantu pengguna yang mengimbas secara visual dan bukannya membaca, termasuk orang yang mengalami disleksia atau perbezaan kognitif, serta sesiapa yang bertukar tugas dengan pantas. Ikon berkontras tinggi dengan bentuk yang ringkas lebih mudah dikenal pasti. Namun, ingatlah bahawa favicon hanyalah pelengkap: ia tidak menggantikan tajuk halaman yang jelas, yang menjadi sandaran pembaca skrin dan teknologi bantuan.

Apa yang berlaku jika anda tiada favicon

Pelayar secara automatik meminta /favicon.ico daripada akar domain anda, walaupun HTML anda tidak menyebutnya. Jika fail itu tidak wujud, beberapa perkara berlaku:

• Ikon generik: pelawat melihat ikon glob, dokumen atau kosong yang lalai dalam tab dan penanda halaman, yang kelihatan tanpa identiti.
• Ralat 404 dalam log anda: setiap pelayar yang meminta fail itu menjana permintaan yang gagal. Pada laman yang sibuk, ini menambah hingar pada log akses, pemantauan ralat dan analitik, dan boleh menyembunyikan masalah sebenar.
• Tiada ikon dalam hasil Google: tanpa favicon yang sah dan boleh dirangkak, Google memaparkan pemegang tempat lalainya di sebelah penyenaraian anda.
• Permintaan yang sia-sia: pelayar mungkin mencuba semula, menambah beban kecil tetapi tidak bermakna pada pelayan anda.

Malah ikon yang sangat ringkas lebih baik daripada tiada, kerana ia menghapuskan ralat 404 dan memberi pengguna sesuatu yang mudah dikenali.

Format favicon diterangkan

Tiada satu format pun yang meliputi semua platform, jadi kebanyakan laman menggunakan set fail yang kecil.

Imej jubin Windows warisan (dikonfigurasikan melalui browserconfig.xml) diperlukan untuk Internet Explorer 11 dan Edge lama. Ia jarang diperlukan sekarang kecuali anda perlu menyokong persekitaran tersebut.

Garis panduan favicon Google untuk hasil carian

Jika anda mahu ikon anda muncul dalam Carian Google, ikuti keperluan yang diterbitkan oleh Google:

• Saiz: imej mestilah segi empat sama (1:1) dan gandaan 48 piksel, seperti 48x48, 96x96 atau 144x144. Google kemudian mengecilkannya kepada 16x16 untuk paparan. Saiz minimum yang disokong ialah 8x8, tetapi 48x48 atau lebih besar disyorkan.
• Format: sebarang format yang disokong oleh pelayar boleh digunakan, termasuk ICO, PNG dan SVG.
• URL yang stabil: jangan kerap menukar URL favicon. Alamat yang stabil membantu Google mengekalkan ikon anda sentiasa terkini.
• Boleh dirangkak: fail favicon dan halaman utama anda mestilah boleh diakses oleh Googlebot. Jangan sekatnya dalam robots.txt atau di sebalik log masuk.
• Satu pengisytiharan bagi setiap laman: ikon dikaitkan dengan halaman utama laman, jadi letakkan tag <link> dalam head halaman utama anda.
• Mewakili dan sesuai: ikon hendaklah mencerminkan jenama anda, dan Google boleh menggantikan ikon yang menyinggung perasaan atau mengelirukan dengan ikon lalainya.

Selepas anda menerbitkan atau menukar favicon, Google mungkin mengambil masa beberapa hari hingga beberapa minggu untuk merangkak semula dan mengemas kininya, jadi jangan mengharapkan perubahan serta-merta.

Cara membuat favicon dengan pantas menggunakan MakeFav

Anda tidak memerlukan perisian reka bentuk atau baris perintah. Penjana MakeFav menukar satu imej sumber kepada fail-fail yang diterangkan di atas.

1. Sediakan karya seni anda. Gunakan logo atau simbol segi empat sama pada saiz 512 x 512 px atau lebih besar. Bentuk ringkas paling sesuai kerana ikon akan dilihat pada saiz 16 px.
2. Muat naiknya di laman utama MakeFav, atau buka editor untuk melaraskan imej, latar belakang dan pelapik sebelum mengeksport.
3. Pratonton hasilnya pada saiz kecil dan pada latar belakang cerah dan gelap untuk memastikan ia kekal jelas.
4. Muat turun pakej. Ia mengandungi ICO, pelbagai saiz PNG, Apple touch icon, ikon manifest dan coretan HTML untuk ditampal.
5. Muat naik fail ke akar laman web anda supaya ia boleh dicapai pada laluan seperti /favicon.ico.
6. Tambah HTML ke dalam <head> setiap halaman, atau reka letak atau templat kongsi anda.
7. Sahkan dengan penyemak favicon, kemudian kosongkan cache pelayar anda dan muat semula untuk melihat ikon baharu.

Contoh coretan 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 pautan ICO membantu pelayar mengutamakan SVG apabila ia menyokongnya sambil mengekalkan ICO sebagai sandaran. PNG 96 px memenuhi peraturan gandaan 48 Google.

Contoh manifest aplikasi web

{
  "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 saluran paip binaan atau mahu mengautomasikan penciptaan ikon, lihat sumber pembangun.

Petua reka bentuk untuk favicon yang berkesan

• Pastikan ringkas. Satu bentuk, satu huruf atau monogram yang tegas lebih baik daripada logo terperinci yang menjadi kabur pada 16 px.
• Gunakan kontras yang kuat. Pastikan ikon kelihatan pada tema pelayar cerah dan gelap. Jubin latar belakang berwarna membantu.
• Elakkan teks. Satu huruf permulaan tidak mengapa; perkataan tidak dapat dibaca pada saiz ini.
• Tinggalkan sedikit pelapik untuk ikon maskable dan bucu bulat supaya tiada bahagian penting yang terpotong.
• Kekal konsisten dengan logo dan warna jenama anda supaya favicon mengukuhkan pengecaman.
• Uji pada peranti sebenar dan semak rupanya dalam tab, penanda halaman dan hasil Google.

Masalah favicon yang biasa

Jika ikon anda tidak muncul, punca lazimnya ialah caching, laluan yang salah dan fail yang disekat. Pelayar menyimpan cache favicon dengan agresif, jadi muat semula paksa atau tetingkap peribadi baharu selalunya cukup untuk melihat kemas kini. Semak bahawa URL fail mengembalikan status 200 dan jenis kandungan yang betul, dan bahawa tag <link> berada dalam <head>. Untuk carian, pastikan robots.txt tidak menyekat ikon atau halaman utama. Penyemak MakeFav boleh membantu anda mengesan masalah ini dengan cepat.

Soalan lazim

Apakah maksud favicon?

Favicon ialah singkatan bagi "favorite icon" (ikon kegemaran). Nama ini datang daripada Internet Explorer 5, yang pada tahun 1999 pertama kali menggunakan fail ikon kecil untuk menghiasi entri dalam senarai Favorites pelayar. Istilah itu kekal digunakan walaupun ikon itu kini muncul di banyak tempat lain.

Adakah favicon membantu SEO?

Favicon bukan faktor kedudukan langsung. Namun, ia muncul di sebelah nama laman anda dalam hasil Google pada mudah alih dan desktop, jadi ia boleh meningkatkan pengecaman jenama dan daya tarikan visual penyenaraian anda, yang mungkin menyokong klik secara tidak langsung. Mengikuti garis panduan Google menjadikan ikon itu layak untuk dipaparkan.

Apakah saiz favicon yang sepatutnya?

Untuk Carian Google, gunakan imej segi empat sama yang merupakan gandaan 48 piksel, seperti 48x48 atau 96x96. Untuk liputan yang lebih luas, sediakan juga fail ICO, Apple touch icon 180x180 serta ikon manifest 192x192 dan 512x512. SVG ialah tambahan yang baik untuk kebolehskalaan.

Adakah saya masih memerlukan favicon.ico jika menggunakan PNG atau SVG?

Ia masih idea yang baik. Pelayar dan sesetengah alat meminta /favicon.ico secara lalai, dan perisian lama bergantung padanya. Mengekalkan fail ICO di akar laman mengelakkan ralat 404 dan memberi anda sandaran yang selamat apabila SVG atau PNG tidak disokong.

Mengapa favicon saya tidak dikemas kini?

Pelayar dan enjin carian menyimpan cache favicon untuk tempoh yang lama. Cuba muat semula paksa, tetingkap peribadi atau kosongkan cache. Pastikan laluan fail betul dan fail baharu disajikan. Dalam Carian Google, ikon yang diubah boleh mengambil masa beberapa hari atau minggu untuk dirangkak semula dan dikemas kini.