HTML Favicon

Favicon ialah bentuk pendek ikon kegemaran, juga dipanggil ikon penanda halaman boleh ditakrifkan sebagai logo kecil dengan sambungan fail .ico, bukan dengan mana-mana fail .bmp atau .gif lain yang biasanya dilihat dalam bar alamat dengan imej diperibadikan URL yang kerap dilawati, membantu iklan, mempromosikan atau dijadikan sebagai tanda dagangan standard, sementara itu memainkan aspek penting dalam tapak web seperti google, Facebook di mana kami telah mencatatkan logo kecil di sebelah kiri bar alamat yang memberikan rupa profesional serta muncul dalam penanda halaman kegemaran pengguna dan juga tanpa ikon favicon tapak web kekal ikon halaman web generik dan pilihan sebagai pintasan daripada ikon kegemaran.

Contoh contoh masa nyata ditunjukkan di bawah. Mengklik kegemaran dalam penanda halaman menunjukkan ikon biasa. Malah sesetengah perkhidmatan Web menggunakan XML dan enjin carian menggunakan favicon untuk keunikannya.

Sintaks:

Teg meta utama diberikan di bawah untuk dipautkan ke halaman web.

<link rel="icon" href="image path"  type="image/icon type">

Dalam sintaks di atas, anda menggantikan laluan imej dengan lokasi sebenar favicon.ico, yang mungkin anda letakkan dalam direktori imej. Jenis nilai terakhir ialah fail format MIME. Anda boleh menggunakan sebarang jenis imej di sini, tetapi kami menganggap format GIF lebih maju.

Bagaimana untuk Mencipta Favicon HTML?

Seorang pereka web mencipta ikon diperibadikan mereka dan mengaitkannya dengan halaman web. Penyemak imbas yang menyokong favicon memaparkannya dalam bar alamat tertentu mereka, mencapainya melalui dua cara. Kedua, ia dipaparkan dengan antara muka dokumen bertab dalam pautan seterusnya. Walaupun apabila dipilih daripada cakera keras mereka, favicon mesti, paling penting, menggunakan format fail (.ico). Terdapat beberapa perkhidmatan percuma yang boleh menukar imej.

Setelah pembangun melengkapkan reka bentuk tapak web, mereka menambah favicon. Cuma ia menggantikan ikon dokumen kosong pada tab penyemak imbas dengan ikon halaman web rasmi. Ini membolehkan pengguna menjadikan tapak web lebih mudah diakses atau mencari tapak web yang lebih mudah diakses. Enjin carian paling popular, Google, menarik perhatian atau mengenal pasti dengan pengguna melalui tema logonya. Memandangkan ikon terlalu kecil, ia harus jelas untuk difahami oleh pengguna. Terdapat kaedah yang berbeza untuk mencipta Favicon. Kaedah 1 – penjanaan automatik menggunakan Pengurus Fail, Kaedah -2: Memuat naik imej biasa.

Langkah untuk mencipta favicon.ico. Ia adalah proses pendaratan yang mudah:

1. Menjana imej dengan saiz 16 x 16 piksel (Pengiktirafan imej). Di sini, anda boleh mengubah saiz imej untuk menjadikannya kecil untuk digunakan sebagai favicon.
2. Buat penukaran kepada format fail favicon.ico untuk pemahaman penyemak imbas.
3. Memuat naik ikon yang dijana ke dalam tapak web.
4. Langkah seterusnya ialah menambahkan kod pada HTML. Anda juga boleh menggunakan favicon sebagai desktop atau ikon Apple.

Bagaimana untuk Memasukkan Favicon dalam Fail HTML?

Anda juga boleh mencipta favicon dengan latar belakang lutsinar, menggunakan sama ada format .gif atau .png. Mungkin timbul persoalan mengapa kita memerlukan favicon? Jawapannya sangat mudah: penjenamaan dan pemasaran laman web kami di seluruh dunia. Ikon kecil menjadikan halaman web lebih profesional sedikit. Anda menambah favicon pada fail HTML, yang mesti mempunyai ciri tertentu. Anda boleh menambah atau menukar favicon di tapak web pada bila-bila masa.

• Nama Standard dengan Format Fail: Setelah imej dicipta dan dinamakan, lalai mempunyai favicon.ico (fail ICO dilakukan dengan Editor X-ICON).
• Saiz Fail Imej:16 * 16, 64 * 64, 128 * 128 piksel dan fail tidak boleh melebihi 100KB.
• Warna: mungkin 8 gigitan, 24 atau 32 gigitan
• Imej: Hendaklah dalam format gif atau png.

Favicon diletakkan di antara elemen dan menggantikan lokasi imej. Ia menggunakan tag pautan yang mentakrifkan pautan ke fail. Ia menggunakan dua atribut, rel dan href. Kami boleh menggunakan Photoshop dengan pemalam dan penjana dalam talian lain untuk menukar fail imej kepada format .ico.

Laluan Lokasi Ikon: Ini adalah pelaksanaan standard.

<link rel=" icon" ……….../>      // It installs variety of icons.
<link rel =" Shortcut icon" href=……….../>   // here in the link attribute shortcut installs its own address bar icon.

Kod seterusnya digunakan untuk pengguna IOS:

<link rel =" apple-touch -icon" sizes ="180 x 180  href=……….../>

Di bawah ialah contoh kod yang boleh kami gunakan dalam kod HTML.

Contoh:

<!-- HTML code demo to display an icon in an address bar-->
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title>
EDUCBA  icon
</title>
<link rel = "icon" href =https://favi.png  type = "image/x-icon">
</head>
<body>
<h1 style = "color:blue;">
EDUCBA Icon
</h1>
<p>
Icon is added to the address bar
</p>
</body>
</html>

Output:

Penjelasan Kod: Saya telah mencipta ikon bujur kecil dalam kod di atas dan menukarnya menjadi favicon. Kami ambil perhatian bahawa ikon dipaparkan dalam Internet Explorer, tetapi banyak penyemak imbas tidak menyokongnya. IE mengambil ikon dari direktori akar. Fail HTML memaparkan ralat 404 daripada respons pelayan jika tiada laluan tertentu wujud. Anda mungkin perlu mengosongkan cache tapak web anda untuk mengemas kini favicon kerana penyemak imbas web secara berterusan memegang favicon cache.

Remarque : Bien qu'avec la réussite de la création du favicon, il n'est pas visible dans tous les onglets du navigateur. La bonne compatibilité est avec Internet Explorer 5.0+ et Netscape 7.0+. La plupart des navigateurs modernes prennent en charge différents formats graphiques comme favicon. Le problème se pose lorsqu'un serveur n'est pas bien configuré : Il faut créer le root a type= « image/x-icon au format .ico.

Conclusion

Pour conclure, le logo favicon joue un rôle essentiel dans le développement de sites Web, et nous avons également vu diverses méthodes pour créer un favicon, obtenant ainsi une compatibilité entre navigateurs. Cette icône aide à créer une spécification visuelle avec le nom de domaine. Les ajouter au site Web est facile car ils guident la reconnaissance et l'image de marque du site et aident le concepteur Web à marquer son professionnalisme.

Atas ialah kandungan terperinci HTML Favicon . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!