Favicon:Display Your Logo on Browser Address Bar.
Salam hormat Salam ceria
Maaf yer, guna tajuk omputih untuk post kali ini.Mulanya tulis tajuk kut bahasa Melayu, teras panjangnya tajuk. Lepas tu buat tajuk “Tutorial Favicon” terasa macam hebat sangat. Macam guru mengajar murid2 lah pulok.Aku ni kira budak baru belajar. Jadi akhirnya aku putuskan tajuk di atas sebagai perkongsian ilmu daripada aku. Ilmu ini pun aku baru jer dapat hasil usaha aku sendiri setelah membuat sedikit carian pada enjin google “how to put icon before URL “
Apa itu Favicon?
Menurut pemahaman aku sendiri, favicon ialah popcorn icon yang kita biasa lihat sebelum URL dan juga pada browser tab ( rujuk gambar di atas ) Icon ini sebenarnya sebagai satu penjenamaan kepada blog kita supaya para pengunjung lebih mudah mengingati blog kita (bookmarking). Dengan menggerakkan cursor ke arah icon itu, dragkan ke tab.Mudah bukan!! Sebagai praktikal lakukan sekarang untuk icon blog saya 
Belum bermula lagi
Secara asasnya, icon ini berukuran 16″ x 16″ dan bukan semua pelayar web yang menerima favicon ini. Setahu aku hanya pelayar internet xplorer 5+ ke atas dan juga pelayar Mozilla firefox yang dapat menerima icon kecil molek ini.Favicon ni boleh wujud dalam bentuk statik dan juga animasi seperti favicon blog aku..
1. Apa yang perlu ngko orang tahu, aku tidak menggunakan photoshop untuk membina logo favicon.ico tu.
2. Boleh guna apa-apa nama file dan tak semestinya gunakan nama favicon.ico (dot ico adalah singkatan pada windows icon bukan Ikon Malaysia )
3. jika ngko orang nak nampak lebih profesional, ngko orang bolehlah gunakan apa2 software yang ngko orang ada. Yang penting logo untuk favicon tu mesti ada terlebih dahulu.
Mari Kita Mulakan
Langkah 1
Sediakan logo yang telah anda pilih. Anda tak perlu tukarkan logo atau imej yang anda pilih kepada ukuran 16″x16″ kerana pada langkah kedua nanti, logo atau imej yang anda pilih aku convert secara automatik kepada saiz yang dikehendaki
Langkah 2
Pergi ke laman web ini Favicon From Pictures dan browse logo/imej yang telah anda tetapkan tadi seterusnya klik generate favicon.ico. Jika anda ingikan Favicon Animasi “tick” pada Animate Favicon.
Selepas itu, anda akan dapat lihat previewnya. Tak perlu lihat lama2 preview tu kerana tugasan anda belum berakhir. Apa yang perlu dilakukan adalah memuat turun (download) Favicon tersebut. Klik download Favicon. Anda akan terima fail dalam bentuk .zip dan anda extract all dengan mengklik sebelah kanan.
Langkah 3
Dah sampai langkah ketiga ni, dah kira nak selesai dah ni tugasan anda.Untuk langkah ini, ngko orang uploadkan file yang dah di extract all tu. Untuk yang ada web sendiri ( dot com) boleh upload kata web server sendiri. Untuk yang guna blogger ngko orang uploadlah kat mana2 yang ngko orang selalu upload.Aku rekemen ngko orang upload kat googlepages . Lepas tu ngkorang perlu copy lokasi link untuk langkah seterusnya.
Langkah 4
Ini adalah langkah terakhir iaitu modify blog template dan publish. Mudah jer langkah ni, hatta Pak Mat Tempe pun boleh lakukan.
Letakkan HTML tag pada blog template ngko orang selepas <head> tag, sebelum </head> tag:
Setelas anda kenal pasti lokasi <head></head> itu, sekarang letakkan lokasi link yang telah anda copy pada langkah ketiga tadi. sebagai contoh seperti berikut:
<link href=’favicon.ico’ rel=’shortcut icon’/>
<link href=’http://www.abc.com/animated_favicon1.gif’ rel=’icon’ type=’image/gif’/>
contoh di atas untuk template blogger. Boleh lihat di sini.Yang di bawah ini adalah contoh untuk wordpress :
<link rel=”shortcut icon” href=”favicon.ico” >
<link rel=”icon” href=”animated_favicon1.gif” type=”image/gif” >
(kalau ngko orang guna .jpg, ngko orang tukarlah pada .jpg untuk script ngko orang tu..)
Sekarang, tekan butang save dan republish blog template anda.
Selamat mencuba!!
Afzai Afandi
p.s Membaca perkongsian ilmu pada blog seseorang tanpa sebarang komen adalah menunjukkan anda seorang yang tidak menghargai.
p.s.s Ngko orang boleh menyebar luaskan maklumat ini pada blog ngko orang jika ngko orang inginkan tanpa meminta izin daripada aku. yang penting ngko orang kredit jer laman blog aku di akhir post ngko orang….ada ker yang nak letak post aku ni kat blog memasing
salam..bro..thanks untuk tutorial ni..
oh ya, permintaan bro untuk tutorial ttg adclustr tu dah saya siapkan..boleh ke laman blog saya untuk dapatkannya
Wah, AA kao dah ajar kat sini ye, aku nak copy kau punya artikel ni boleh ke?
Takdok hal “Be”. Sama2 kongsi ilmu.Demo lagi banyok ilmu nok keno kawe menuntut ngan demo.
Jangan lupa kredit ko blog kawe deh!!
Terima kasih Naem…aku pun dah download dah tutorial tu..
Baguih tutorial nie…
p/s : aku dah buat pos pasal tag merdeka tu. entah betul entah tidak. aku wat-wat paham jelah.
oh bro Aa! saya sangat menghargai jasa baik bro berkongsi info nih! dah lama dah saya teringin nak buat letak menatang favicon nih, yeah! tq tq
Fahmi… Aku dah baca.betul dah tu apa yg ngko tulis
Musnaz : semoga berjaya letak menatang favicon ni.. hehe. nanti dah siap kabor kat aku ekk
haa..nk exchange link..boleh jerk..no hal..dah ade kat hall of fame..btw..jgn lupe link back…ehek3..btw.. I’m doing the competition kan.. spread the words http://www.hafreze.com/2007/08/need-domain-name-competition.html
aiseh bro! aku tersangkut kat part nak upload lah, ha ha…. try guna allyoucanupload.com, tak leh pulak…. tolong uploadkan leh? hu hu…. ke upload terus kat ftp software aku tu? hmmm…. upload ke web page…. mender tu ek? tq, hu hu
Kalu ngko ada google, upload jer kat googlepages. Upload kat FTP pun boleh.Lepas tu ambil url yg ngko upload, gantikan selepas href=’ganti di sini’..harap2 dapat membantu
Thanks Hafreze..
Janganlah serik datang ke sini ekk!!
Info yang bagus..
dulu ada terbaca info nie kat blog omputeh..
tapi dah terlupa plak blog mana.. bagus2..
mengingatkan orang pelupa cam aku,..
Terima kasih Zool…makan suppliment yg banyak kandungan DHA, InsyaALLAH ingatan lebih cergas..heheh
salam bro AA,tutorial besh ciap ble cilok post lg..heee..tp bab nk kne donlod icon tue fail la..kne block plak..ades..
awqi_zar : Terima kasih bertandang kat sini
Janganlah serik mai sini yerkk. Apa yang kena block tu? kureng faham sikit 
boleh perjelaskan..kot2 boleh membantu.
begini ceritanya bro AA,
kat tmpat sy,kolej sy..line intenet..ble surf..bkak website mcm besey..tp bler nk donlod naruto..software..mp3..kne block..torrent,mirc apatah lg..hngga ke ari nie..tiada cra yg d’jumpai utk bypass block tue..t’pksa g cc atau gne wifi..tp wifi xbrp ok..jap dpt,jap xdpt..tue la mslah sy..trma ksih kerna sudi dgr..
Alamak…
masih tak jadi le…
hm apa masalah..
er .ico tu nak sama dengan folder blog ker????
tak jadi lah…\
akhirnya dapat gak tutorial mudah utk favicon ni… thans a lot… sy dh mencubanya dan dh dapat menyelesaikan dengan mudah sekali atas bantuan anda… dh lama nk letak mende tp tak tahu…
Awqi_Zar : Loooo gitu citerny. bukan kat kolej jer, kat opis pun lebih kurang gaknya. Dah tugas adminnya.
so kena Pergi CC lah jawabnya.., tapi nak kena keluar duitlah pulak
so kena slow and steady jerlah..
Sama2 profidz. lain kali mungkin profidz pulak boleh bagi ilmu
.
Zool : Loooo,kesiannya tak dapat2.Kita cerita dalam Ym ok ker??
YM: afzaiafandi
Akhirnya berjaya juga aku membuat logo tersebut setelah mencari-cari separuh hari apakah kesilapan yang aku lakukan…
kesalahan yang mudah je..
huhuhuhu..
tq kepada afzai yang memberikan idea nie untuk buat …
Syabas,syabas..Zool !! Usaha tangga kejayaan
Yee haa.. akhirnya setelah bertungkuslumus.. menjadi juga favicon aku.. terima kasih bro Afzai sbb tunjuk ajar ini..
tapi apsal dia xleh animate la.. takpa la.. nanti aku rodek lagi he2..
Naga: Aku rasa masa ngko create favicon kat “html-kit.com/favicon” ngko tak tick animasi kot.
Rodek jangan tak rodek
saya masih tak brapa faham kat langkah 4 tu…..
saya guner wordpress, tapi saya takleh edit blog template….
macam maner tuan edit blog template tu….
boleh ternagkan balik tak????:D
Pertama sekali…selamat datang Mr Aidi.
Lupa nak beritahu…untuk penggunaan wordpress percuma sememangnya tak boleh diedit. Wordpress percuma takder keistimewaan tu berbanding blogger…so tak dapatlah nak tolong!!
baguih tul info yg diberi….TQ..TQ
dlu aku ada la jugak mengada2 nak tukar favicon ni..
but i think simple is better..
xperlu nak tukar apa2 lg
humbleandmodest’s last blog post..transformasi minda – 2008 kepada 2009
hohhoo..aku pun sama gak..mcm menarik je bila tgk..tp pastu..biar la..mcm sama je..tp mngkin akan berubah klu aku betul2 berminat..hehe..aku mls nak sentuh2..nnt lain jdnya
farahaznil’s last blog post..I Got Cash Money RM400 at Muzium Sultan Alam Shah!!
ko memang mcm tu..
blog pon x update…
ade contest baru update…
humbleandmodest’s last blog post..keadaan sekarang akan mempengaruhi keadaan pada masa akan datang
knp xleh letak ek kat blog sy..dia akan keluar “We were unable to save your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute “{1}” associated with an element type “href”.”
sy cuba paste
tp icon tu ganti dgn logo lain..kemudian paste kat bawah tu..salah ke?
DBS’s last blog post..ASSALAMUA’LAIKUM