Favicons Untuk Website Anda

Dulu pernah juga kawan-kawan suruh saya buat favicon untuk website Internet Melayu tetapi saya agak sibuk masa tu dan lupa pula hal tu. Hari ni, saya sempat juga ambil logo grafik dari header website Internet Melayu, edit dengan photoshop dan menukarkannya menjadi .ico file untuk menjadikannya favicon website dan blog ini.

Apakah favicon dan kegunaannya?
Favicon adalah sebuah logo atau grafik kecil pada kotak URL pada browser anda. Ia juga dikenali sebagai website icon, page icon atau urlicon.
Favicon biasanya digunakan dalam URL bar, fungsi bookmark dan juga pada tab (seperti pada tab-tab di browser Mozilla Firefox dan IE7). Ia memberi identiti tersendiri kepada sesebuah website dan kelihatan agak ‘cool’.

Jika anda lihat pada URL bar anda sekarang, mungkin anda akan lihat grafik (favicon) ini:

Grafik tersebut adalah favicon pada InternetMelayu.com

Pada website Internet Melayu di sini: www.internetmelayu.com, saya telah meletakkan favicon jenis bergerak (animated favicon). Blog Internet Melayu (http://www.internetmelayu.com/blog) pula mempunyai favicon jenis static (non-animated favicon).

Bagaimana membina favicon?
1.) Pilih gambar atau grafik yang ingin anda jadikan sesebuah favicon. Ia boleh dalam bentuk .jpg, .png, .gif.

2.) Untuk favicon internetmelayu.com, saya telah adjust file .jpg kepada 150 pixel X 150 pixel. Anda boleh adjustkan saiz kepada apa saja anda mahu tetapi biarlah grafik simple dan file tak perlu terlalu besar. Save kan fail yang sudah diedit ke desktop anda (bagi mudah ingat tempat ia di save).

3.) Bagi menukarkan file tersebut dari .jpg kepada .ico, saya telah gunakan khidmat percuma dari website ini:
http://www.html-kit.com/favicon

4.) Sila browse file grafik anda yang anda dah save kepada desktop anda.

5.) Anda boleh memilih untuk meletakkan scrolling text ataupun tick kotak animated favicon. Saya telah memilih untuk tick kotak animated favicon sahaja tapi anda boleh juga typekan scrolling text jika suka.

6.) Tekan butang: Generate Favicon.ico dan file .ico anda akan dibina. Preview favicon anda akan diberi secara automatik.
Anda juga boleh preview hasil anda di URL bar browser dengan menekan butang Test in Browser.

7.) Tekan butang Download Favicon. File favicon berbentuk .zip akan secara automatik download ke desktop anda.

8.) Pastikan anda unzip file favicon_XXXXXX_YYYY.zip. Anda boleh mendownload winzip secara percuma di sini: www.winzip.com
(Perhatian, XXXX biasanya memberi tarikh favicon dibina dan YYYY adalah kod unik favicon anda. Maklumat ni tak penting kecuali untuk anda mengenalpasti file-file favicon jika anda membina favicon-favicon untuk lebih dari satu website).

9.) Setelah anda unzip file tersebut, anda akan lihat folder favicon_XXXXXX_YYYY pada desktop anda. Sila klik folder tersebut dan anda akan nampak file favicon.ico dan folder extra.
Dalam folder extra terdapat pula file animated_favicon.gif, preview_16×16.png dan readme.txt.
Readme.txt mengandungi arahan lanjut cara memasang favicon ke website anda dalam bahasa Inggeris.

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:

12.) Jika anda inginkan animated favicon, sila tambahkan kod ini:

13.) Upload kod baru pada header website anda.

14.) Sila buka browser anda untuk melihat favicon terbaru pada website anda. Tekan F5 untuk refresh browser jika ia tidak kelihatan.

Enjoy!

ps – saya tengah bercuti sekarang ni jadi ini adalah posting secara automatik.

Popularity: 20% [?]

Filed Under: Uncategorized • Web Design