Home » » Membuat Favicon Pada Address Bar

Membuat Favicon Pada Address Bar

Sebenarnya tentang favicon ini sudah sering dan juga dibahas di forum-forum atau situs penyedia favicon. Namun dari pada lupa, lebih baik saya posting saja disamping sebagai catatan pribadi yang sewaktu-waktu dapat digunakan.

Apakah favicon ?
Coba lihat gambar dibawah ini ...

Favicon adalah icon kecil yang muncul di samping alamat web di bagian atas browser Anda. FavIcon (singkatan dari "favorites icon"), berformat ICO (ikon format) yang muncul dalam browser sebagai 'Tab' atau 'Penanda'. Jika alamat suatu url disimpan (bookmark), icon ini ikut tersimpan dan muncul dalam daftar bookmark (Firefox) atau favorites (IE).

Bagaimana cara membuat favicon ?
Anda dapat membuat sendiri sebuah icon yang unik untuk blog atau website Anda, sehingga dapat menarik pengunjung di situs Anda. Dengan favicon yang unik atau beda, blog atau website anda dapat mudah diingat oleh pengunjung.
Untuk membuatnya, Anda dapat menggunakan foto pribadi, binatang, mobil, bunga, dll yang Anda suka. Untuk ukuran favicon, umunya adalah 16 x 16 pixel.
Ada banyak situs yang menyediakan aplikasi online untuk membuat favicon ini, bahkan banyak juga situs-situs yang menyediakan bermacam-macam favicon yang siap pakai dan bisa di download, baik dalam format ico, png, jpg maupun gif.
Salah satu situs penyedia aplikasi online yang populer misalnya http://www.htmlkit.com/services/favicon/
Setelah berada di situs tersebut, langkah-langkahnya cukup mudah (user friendly).
  • Upload image dari komputer anda, klik Generate Favicon.ico
  • Beberapa detik kemudian, muncul favicon yang anda buat tadi
  • Dibawah image favicon, ada menu edit termasuk edit animasnya jika diinginkan
  • Klik Download only favicon.ico (jika hanya menginginkan format ico)
  • Klik Download only animated_favicon1.gif (jika hanya menginginkan format gif)
  • Atau dua-duanya, klik Download dibawah tulisan "To add this favicon to your site:"
  • Extract file zip tersebut, ada 3 file ( favicon.ico , animated_favicon1.gif, ReadME.txt )
  • Petunjuk instalasinya ada pada file ReadMe.txt (cukup lengkap dan jelas)
Bagaimana cara memasang di Blog anda ?
Pertama anda harus mengupload file favicon.ico dan animated_favicon1.gif pada web hosting yang anda miliki. Biasanya diletakkan/disimpan pada root directory atau jika tidak dapat dipanggil, simpan pada folder public_html server hosting anda.
Contohnya : http://YOUR_WEB/public_html/favicon.ico dan http://YOUR_WEB/public_html/animated_favicon1.gif

Pertanyaannya, bagaimana bila belum punya web hosting sendiri ?
Kalau dapat numpang di web server kawan kita, lumayan ....
Tetapi kalau tidak ada, simpan saja ditempat image hosting yang free, misalnya di http://photobucket.com/ , http://www.ziddu.com/ , http://picasaweb.google.com/home dan masih banyak lagi ... tetapi sayangnya untuk format ico rata-rata tidak support. Artinya kita hanya bisa menyimpan file dengan format selain ico (gif, png, jpg).

Jika sudah di upload, untuk blogspot.com seperti biasa login, tata letak, edit HTML
Kemudian tambahkan kode HTML diantara kode <head> dan </head>
Yang paling mudah, letakkan persis diatas kode </head>

<link rel="shortcut icon" href="http://YOUR_WEB/public_html/favicon.ico">
<link rel="icon" type="image/gif" href="http://YOUR_WEB/public_html/animated_favicon1.gif">

Sedangkan non blogspot.com , cukup :
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/gif" href="animated_favicon1.gif">

Untuk yang disimpan di image hosting gratisan, misalnya di photobucket.com, copy link url dimana image dengan format gif/png,/jpg dan pastekan pada ode dibawah ini :
<link rel="icon" type="image/gif" href="http://YOUR_WEB_IMAGE_HOSTING/public_html/animated_favicon1.gif">

Sekarang lihat perubahan icon address bar anda ...
Selamat bereksperimen !
Jangan lupa berikan komentarmu ........
::.::.::.::.::
Share this article :

+ komentar + 1 komentar

thx for the information... it help me a lot :)

Post a Comment

Terima kasih bila Anda telah memberikan komentar, karena komentar yang Anda berikan akan dapat meningkatkan kualitas posting-posting berikutnya.

 
Support : Pupuk Organik | Jaga Sehat
Copyright © 2011. Ekspresi - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger