27 Cara Membuat Icon Pada Address Bar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Suatu kehormatan untuk menjawab pertanyaan seorang teman blogger ukhty Wardah dari negara tetangga bagaimana cara mengganti icon pada address bar? Sebelumnya pertanyaan yang sama juga diajukan ukhty SuciYellow

Untuk kita yg memiliki blog di blogger/ blogspot icon defaultnya seperti ini kita bisa menggantinya dengan icon favorit kita, berikut caranya:

  • Pertama buatlah sebuah gambar yang akan di jadikan sebagai favicon, contoh icon anaa:
                   
  • Jika image anda berukuran besar anda harus mengubah gambar tersebut kedalam bentuk gambar icon. Untuk hal tersebut, anda bisa menggunakan tool Favicon Generator, silahkan kunjungi situs http://www.favicongenerator.com
  • Klik pada tombol Browse...
  • Masukan gambar yang tadi dibuat 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.
  • Langkah selanjutnya adalah anda harus meng upload Favicon yang tadi ke tempat hosting gamabar, misalnya photobucket, imagesachs dll.
  • Setelah anda sudah mempunyai alamat URL dari favicon anda. sebagai contoh, anaa mempunyai sebuah alamat URL seperti ini :
    http://dl9.glitter-graphics.net/pub/47/47449ih9hcr3tmj.gif
  • Anda harus mengubah alamat URL favicon anda menjadi seperti ini :

<link href='http://dl9.glitter-graphics.net/pub/47/47449ih9hcr3tmj.gif' rel='shortcut icon' type='image/x-icon'/>

  • Langkah selanjutnya adalah silahkan login ke blogger dengan ID anda.
  • Klik pada Tata Letak.
  • Klik Edit HTML.
  • Silahkan cari kode </head> posisinya berada bagian atas
  • Simpan kode favicon yang tadi persis di atas kode </head> . Contoh :

<link href='http://dl9.glitter-graphics.net/pub/47/47449ih9hcr3tmj.gif' rel='shortcut icon' type='image/x-icon'/>

  • Klik tombol Simpan Template.
  • Selesai. Sekarang anda sudah mempunyai favicon di alamat URL blog anda.

Semoga bermanfaat!


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

27 komentar :

  1. kak,aq kn pake photobucket, tpi pas mw dibrowse,,favicon aq gk ke detect,cz photobucket mwna nerima yg extension nya .jpeg .jpg .gif
    sdgkn sya .icon
    jdinya gmn kak?

    BalasHapus
  2. Anaa juga filex gif tu de, coba pake image yg kecil aja cari di glitter graphics atau cari tempat hosting gratis yg lain, khn bnyk tu...

    BalasHapus
  3. thanks sobs... sangat berguna sekali artikelnya

    BalasHapus
  4. kak aQ ada masalah besar nih (bagisaya)
    kk bs bantu gk?
    saat saya edit blog kn tiba2 ada anjuran utk update internet download manager,,saat saya update,,tak berapa lama saya ingin mendownload sswt,,tnyta dia minta serial number n tak mau mendownload,,duuh saya takut n bingung harus diapain, cz ini laptop kk saya,,klo kk bisa bantu,mohon bantuannya yaa
    terima kasih banyak yaaa!

    BalasHapus
  5. mkasih ya..hargai bangat..tapi bisa tau enggak...gmana selepas kita cari kod head..n then udah ketemu,tapi agak bingung..'persis'yang dimaksudkan ukhty itu..apa mksudnya?kurang ngerti lor..ku ini sahabatmu dari negara jiran..malaysia..bisa jelasin?(:

    BalasHapus
  6. @ suci: biasanya klu ada software yg pernah terinstal dan ketika diupdate minta didownload kembali ada perintah masukkan serial number artinya softwarex tdk gratis, yg sblmx prnah ade/kk ade download promosi doang mngkn bbrpa hr gtu...

    BalasHapus
  7. @ wardah:alhamdulillah dah ngerti ya? Persisi diatas artinya tepat diatas kode...

    semoga berhasil ya ukh! 'afwan!

    BalasHapus
  8. kak,aq jg pake glitter graphic,,size nya 10x10 (scale 100x100)
    tpi pas generate favicon,,dya ngesave nya dengan extension favicon.ico
    trs di photobucket nya gak bisa nge browse yg .ico
    jd gmn k?

    BalasHapus
  9. blog aq dah tak pasang juga sob maksih

    BalasHapus
  10. @ suci: kalau gitu yg simple aja cari image yg kecil aja atau pindah hosting lain khn banyak de!
    @ rizky: sama2

    BalasHapus
  11. Hosting itu maksudnya selain photobucket ya?
    mang kL ukuran image aku itu masih besar ya kak?

    BalasHapus
  12. @ suci: iya de coba hosting lain, bnyk kok search digoogle. sebenarx imagex dah cukup sizex tu..
    @ wafyes; terimakasih

    BalasHapus
  13. tapi aku ga tau gimana bikin icon itu sendiri...

    BalasHapus
  14. makasi bro infonya..perlu di coba nih
    lam kenal aja bro

    BalasHapus
  15. hy salam kenal..mo nanya nih...
    klu untuk membuat link kita berjalan di adress bar gmn caranya
    tolong pencerahannya

    BalasHapus
  16. Ehm... ^_^
    Bismillah....
    Kang Ana lagi nyoba bwt icon di bar,Bleh yah pake Icon Akang ,untuk smentara,soalnya ana blum bisa bwt icon sendri.. Akang bisa kunjungi blog ana.Jazakumullah

    BalasHapus
  17. wah.. alhamdulillah.. saya sekarang bisa nih, mengganti iconnya..terima kasih bantuannya ya mbak..

    BalasHapus
  18. Assalamualaikum Warahmatullah Wabarakatuh....
    Satu kesenangan yang terkira dari ane adalah setiap ane edit template ane dengan tutorial dari mbak selalu berhasil. Kayaknya ane cocok deh dengan tutorial yang mbak buat...

    BalasHapus
  19. Hi, met kenal ya Amatullah, nick name nya siapa ya ?
    Udah nyobain tips nya, n berhasil :D

    BalasHapus
  20. Slm knl sob.., numpang nanya nih, klu tgl post ga tmpil pd icnn klnder gmana solusinya?, tlong ksi tau q di Ngeblog Lewat Hp, sblumnya mksih bnyak ya, moga ilmunya slalu nambah n membawa brkah. Amin.

    BalasHapus
  21. salam..ini berhasil...terima kasih

    BalasHapus
  22. Osh.thanks postingannya.membantu.sy izin copas ya..kunjung balik ya

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!