Cara Mengganti Icon Pada Address Bar

kali ini ade akan membahas masalah address bar atau disebut dengan favicon, Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar atau icon pada address bar (kotak untuk mengetikkan alamat web) . jika kita punya blog di Blogspot maka icon default yang akan tampil adalah gambar seperti ini :

lalu dibarengi dengan alamat blogger kita

sudah mengerti..? kalau belum ade perjelas lagi, contoh gambar favicon punya ade :
Bagi kamu yang tidak puas dengan icon/gambar tersebut, kamu bisa menggantinya dengan gambar sesuai dengan keinginanmu. caranya sangat mudah, yaitu dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira2 24x42 pixel sampai 32x32 pixel (sebenarnya ukurannya bebas sih, tapi biar filenya kecil dan proses membukanya cepat).

kalau belum bisa membuat gambarnya ikuti langkah-langkah berikut ini :

1. Pertama buatlah sebuah gambar yang akan di jadikan sebagai favicon, contoh seperti gambar di bawah ini :




2. Setelah itu anda harus mengubah gambar tersebut kedalam bentuk gambar icon. Untuk hal tersebut, anda bisa menggunakan tool Favicon Generator, silahkan kunjungi situs



3. Klik pada tombol Browse...

4. Masukan gambar yang tadi dibuat untuk di ubah menjadi format icon

5. Klik pada tombol Generate Favicon.

6. Setelah proses selesai, klik pada Click Here to Download your favicon.

7. Save ke komputer anda.

Setelah itu .....
masuk ke "Tata Letak --> Edit HTML" trus tempatkan script berikut sebelum kode

</head>

<link href='http://img98.imageshack.us/img98/9617/image3cr0.gif' rel='SHORTCUT ICON'/>

atau bisa juga seperti kode dibawah ini :

<link rel="shortcut icon" href="http://img98.imageshack.us/img98/9617/image3cr0.gif"/>


Ganti huruf yang berwarna merah dengan lokasi gambar dimana kamu menyimpan gambar tersebut yang kita upload di
tempat hosting gambar.
contohnya kamu mengupload gambar kamu di photobucket dan juga di imageshack sebagai contoh kamu meng-upload di Album Picasa caranya seperti di bawah ini :
  1. Login ke picasa dengan account google di http://picasaweb.google.com
  2. Tekan tombol I accept.
  3. Jika anda memiliki software picasa yang sudah terinstall pada PC, anda dapat meng-uploadnya dengan mudah. Tekan tombol launch picasa dan software pun akan berjalan. Namun pada kesempatan kali ini, kita gunakan cara tradisional yaitu meng-upload gambar melalui browser.
  4. Setelah anda menekan tombol I accept, silahkan dilanjutkan dengan klik tombol upload.
  5. Isikan form title, date, dan seterusnya. jika selesai tekan tombol continue.
  6. Tekan tombol browse dan arahkan pada file yang akan anda upload
  7. Tekan tombol start upload untuk menguploadnya ke dalam server picasa
  8. Setelah selesai, anda akan menjumpai tampilan thumbnail gambar tersebut. Klik gambar tersebut untuk melihatnya secara full
  9. Klik kanan gambar tersebut dan pilih properties.
  10. Anda akan mendapatkan URL gambar yang kurang lebih seperti ini http://lh6.ggpht. com/_4r8ISY........................oTZz4tK4/gambar-header.gif (hanya contoh alamat gambar).
  11. Kembali lah pada situs blogger.com dan masuklah pada tab layout * Edit HTML
  12. Link gambar yang bertuliskan http://img98.imageshack.us/img98/9617/image3cr0.gif anda ganti dengan link yang baru yaitu http://lh6.ggpht. com/_4r8ISY........................oTZz4tK4/gambar-header.gif (contoh alamat gambar).
  13. Lakukan hal yang sama untuk gambar2 yang lain


atau kalau kamu tidak mau pusing dibawah ini ada beberapa contoh icon/gambar beserta dengan linknya.

http://img87.imageshack.us/img87/5862/image1an1.gif
http://img110.imageshack.us/img110/6218/image2ie0.gif
http://img98.imageshack.us/img98/9617/image3cr0.gif
http://img134.imageshack.us/img134/633/image4hx4.gif
http://img412.imageshack.us/img412/3808/image11pc0.gif
http://img100.imageshack.us/img100/4658/image12du2.gif
http://img132.imageshack.us/img132/4733/image13lj1.gif
http://img145.imageshack.us/img145/7793/image14zg9.gif
http://img412.imageshack.us/img412/4403/image15jc7.gif
http://img264.imageshack.us/img264/7575/image16kn8.gif

http://img139.imageshack.us/img139/83/image5oa7.gif
http://img509.imageshack.us/img509/6449/image6fu0.gif
http://img507.imageshack.us/img507/5774/image8wn8.gif
http://img150.imageshack.us/img150/5784/image9qo1.gif


"Semoga Berhasil"



Note : Images by Mr. Kendhin

Subscribe to receive free email updates:

30 Responses to "Cara Mengganti Icon Pada Address Bar"

  1. saran yang sangat bermanfaat sob,menuju TKP ah...

    BalasHapus
  2. koq munculnya pas loading aja ya ??
    pas uwdah selese login, balik lagi ke icon blogger ..
    kasii sarannya dundd .
    makasii .
    :)

    BalasHapus
  3. thanks for advice . nice posting =)

    BalasHapus
  4. makasih bRo...
    karyamu ada di blogQ...

    BalasHapus
  5. masih 9 bisa boz...
    gimana...?

    BalasHapus
  6. kenapa ya kok punya saya gak bisa

    BalasHapus
  7. whuaaaa....udah belasan kali gue dah coba tapi selalu ga bisa-napa gan ? kasih tau dong masalahnya padahal sudah gue pastiin neh g ada yang beda caranya, email ke aku ya husein_unsri@yahoo.com. thanks gan infonya.

    BalasHapus
  8. kog g bisa mas? mhon bantuan ny....blog ny ashif-tes.blogspot.com, email purnama122@yahoo.co.id

    BalasHapus
  9. kok waktu aku simpan ada bacaan"Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The value of attribute "href" associated with an element type "null" must not contain the '<' character.
    " itu maksudnya gmn y

    BalasHapus
  10. kok waktu aku simpan g bisa terus ada bacaan "Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The value of attribute "href" associated with an element type "null" must not contain the '<' character.
    " tolong kasih tau y cara nya ke email abdul_rohman01@ymail.com

    BalasHapus
  11. mmpir ya: http://tutorialtriktips.blogspot.com/

    BalasHapus
  12. udah saya coba, tapi kok nggak ada perubahannya ya ?

    BalasHapus
  13. wah,terima kasih..postingan ini sangat membantu,,dan akan kuterapkan di blog baruku http://jamaluddindjavu.blogspot.com/

    BalasHapus
  14. kunjungi blogku ya...

    http://www.kuririnsoul.co.cc/

    BalasHapus
  15. Thank's Zobat atas infonya....

    nice post

    BalasHapus
  16. wah gan ,,, ane udah memcoba kok gak bisa ya ,,, tolong dibantu gan

    BalasHapus
  17. makasih banyak gan....
    kunjung balik ya, salam blogwalking :)

    BalasHapus
  18. mudah dimengerti artikelnya... mantab sob, thanks

    BalasHapus
  19. terima kasih bang, sangat bermanfaat sekali informasinya..

    BalasHapus

Berkomentarlah dengan Baik dan Sopan..