Favicon adalah sebuah logo atau grafik kecil yang terletak pada kotak sebelah kiri URL browser (Firefox & Internet Explorer) anda. Juga dikenali sebagai website icon, page icon atau urlicon. Favicon biasanya digunakan dalam URL bar, fungsi bookmark dan juga pada tab browser.
Lihat gambarajah berikut sebagai contoh. Tanda no 1 & 2 adalah salah satu bentuk favicon yang di maksudkan :
Langkah-langkah membina Favicon
1.) Pilih gambar atau grafik yang sesuai untuk jadikan favicon. Image yang dibenarkan adalah dalam bentuk .jpg, .png, .gif.
2.) Pilih saiz yang tidak terlalu besar. Anggaran saiz adalah 150px x 150px.
3.) Image tersebut perlu ditukar kepada frmat “.ico“. Untuk memudahkan anda menukar format tersebut, anda boleh gunakan perkhidmatan percuma di laman web - http://www.html-kit.com/favicon
4.) Di dalam laman web tersebut, sila pilih browse untuk memilih image yang di perlukan dari komputer anda.
5.) Terdapat pilihan sama ada anda ingin membuat favicon berbentuk animasi atau tidak.
6.) Tekan butang “Generate Favicon.ico” untuk membina image dalam format “.icon” dan ikuti arahan seterusnya. Selepas itu, satu fail dalam bentuk “.zip” terbentuk di komputer anda.
7.) Anda perlu unzip fail tersebut untuk mendapatkan favicon yang telah terbina.
8.) Setelah di unzip, klik folder tersebut dan anda akan melihat file favicon.ico dan folder extra. Dalam folder extra terdapat juga file animated_favicon.gif, preview_16×16.png dan readme.txt.
10.) Sila upload file favicon.ico kepada root directory website anda, iaitu pada public_html. Jika anda inginkan animated favicon, sila upload sekali animated_favicon.gif yang terletak pada folder extra.
11.) Sila letakkan kod dibawah diantara bahagian header website anda seperti berikut:
<head>
<link rel=”shortcut icon” href=”favicon.ico” >
</head>
12.) Jika anda inginkan animated favicon, sila tambahkan kod ini:
<head>
<link rel=”shortcut icon” href=”favicon.ico” >
<link rel=”icon” href=”animated_favicon1.ico” type=”image/gif” >
</head>
13.) Upload kod baru pada header website anda.
14.) Untuk melihat hasilnya, sila buka laman web anda. Tekan F5 untuk refresh browser beberapa kali jika favicon tidak kelihatan.
Selamat mencuba. |
