Pasti anda biasa melihat icon yang tertera di sebelah alamat URL tertentu.
Pasti anda teringin membuatnya sendiri bukan? Tapi, bagaimana ya?
Apa yang anda lihat di atas adalah dinamakan sebagai “Favicon”. Apakah fungsinya?
Jika dilihat secara kasar, ia hanyalah hiasan ikon pada alamat web sahaja. Realitinya, ia sebenarnya adalah simbol/logo yang akan memudahkan sesiapa sahaja untuk mengingat jenama anda apabila menanda (bookmarking) halaman milik anda. (hanya drag ikon itu dan bawa ke bahagian Tab).
Fungsi Favicon hanya terdapat pada Pelayar Musang (Firefox..hehe) dan Internet Explorer 5+ dan ke atas Sahaja. Tapi, siapa tahu akan datang semua pelayar akan turut serta, kan?
Sangat senang. (saya siapkan dalam 15 minit kerana saya dah biasa dengan “shortcut key” Photoshop).
Mari kita mulakan.
1. Mula-mula, buka perisian Adobe Photoshop (tidak kira versi apa), klik File > Open. Buka satu fail gambar yang anda suka untuk jadikan ia sebagai “favicon”. Seperti contoh, saya buka satu fail jenis JPG yang bergambar buah epal.
2. Klik File > New, dan binakan satu fail baru yang bersaiz 16 x 16 (saiz 32 x 32 pun boleh). Namakan fail itu itu sebagai favicon. Sila lihat gambaran di bawah.
3. Kemudian, dengan menggunakan fungsi “Move Tool” (aktifkan “Show Transform Controls), Bawa fail ikon bersaiz besar tadi ke dalam fail kosong bersaiz 16 x 16 tersebut.
Kemudian, ubahkan saiz mengikut kesesuaian. (Sila lihat gambarajah di bawah)
Anda juga boleh gunakan fungsi “Cut” dan “Paste” untuk memindahkan gambar.
TIP: Untuk memudahkan anda mengubah saiz ikon yang TERsangat kecil itu, sila ubahkan “Zoom” kepada 1200%. Jika anda melihat gambar itu “pecah-pecah” (seperti gambar di bawah), jangan risau. Kerana fail yang bersaiz kecil, apabila di “Zoom In”, memang akan kelihatan sebegitu.
4. Jika sudah berpuas hati, klik File > Save for Web , dan namakan fail ikon ini sebagai “favicon.ico”.
Untuk pengetahuan anda, fail .ICO adalah fail yang digunakan gambar ikon di komputer kita.
Pelayar Netscape yang terbaru, Internet Explorer 5+, Opera terbaru dan pelayar lain HANYA boleh memaparkan favicon yang berformat .ICO sahaja. (Kecuali Mozilla Firefox yang boleh memaparkan format .PNG)
OK, sekarang siaplah fail ikon tersebut. Cara diatas boleh juga digunakan untuk mencipta ikon fail (seperti Folder, My Computer, My Briefcase, My Document ) mengikut kreativiti anda sendiri. Selain Adobe Photoshop, anda juga boleh menggunakan PAINT untuk tujuan ini. (dengan syarat, savekan ikon tadi dengan format “<NamaIkon>.ico“).
Langkah seterusnya, bagaimana nak paparkan di laman web kita? Teruskan membaca.
PERTAMA: upload gambar ikon “favicon.ico” ke dalam website anda.
p/s: Jika anda bermasalah semasa upload fail ikon ini (tak semua sistem hosting menyokong fail .ICO), Sila upload ikon anda sebagai format GIF/JPG terlebih dahulu. Kemudian, bila sudah diupload, tukarkan .GIF/.JPG tadi kepada .ICO
KEDUA: buka satu fail laman anda (misalnya “index.html”), masukkan code ini di ruang HTML.
<HEAD><link rel="shortcut icon" href="/favicon.ico" mce_href="/favicon.ico" type="image/x-icon" /><HEAD>
p/s: Anda mesti menukar “/favicon.ico” berpandukan lokasi anda menempatkan ikon di langkah PERTAMA. Contohnya “/images/favicon.ico” jika anda meletakkan ikon favicon di dalam direktori “/images”.
KETIGA: Upload fail laman tersebut ke dalam website anda. SIAP!!! anda boleh cuba taipkan semula alamat laman web anda di Address Bar untuk melihat kesannya.
p/s: Kaedah ini cuma boleh digunakan untuk laman web berbayar sahaja. Untuk blog/laman percuma, anda mungkin akan mengalami masalah untuk memasukkan code ini. (Laman blogspot saya rasa boleh, tapi belum cuba. Maklumkan pada saya jika Blogspot berfungsi.)
Inilah Hasilnya…
Selamat Mencuba kawan-kawan..
* * *
tutorial ini ditulis oleh Irfan Jani, freelance logo designer www.IrfanReka.com untuk www.mdpai.com
ANDA BEBAS MEMBUAT SEBARANG PENYALINAN DARI TUTORIAL INI TETAPI PERLULAH MEMBERI KREDIT DENGAN MENGEKALKAN NAMA DAN LINK PENULIS.
SILA DAPATKAN KEIZINAN TERLEBIH DAHULU DARI www.IrfanReka.com ATAU www.mdpai.com
terimakasih telah mengajarkan kepada saya tentang hal ini. Salam dari Indonesia
Saya memakai Opera untuk blgo saya di Blogspot. Ternyata Bisa!!!!
I do it.
Thanks.
Memakai di Internet Explorer tidak berfungsi.
Dengan opera dan Mozilla, favicon blogspot saya bekerja. 🙂
“Fungsi Favicon hanya terdapat pada Pelayar Musang (Firefox..hehe) dan Internet Explorer 5+ dan ke atas Sahaja. Tapi, siapa tahu akan datang semua pelayar akan turut serta, kan?”
mm.. awak guna internet explorer siri berapa ya? adakah 5 dan ke atas?
Mozilla Firefox memang berfungsi.. tapi Internet Explorer memang bermasalah skit.. dah banyak komen dan pertanyaan di tutorial overc berkenaan masalah Internet Explorer ni..
well, jawapan yang selalu mereka dapat adalah..
be a “Fox”, not a “shEEp”.. hehe…
rujukan:
http://www.dynamicdrive.com/forums/a…p/t-18389.html
http://annevankesteren.nl/2004/12/favicon
kalau taknak buat sendiri…ada laaagi senang punya cara..
lawatlah http://www.html-kit.com/favicon/
free je..
http://www.html-kit.com/favicon/
website ini ada generator untuk hasilkan FAVICON secara automatik..
Apa yang menarik, boleh masukkan animated FAVICON lagi..
Tutorial saya di atas sekurang-kurangnya dapat mengajar cara-cara untuk hasilkan fail ikon jenis .ICO
baiklah.. di lain masa.. saya akan kongsikan cara-cara membuat Animated FAVICON (bergerak-gerak) pula ya?
WAHH.. cantik bangat Favicon mu Riza..
Jadi.. di blogspot ternyata berfungsi juga ya..
Kawan-kawan yang menggunakan penyedia hosting percuma yang lain (seperti Tripod/Geocities/Xoom/lain-lain) silalah cuba juga ya..
Jika berfungsi, boleh lah kongsikan bersama di sini. 😉
Terimakasih atas tautannya. Saya akan berusaha mencoba.
Saya akan tambahkan tautan/link anda di Blog saya. Soalnya bermanfaat sekali buat saya.
🙂
saya sokong usaha kamu dalam memberi ilmu kepada mereka yang berminat… teruskan
yo bro !
u rock !
keep up ur good work !
orang yang tidak kedekut ilmu dan selalu memberi ilmunya kepada orang lain akan bertambah-tambah lagi ilmunya.
makin beri makin bertambah!
bukan makin kurang…
thanks bro !
memang best penerangan ini..
8. riza
thankz riza.. salam ukhwah dari blog senusantara..hehe
9. Jimmy Cutter
cutter.. tak ada blog ke untuk kami semua singgah? nanti boleh saya tumpang2 komen kat situ..hihi
10. brother`mon
Rock? saya suka rock kapak.. ;p
amin.. moga semua dapat manfaat.
11. mustahing
hehe..pelik jugak komen ni.. apa yang best agaknya ya?
sungguh berinformasi..tahniah irfan
mokhtar
http://www.cetakbaju.com
waa…gue nak makan favicon apple tu bleh?hehe:D
Saya sudah mencuba membikin file .ICO atau .ico ,tapi tidak bisa boss.
Di Adobe Photoshop 7.0 milik saya,tidak ada pilihan SAVE AS *.ICO.
Pilihan yang tersedia cuma ada:
– Save As GIF
– Save As WBMP
– Save As JPEG
– Save As PNG-8
– Save As PNG-24
Dan tidak bisa diketik manual (misal: “favicon.ico” -tanpa tanda petik)
Bagaimana ini boss? Toloooooongggg……
Makacih.(=means thank you)
Ali:
Ermm.. kalau ngak bisa manual..
cuba jadikan JPEG dulu..
kemudian buka di Paint.. dan Save As sebagai “favicon.ico”…
Datang semula jika tetap bermasalah.. terima kasih..
[…] pastu klik save as web dan namakan file tu sebagai favicon.ico Kat sini ade tut bergambar —> Tutorial mencipta FAVICON « Harap membantu __________________ […]
saya masih fail untuk membuatnya
aiyooo… nak try buat jugak laa favicon sendiri… guna paint pun boleh jugak laaa…