Pages

Membuat dan Mengganti Favicon Blogger

Sudah tahu yang namanya favicon? Kalau belum, favicon adalah ikon kecil yang muncul di pojok kiri address bar dan pojok kiri tab. Secara default favicon blog berbasis Blogger/Blogspot adalah simbol B dengan background jingga. Tentunya anda ingin punya favicon sendiri untuk branding blog anda kan? Bagaimana cara membuat favicon yang gampang, lalu menampilkannya di blog? Ikuti langkah-langkahnya.

Pertama anda harus punya gambaran untuk favicon. Bagi Anda yang menguasai software grafis, Anda boleh membuat sebuah logo dengan Adobe Photoshop, Illustrator, CorelDraw, atau software grafis apapun yang Anda kuasai. Lalu ekspor ke gif, png atau jpg. Jika Anda tidak menguasai software grafis, anda bisa gunakan icon gratis dengan googling atau bahkan foto yang ada di harddisk anda.

Lalu upload file tersebut ke website FavIcon from Pics dengan menekan Browse. Contreng pilihan "Animate Favicon" jika anda menginginkan favicon animasi. Lalu klik "Generate Favicon.ico".


Selanjutnya download favicon yang dihasilkan dengan mengklik tombol "Download Favicon".


Extract file zip yang dihasilkan. Lalu upload favicon.ico dan animated_favicon1.gif (favicon animasi) ke file hosting gratis seperti Google Pages, Photobucket.

Sekarang, login ke Blogger. Pilih Layout -> Edit HTML.

Copy kode di bawah ini:

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

Lalu paste persis di bawah baris kode berikut:

<b:include data="blog" name="all-head-content"/>


Sekarang ubah alamat URL favicon dengan URL tempat anda menyimpan file favicon di file hosting. Lihat gambar di atas, klik untuk melihat lebih besar. Perhatikan, bagian yang dihighlight adalah contoh URL yang telah diubah. Ubah juga alamat URL favicon animasi (animated_favicon1.gif) jika anda memang menginginkannya. Periksa lagi apakah alamat URL sudah benar.

Simpan Template. Lihat hasilnya. Jika favicon belum muncul, refresh browser.

Selamat mencoba!



Update: Berhubung blogger mengalami perkembangan, sekarang mengganti favicon lebih mudah. Baca: Cara Gampang Mengganti Favicon Blogspot

186 komentar:

  1. Thank ya...
    dari semua artikel yang saya baca hanya pnya anda doang yang berhasil merubah favicon saya..
    hampir putus asa tadinya..
    eh pas mencoba trik anda beru bisa..
    hehehe
    Mmmm
    mw nanya..
    gmana c bkin search enggine kaya anda?? ada pilihannya gitu,,
    makasih..
    klo bisa kirim ke email saya aja yah..

    BalasHapus
  2. senang bisa membantu. tentang search engine, lain kali akan saya tulis di blog ini.

    BalasHapus
  3. terimakasih untuk informasinya

    BalasHapus
  4. hemmm very mice post, it helps to make my blog more attractive

    BalasHapus
  5. sip, berhasil mas..
    oh iya, koreksi bolehkan?
    harusnya :
    data='blog' bukan data="blog"
    saya sempet bingun nyarinya, tapi pas liat gambar besarnya, baru saya ngeh..

    http://tryfatur.blogspot.com

    BalasHapus
  6. nanti di favicon saia diganti sm gambar narsis saia :p

    BalasHapus
  7. thanks infonya, aku akan coba nih untuk buat favicon di blogspot2 aku. thanks ya mas tutornya

    BalasHapus
  8. thanks tutornya om. aku bisa ganti favicon di wp karena ada pluginnya. tapi untuk di blogspot masih ga mudeng

    BalasHapus
  9. ndak bisa om, udah kuganti
    tapi ndak bisa

    nyuschannel.blogspot.com(17-9-9)

    BalasHapus
  10. Salam kenal,..
    Terimakasih mas, artikelnya sangat membantu.

    BalasHapus
  11. terima kasih buat masukannya.. cip dah...

    BalasHapus
  12. oh.. begitu ya ternyata. Siplah dicoba dulu ah. Makasih ya ^_^

    BalasHapus
  13. MAKASIH yaa ka...
    berhasil nihh di blog piet ^_^
    'ala kulli syukron ^_*

    klo ada wktu maen yaa ka ke blog piet
    di tgu,, ntar piet suguhin teh bear sama cemilan senyum manis :)

    BalasHapus
  14. Mantab boss..
    hanya tuttor anda yg berhasil diterapkan !!!

    BalasHapus
  15. terima kasih petunjuknya.. udah di coba dan langsung bisa.. :)

    BalasHapus
  16. oke bro, thanks nih buat postingannya yang mendidik ini, aku emang agak bodo kalau disuruh cara ganti favicon di blogger

    BalasHapus
  17. rossikmuhammad.blogspot.com18 Januari, 2010 15:51

    kesuen...
    gak dapet2 ...
    kerja riil aja dah...

    BalasHapus
  18. thx ya..
    akhir nya artikel yang saya cari ketemu juga disini..

    BalasHapus
  19. thx infonya mas. berhasi nih

    BalasHapus
  20. mantap sob...

    trimakasih.....

    BalasHapus
  21. bolehkah saya posting artikel ini di blog saya.. ntar saya kasih link di bawahnya bahwa ini adalah asli tulisan indoblogger.. oke

    BalasHapus
  22. thanks untuk tutorialnya, membantu banget :D

    BalasHapus
  23. eh... saya juga coba bikin,, n nemu cara laen.. coba liat di sini

    tapi maaf, bahasa inggris,, pie gampang kok, kan sy nulis ndiri. hehe

    BalasHapus
  24. Klo mau buat favicon yang panjang kaya di situs mozilla gmn ya ?

    BalasHapus
  25. makasih mas atas postingannya....
    tapi klo gambarnya jpg, berarti tpe'n dirubah ye...
    menjadi type='image/jpg' ya mas..???

    BalasHapus
  26. @Noerone: gunakan type='image/jpeg'

    BalasHapus
  27. makasih ya mas atas bantuannya tentang favicon akhir'y bisa juga...
    kapan2 mampir di blog saya ya

    http://ici-ciayumajakuning.blogspot.com/

    BalasHapus
  28. Kak remo eh!, ketemu lagi nih coba ada yang lain gak tutornya nih gw dah banyak software di kakak semuanya hampir komplit dengan cit, software, dll thx kak!

    BalasHapus
  29. mantab ilmunya, makasih banyak ya mas...

    BalasHapus
  30. Np aku gk berhasil yh?
    pliss email qw atau koment dblogqw dewa inside blog

    BalasHapus
  31. makasih bermanfaat banget buat newbie kayak aku...heeeee

    BalasHapus
  32. Makasih banget tutorialnya. Blog ku bisa jadi lebih keren nih..

    BalasHapus
  33. Terimakasih, saya dapat ilmu berharga malam ini dari posting anda,

    BalasHapus
  34. thanks om, dah gw pasang favicon blog gw hehe :D dari tutorial om dapat caranya :)

    BalasHapus
  35. wah makasih nih blog nih bermanfaat artikelnya semua

    BalasHapus
  36. wah terimakasih banget sob...

    BalasHapus
  37. Langsung Praktek gan... hehehe... Bagus juga ni punyaku Http://www.katabudi.blogspot.com/

    BalasHapus
  38. Syukron Katsiir bro..
    this very helpful...

    BalasHapus
  39. pernah coba dengan menggunakan pihak ketiga (di luar penyimpana blogger)...namun kadang2 tdk connect ke server aslinya (lambat)..sehingga ganti dengan menyimpan pada media penyimpanan dropbox dengan copy link public...and its works too2...

    BalasHapus
  40. Berguna banget tipsnya, trims.

    BalasHapus
  41. Thanks Bro buat info n trick nya...sudah terbukti berguna..

    BalasHapus
  42. bagus bngetz tutorialx...,mkasih

    BalasHapus
  43. Makasih om,.. sekarang lagi tak ganti favicon bloggerku :) makasih atas tutornya :)

    BalasHapus
  44. Bagus banget nih tutorianya, trimakasih atas tutorialnya

    BalasHapus
  45. Walaupun file type .icon nya tidak terbaca ketika mau diupload di photobucket.com tapi file type .gif nya bisa. Dan ternyata berhasil ketika saya coba!
    Terima kasih. Visit our blog http://jejak-duri.blogspot.com/

    BalasHapus
  46. wah.. bener nih
    work
    udah nyari di om google gk ada yg work....
    ehh yang ini work keren banget...


    sekalian numpang eksis gan...
    http://yahyablogs.co.cc
    computer, software , games and much more

    BalasHapus
  47. wah, nih blog..setelah hampir putus asa mencoba..akhirnya berhasil juga. saya mau kasih saran, klo bisa dijelasin juga link mana yg di copy di situs photobucket.com itu.

    situs yang mantap. terimakasih ya

    BalasHapus
  48. thanks GAN.... Sukses buat Anda....

    BalasHapus
  49. bener bener ampuh ini tipsnya om. ane udah coba tips yang lain berhasil si berhasil, tapi di beberapa browser tertentu kayak firefox. tapi di google chrome icon nya tidak terbaca. tapi kalo tips dari om ini udah ane coba di semua browser dan hasilnya sukses
    mantaps banget dah.

    BalasHapus
  50. Akhirnya ketemu juga caranya..
    makasih ya, artikel ini sangat membantu.
    kalau ada waktu jenguk blog saya ya.
    :)

    BalasHapus
  51. thx bgt tipss.a ,
    akhirny favicon saia jdi juga :)

    BalasHapus
  52. Tolong faicon.ico nya gak mau di upload
    kalau bisa beri saya websitenya untuk ganti faicon

    BalasHapus
  53. terima kasih atas tutorial nya, akhirnya blogku tidak kelihatan lagi icon Blogger nya :-)

    BalasHapus
  54. ThanX info_y...
    dah ane coba & Brhasil..!!

    BalasHapus
  55. termakasih atas artikelnya...

    http://ptcku-online.blogspot.com/

    BalasHapus
  56. Siiip ga, makasih makasih ... membantu banget ..
    Ijin Kopast ye ...

    BalasHapus
  57. ini baru betul!!
    1000000%%% berhasil nih gan!
    thanks!!
    http://www.allbut-naruto.co.cc/

    BalasHapus
  58. Dari sekian search engine Goegle cara mengganti Favicon hanya di Blog INDOBLOGER yang Friendly dan berhasil diterapkan pada blog Simpaku Bos, Trims atas Info dan tipnya.

    BalasHapus
  59. wah dah lama saya nyari artikel ini nyobain malah jadi acak acakan.untung ketemu artikelnya mas mudah dipahami, gampang di praktekan dan sukses di jalankan.makasih ya mas.love U full

    BalasHapus
  60. Thanks bgt ya atas informasinya...^.^ indobloger TOP dech
    Pengen bagi2 info yg belom berhasil mengganti faviconnya...gara2 susah cari URL-nya...sprt saya alami.
    Cara upload gambar favicon juga bisa di blog sendiri kok, caranya:
    1. Meluncur ke Dasbor
    2. klik posting
    3. ketik judul posting (apapun dech..)
    4. langsung aja upload deh faviconnya
    5. klik "simpan sekarang" biar jadi draf (ingat! jangan klik "terbitkan entri" loh ya...)
    6. klik edit entri, terus klik edit pada posting tersebut... cari deh.. pasti URL faviconnya ada di situ...

    semoga bermanfaat...^.^

    BalasHapus
  61. yess,saya sudah mempratekannya dan berhasil pak boss,makacih ya

    BalasHapus
  62. terima kasih mas atas sharing ilmunya akan saya coba di blog saya.

    BalasHapus
  63. Saya mengalami kesulitan mencari Hosting yg mau terima file *.ico
    Yang pernah saya coba:
    Flikr
    Imageshack
    Photobucket
    Picasa
    Ziddu

    => Semua tidak menerima :(
    Mohon bantuannya.

    BalasHapus
  64. sip,,, berhasil Sob
    ada koreksi dikit nih,
    kayanya ga perlu upload file ke website "FavIcon from Pics"
    langsung upload ke photobucket aja juga bisa.
    makasih...

    BalasHapus
  65. wah makasih nih gan. dari sekian blog yang saya kunjungi akhirnya ketemu disini. makasih and salam kenal.

    BalasHapus
  66. Terimkasih banyak,,, aku gak ingat cara ini, jadi setiap ganti favicon mesti Googling dulu :)


    Salam Kenal

    BalasHapus
  67. tapi blogger template yang baru sudah bisa ganti ikon dengan mudah lo...

    BalasHapus
  68. Langsung dipraktekan di blog saya yang baru ganti domain http://mengatasiejakulasi-dini.com .. Thanks

    BalasHapus
  69. terimakasih atas info nya, saya sudah bisa. mampir juga ya kang ke blog saya Tips-Ol

    BalasHapus
  70. Arigato Gozaimasu
    sebelumnya agak gak ngerti (banget malah)
    tapi tulisan anda sangat-sangat-sangat membantu saya
    keep writing!

    BalasHapus
  71. thanks infonya bro.. semoga semakin bermanfaat buat seluruh blogger :)

    BalasHapus
  72. Thanks teman utyk tambahan ilmunya

    BalasHapus
  73. kalau tidak bisa dengan pihak ketiga seperti yang anda sebutkan di atas coba dengan dropbox (di tempat saya http://warung-komunikasi.blogspot.com ....succeed..:) )

    BalasHapus
  74. bagus gan artikelnya, sangat bermanfaat, krn favicon sangat penting... trims

    BalasHapus
  75. banyak cara namun cara ini yang mantab dan saya praktekan. to be number one. trims

    BalasHapus
  76. terima kasih atas tutorialnya, gan.

    BalasHapus
  77. waduuh..jadi sangsi mau bikin,blog gua dah kebanyakan di tanam skrip.

    BalasHapus
  78. Sy kok ndak ada perubahan ya.. Apa yg salah??? pdhal sdh sy lakukan petunjuk dari ente..

    BalasHapus
  79. thank om,,mau nanya gimna caranya bikin form tukar link.?

    BalasHapus
  80. thank's atas pencerahannya.....GOOD
    Boleh saya posting tulisan ini ke blog saya ???

    BalasHapus
  81. turut berterima kasih buat masukannya sudah saya coba dan berhasil meski tidak melalui proses ke faviconnya...suwun

    BalasHapus
  82. Terima Kasih udah bikin postingan seperti ini, sangat membantu...

    jangan lupa kunjungi juga blog saya http://omsopwer.blogspot.com

    BalasHapus
  83. Makasih tipsnya kawan,saya coba praktekan ya.Happy wekend and happy blogging ajah.

    BalasHapus
  84. Mantap Gan...
    thanks ilmunya...
    Kalau mau Download GAme mampir ke blog Ane y..!

    BalasHapus
  85. makasih mas untuk informasinya dalam
    "Membuat dan Mengganti Favicon Blogger" untuk Butik Busana Muslimah saya.

    BalasHapus
  86. mas kok yang .ico nya di photobucket gak bisa di upload ya....

    vengeance29.blogspot.com

    BalasHapus
  87. makasih mamen...
    berhasil nih ...
    horeeee..
    q dah putus asa padahalll
    hehheheh

    BalasHapus
  88. masih belum bisa om..
    mohon pencerahanya..

    http://gemblunk-dizzyney.blogspot.com/

    BalasHapus
  89. yaps, bekerja dengan baik dan benar, makasih Gan. heran deh artikel sejenis laen kek gak niat bagi2 ilmu.. tapi bisa aja saya yang kurang paham. mantaplah. thx again.

    BalasHapus
  90. cara upload favicon.ico dan animated_favicon1.gif di photobucket.com gmn sih ? bingung @@

    BalasHapus
  91. wah mantap gan ini nih yang gua cari

    BalasHapus
  92. Saya coba dulu. Mudah-mudahan favicon blog saya sesuai harapan...

    BalasHapus
  93. wah.. keren nih infonya sob.. sekian lama saya cari baru kali ini dapat yang bagus.. makasih telah berbagi yah..

    BalasHapus
  94. Thank Sob Informasinya Semoga Makin Maju

    BalasHapus
  95. thnk gan infonya sekarang blog saya bisa diganti faviconnya kunjungi blog saya juga ya

    http://cangkringanjowo.blogspot.com

    BalasHapus
  96. thanks info nya.

    jangan lupa kunjungi blog aku juga ya.

    coretandiko.co.cc

    BalasHapus
  97. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  98. Mantaff, gan! sekali ikutin tipnya langsung blog saya punya favicon :)
    Makasih banyak infonya.

    BalasHapus
  99. ahhh pusing ane om,, maklum masih newbie but ane rasa SS nya kurang tuh om buat newbie seperti ane.. tapi klo si om berkenan bantu ane di blog ane yg pengen bgt ganti favicon yg bisa bergerak :D di tunggu kedatangannya om ke blog ane yg masih sepi banget :D

    BalasHapus
  100. SS nya kurang gan,, ane lom ngerti hehhehe

    maklum newbie :D

    http://de777.blogspot.com/

    BalasHapus
  101. matur nuwun tips dan share nya gan....

    BalasHapus
  102. terima kasih ats infonya.biar sudah sering tapi tetep harus copas copas juga pas ngedit.

    BalasHapus
  103. mantabh gan dah bisa ganti favicon
    Kunjung balik yagh http://muhaarya.blogspot.com

    BalasHapus
  104. baru tau sekarang apa itu favicon. trims sharenya.
    Bookmark dl siapa tau nanti perlu

    BalasHapus
  105. thanks gan,aku coba triknya

    kapan2 mampir ya ke blog ku

    BalasHapus
  106. Thanks ya gan ats bantuannya.. ^_^
    ayo tambah lagi info2 menarik lainnya..

    BalasHapus
  107. akhirnya dapat tutorial tentang ini..
    makasi kak atas share nya..
    keep blogging, jangan pantang menyerah

    BalasHapus
  108. Wah. Tutorial buat favicon yang disini unik banget iyah. :D

    Terima kasih banyak atas sharingnya iyah. :)

    BalasHapus
  109. Makasih gan, blog saya akhirnya bisa di ganti juga faviconnya,,

    BalasHapus
  110. Saya masih baru dlm blogger, tp penasaran dg semua 'aksesoris' untuk m'percantik blog. Tmsk favicon, sdh sudah mencoba semua tips merubah favicon, dan cuma tips Anda yg jitu! Arigatou!!! ^^

    BalasHapus
  111. Makasih bnyak nih, dari semua cara, cara yang anda berikan yang berhasil

    BalasHapus
  112. di coba gan...
    tima kasih ilmunya

    BalasHapus
  113. Sipss deh sobb... Tapi kok Faviconnya itu gak masuk Analisis Seonya sob.. Terus Yang Berubahnya Di Mozilla doank.. Untuk Crome G ke load sob..Beda sama Favico Indoblogger.com. Faviconya sobat teridek.. apa beda caranya sama blog sobat atau gmn ni.. salam kenal ya Indoblogger.com ... Nice share

    BalasHapus
  114. terimakasih banyak tulisannya, sangat membantu :)

    BalasHapus
  115. thankyou om :D sekarang blog saya jauh lebih bagus hehe
    http://ggmshare.blogspot.com

    BalasHapus
  116. thanks infonya gan...lihat favicon baruku di My Blog | Simple

    BalasHapus
  117. makasih infonya sob..
    ane coba dulu..

    BalasHapus
  118. sangat bagus juga artikelnya , Dan ternyata berhasil ketika saya coba!

    BalasHapus
  119. terima kasih banyak untuk infonya..

    http://www/alattulissekolah.com

    BalasHapus
  120. thank you gan baru nnyari artikel tentang ini tuh ketemu

    BalasHapus
  121. siap di coba... . thx broo infonya

    BalasHapus
  122. Oke siip, terimakasih atas penjelasannya,,, semoga web toko baju saya jadi lebih bagus

    BalasHapus
  123. Ada cara laen gak yang lebih simple bro?

    BalasHapus
  124. working gan, thx y mampir ke beranda ane gan :D

    www.skinersos.blogspot.com

    BalasHapus
  125. Lihat dan Follow Blog ku ..Blog Game.. Klik Di sini

    BalasHapus
  126. mantap gan tutorialnya! ntar ane coba deh!
    mampir ke blog ane ya gan iput0882.blogspot.com

    BalasHapus
  127. kok bagus ceh blognya. Visit back and tolong kasih masukan yah buat blog ane di http://penjahitasakobagus.blogspot.com

    BalasHapus
  128. mantap artikelnya gan singgah sebentar ke blog anne ya gan .... http://mailzwidi.blogspot.com/
    maksih.....

    BalasHapus
  129. thanks favicon saya berhasil.
    silahkan kunjungi blog saya

    http://www.moviebeth.blogspot.com/

    BalasHapus
  130. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  131. pembelajaran yang keren bro tx ya

    BalasHapus
  132. postingan yang menarik kunjungan balik ya www.naufalthedarkness.blogspot.com

    BalasHapus
  133. Makasih juragan untuk tutorial cara membuat favicon diatas sangat berguna banget buat ane.

    BalasHapus
  134. Makasih tutorialnya gan, disini blogger lawas yang lupa...skali lagi makasih udah diingatkan ....

    kunjung balik yo ! dhiangaruda.blogspot.com

    BalasHapus
  135. mantap artikelnya gan, ijin mencoba...

    BalasHapus
  136. iya iya.. aku juga sukses.. tapi aku lgsg ganti di favicon aja.. di layout.. gak di edit html.. lgsung sukses jg kok.. kereen dech..

    BalasHapus
  137. info yang menarik gan.
    berkunjung balik yah.
    Clints Blog

    BalasHapus
  138. Salam.
    Mantap Infonya, ini yang gua cari, mau sedikit narsis dengan favicon di blog.
    Salam.

    BalasHapus
  139. Salam blogger

    Kita baru belajar ngeblog neh..
    blog ente keren gan, mohon mampir sebentar ke blog ane, mungkin ane bisa dapet Advicenya dari ente yang jago nge blogg...mampirnya ke sini :
    http://bukausahasendiri001.blogspot.com/
    thaks gan..

    BalasHapus
  140. baru tau saya apa itu favicon. maklum lah baru bangun blog. trims infonya mas

    BalasHapus
  141. makasih..infonya, langsung ke TKP..

    BalasHapus
  142. makasih ya gan infonya
    bagi agan2 yang mo car souvenir murahkunjungi aja blog ane.. Trims :)
    http://mangunwerdoyosouvenir.blogspot.com/

    BalasHapus
  143. gampang gampang susah juga ya ternyata membuat pavicon,.. terima kasih pa infonya

    BalasHapus
  144. terima kasih banget untuk informasinya..
    sangat membantu untuk website Toko Sepatu Grosirku

    BalasHapus
  145. Mantap favicon memang bisa mjd pemanis atau identitas blog/web kita. Makasi nanti dicoba tipsnya.
    Oia untuk favico grabber ada yg pernah nyoba?

    BalasHapus
  146. langsung dicoba, semoga tutorial yang ini bisa berhasil

    BalasHapus
  147. maksudnya gimana gan ? ko kode yang harus di copy sama gambar beda ?

    tunggu kunjungan balik http://nandarious.blogspot.com/

    BalasHapus
  148. mantap informasinya gan
    thanks

    BalasHapus
  149. terima kasih banyak gan , saya coba dlu ya. :D

    BalasHapus
  150. thanks gan, saya coba dlu ya :)

    BalasHapus
  151. Taruh Di Atas Apa Scriptnya ?

    BalasHapus
  152. tak coba dulu gan....nice info

    BalasHapus
  153. thanks info nya
    akan saya coba, nice share

    BalasHapus
  154. mantab bro , sangat membantu :D

    BalasHapus
  155. penjelasannya dapat di pahami,thanks

    BalasHapus