Cara Menampilkan Ikon Blog di Browser

Cara Menampilkan Ikon Blog di Browser

Ikon blog yg terkenal dengan sebutan Favicon (favourite icon) adalah icon kecil yang berada di samping alamat blog atau website anda.Banyak situs terkenal seperti Amazon.com , google mail , Kumpul blogger dll yang mengunakan Favicon sebagai identitas yang menurut saya "Keren" dan 'berbeda' dgn yg lainnya. Apabila anda membuat blog di Blogger.com alias blogspot, maka secara default favicon yang berada di samping alamat URL anda adalah berupa icon blogger. Lihat gambar contoh dibawah :

Untuk mengganti favicon tersebut, anda bisa melakukan langkah-langkah seperti berikut :

1. Pertama pilihlah sebuah gambar atau image atau photo yg tersimpan di file hardisk komputer anda yang akan di jadikan sebagai favicon. Untuk hal ini anda perlu mengedit image tsb menjadi gambar berukuran 32x32 pixel . simpan dengan format gif, jpg, png, dan bmp (pilih salah satu) contoh seperti gambar ikon blog panduan bisnis internet di bawah ini :Note : Untuk cara meng edit gambar silahkan lihat di "Cara Edit Gambar"

Namun Jika anda tidak mau repot mengedit gambar, anda bisa menggunakan jasa pembuat favicon gratis. Silahkan pergi ke salah satu situs dibawah ini:

http://www.favicongenerator.com
http://tools.dynamicdrive.com/favicon/
http://www.Html-kit.com
http://www.tinypic.com

Di salah satu situs tersebut : cari dan Klik tombol Browse...
Masukan gambar yang tadi anda pilih untuk di ubah menjadi format icon
Klik pada tombol Generate Favicon.
Setelah proses selesai, klik pada "Click Here to Download your favicon".
Save ke komputer anda.

2. Langkah selanjutnya adalah anda harus meng upload Favicon yang tadi , ke tempat hosting gambar,atau ke Hosting anda sendiri jika anda menggunakan blog -hosting berbayar. Untuk layanan upload image ke hosting gratis silahkan pilih salah satu dibawah ini :

http://www.photobucket.com atau
http://www.pages.google.com atau
http:// www.geocities.com .

Dalam hal ini misalnya saya mengupload image pilihan saya ke Photobucket.com
Nanti di Photobucket.com saya akan diberikan sebuah URL untuk image yang saya upload. Ambil URL nya yang ber ekstensi seperti ini : http://www.....

Update 27 maret 2010:
Karena ada pertanyaan bagaimana mengupload dan mencari URL image dari photobucket, maka akan saya rinci langkah nya sbb :
1, Daftar dulu ke photobucket.com , gratissss
2. Login
3. Temukan form utk mengupload gambar :

4. Akan muncul jendela untuk mencari dan memilih image yang akan di upload

5. Setelah proses upload image selesai, akan muncul halaman utk pemberian nama,deskripsi dan tags dari image. Jika sudah diberi nama lalu klik tombol "Share"

6. Setelah itu akan dibawa kehalaman yag menampilkan link image yag barus saja kita upload. Pilih "Direct link" untuk keperluan menampilkan ikon blog ini.



Contoh : untuk image ikon panduan bisnis Internet itu link URL dari Photobucket nya seperti ini : http://i420.photobucket.com/albums/pp281/goldenphoto_2009/Iconulum.jpg

(Untuk ngetest : silahkan anda copy paste deh Link URL tsb,dan buka di tab browser baru, Pasti ikon sy itu akan tampil di ikon browser dan di ikon tab )

3. Kemudian.... selanjutnya silahkan login ke blogger anda.
4. Klik pada Tata Letak (Layout)
5. Klik Edit HTML. - centang kotak"Expand Widget Template"
6. Silahkan cari kode </head>
Agar cepat ketemu Tekan : CTRL + F pada keyboard lalu tulis </head>

7. Jika sudah ketemu masukkan script ini :
<link rel="shotcut icon" href="http://i420.photobucket.com/albums/pp281/goldenphoto_2009/Iconulum.jpg" />

Note : Ganti URL http://i420.photobucket.com/albums/pp281/goldenphoto_2009/Iconulum.jpg dengan URL milik anda yg didapat dari Photobucket tadi.

8. Simpan script tsb persis di atas kode </head>. Contoh :

<link rel="shotcut icon" href="http://i420.photobucket.com/albums/pp281/goldenphoto_2009/Iconulum.jpg" />
</head>

9. Lalu klik tombol "Save" atau "Simpan" Template.
10.Selesai. Sekarang anda sudah mempunyai favicon di alamat URL blog anda.

Triks di atas adalah untuk blog di Blogspot, sedangkan untuk Wordpress, yang oleh wordpress favicon ini sering juga disebut Blavatar atau favicon avatar (gambar kecil) .

Berikut adalah cara menampilkan ikon blog di wordpress:
Untuk mendapatkan blavatar untuk blog wordpress Anda, cukup masuk ke dalam Pengaturan(Setting) dashboard dan lalu upload lah foto anda sebagai image. Setelah Anda meng-upload, Anda dapat Mengedit atau "Crop" (dipotong sesuai ukuran yang Anda inginkan).Kemudian Simpan dan Favicon atau Blavatar Anda pun telah siap tampil.

Note : Berbeda jika anda menggunakan browser firefox, opera dan yang lainnya, yang favicon anda sudah langsung dapat di nikmati.Bagi anda yang masih menggunakan browser IE6, favicon anda tidak akan langsung terlihat, coba di bookmark dulu alamatnya.

Selamat mencoba...dan semoga bermanfaat untuk yang belum mengetahuinya.

Artikel lain :


13 comments:

  1. thanks mas..
    bagus banget infonya..
    akhirnya saya bisa juga ganti gambar sedikit membosankan ntu..hahaha
    trims y..

    ReplyDelete
  2. Mantap mas akhirnya sy juga bisa ganti ikon blog saya.Trims

    ReplyDelete
  3. mas setelah saya coba kok ada tulisan seperti ini ya??
    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: The element type "link" must be terminated by the matching end-tag "".
    saya sdh coba percis seperti yg mas instuksikan.
    mohon bantuannya mas.
    tx.

    ReplyDelete
  4. Juniorblogger :
    Coba tambah kan tanda garis miring di akhir nya
    contohnya :
    <link rel="shotcut icon" href="http://i420.photobucket.com/albums/pp281/goldenphoto_2009/Iconulum.jpg" />

    ReplyDelete
  5. Tambahan buat Junior blogger :
    Coba juga dgn dibalik seperti ini :
    <link href='http://i420.photobucket.com/albums/pp281/goldenphoto_2009/favicon2.jpg ' rel='shortcut icon'/>

    ReplyDelete
  6. MAKASIH BOS....ATAS PENCERAHANYA...
    SEMOGA ILMU YANG ANDA BERIKAN BERMANFAAT,DAN ANDA DAPAT IMBALAN DARI YANG MAHA KUASA...SEHAT ,SUKSES SELALU ..SALAM BLOGGER...
    DARI YOTO RENGAT BARAT -INHU -RIAU

    ReplyDelete
  7. Makasih bro atas tutorial nya,blog saya udah tak ganti ikon nya.

    ReplyDelete
  8. koc saya ga bsa2 ganti icon ya?????
    pas masuk ke photobucket bingung...

    ReplyDelete
  9. berbayar ya bos join di photobucket??????

    ReplyDelete
  10. Ini mas yang saya cari-cari, makasih telah berbagi ilmunya.

    ReplyDelete
  11. saya lagi nyoba nieh, tapi pas log in ke blogspot saya ga ada tampilan layout / tata letak yg dimaksud? bagaimana yah..?
    Maaf, maklum saya baru belajar bikin blog.

    Terima kasih.

    ReplyDelete

Saya berterimakasih atas koment anda yang Sopan dan Ramah...
Sebelum kasih komentar,sebaiknya lihat Contoh komentar spam disini , Agar komentar anda tdk tertangkap oleh spam filter blogger.