Selasa, 29 Desember 2009


Blogger.com (blogspot.com) memberikan kebebasan kepada para bloggernya untuk mengubah faviconnya masing-masing. Lihat perbandingan dua gambar berikut.

Yang sebelah kiri adalah favicon default di blogspot dan yang sebelah kanan adalah favicon modifikasiku. Bikinnya gampang kok. Saya akan tunjukkan kepada anda sekalian bagaimana mengganti favicon blogspot:
  1. Persiapkan gambar untuk favicon. Anda bisa menggunakan editor gambar kesukaan untuk berkreasi. Saya menggunakan Adobe Photoshop.
  2. Ukuran icon yang saya buat adalah 27 x 20 pixel. Menurut saya ukuran maksimal untuk tinggi icon agar terlihat proporsional adalah 30 pixel.
  3. Simpan dengan ekstensi gif (File, Save As, File Type : gif). Ekstensi untuk favicon sebenarnya bisa dibuat dalam ekstensi gif, ico dan png. Saya pilih gif karena lebih mudah pembuatannya dan ukurannya relatif kecil, juga bisa dibuat beranimasi (tidak saya bahas sekarang)
  4. Upload gambar ke ImageShack, Flickr atau dari Picasa dan dapatkan link direct downloadnya. Contoh yang saya pakai ada di https://lh5.googleusercontent.com/_FtoG3i98AJw/TYBcbQRz6BI/AAAAAAAAAXM/LxVV46JcFFs/s512/icon3c.gif

    Updated - 23 Mei 2011 : Anda dapat mengupload file favicon ke
    1. http://www.iconj.com/favicon_hosting.php
    2. http://www.picpanda.com
    3. http://www.fileden.com
    4. http://mirrorimg.net
    5. http://www.imageboo.com
  5. Login ke Dashboard blogspot anda, masuk ke menu Layout, Edit HTML
  6. Tekan CTRL+F, masukkan kata: </head>, letakkan kursor anda sebelum tanda </head> tersebut
  7. Selipkan syntax berikut :
    <link href='https://lh5.googleusercontent.com/_FtoG3i98AJw/TYBcbQRz6BI/AAAAAAAAAXM/LxVV46JcFFs/s512/icon3c.gif' rel='shortcut icon'/> (NB: Ganti alamat https://lh5.googleusercontent.com/_FtoG3i98AJw/TYBcbQRz6BI/AAAAAAAAAXM/LxVV46JcFFs/s512/icon3c.gif sesuai alamat icon anda di ImageShack)
  8. Save Template dan lihat perubahan yang terjadi (View Blog) - Selesai
Silahkan dicoba. Beri tahu saya hasil yang anda buat.

--------------------- Update (10 Feb 2010) --------------------
Untuk memaksa browser menampilkan favicon diatas, anda dapat menambahkan kode:
<link href='https://lh5.googleusercontent.com/_FtoG3i98AJw/TYBcbQRz6BI/AAAAAAAAAXM/LxVV46JcFFs/s512/icon3c.gif' type='image/gif' rel='icon' />
Tepat dibawah kode point no. 7.

Favicon dengan tipe file gif bisa muncul dengan baik di browser firefox, namun tidak tampak di IE. Untuk memastikan setiap icon muncul dengan konsisten, tipe file harus .ico. Silahkan kunjungi http://www.html-kit.com/favicon/ untuk membuat file .ico gratis!
Semoga bermanfaat.

Ingin cara yang lebih mudah lagi? baca disini

Penyedia Jasa Pembuatan Website, Blog, Aplikasi berbasis Web - Murah dan Bergaransi Seumur Hidup

76 komentar:

  1. bagussss...........!!!!!!!!!!!!!

    BalasHapus
  2. bagussss...........!!!!!!!!!!!!!

    BalasHapus
  3. Keren bang heri...
    saya suka :D
    hehehehe

    btw blogwalking k tmpt ane ya gan :D

    BalasHapus
  4. terima kasih akirawisnu.

    saya seneng2 aja blogwalking ke tempat akirawisnu, tapi alamatnya mana ya?

    BalasHapus
  5. wah!! bang hery

    ini linknya : http://akirawisnu.blogspot.com/

    makasii buat inponya loh gan :D, ud saia coba dan SUKSES :D

    makaisi yaaa.. :D

    BalasHapus
  6. bang hery,, upload file ico kmana y??? saya sudaha coba pke jpg dan berhasil, namun beberapa browser g mw tmpil

    BalasHapus
  7. sonic42, upload file ico atau jpg diarahkan ke server yang mendukung akses publik seperti imageshack, picasa atau flickr.

    File favicon berformat jpg atau gif memang terlihat muncul di firefox namun dalam beberapa kasus tidak kelihatan di IE dan chrome. Jadi memang langkah amannya adalah menggunakan file format ico

    BalasHapus
  8. Fikri Kautsar14 Mei 2010 23.49

    Makasih gan, sangat membantu....

    BalasHapus
  9. berkali-kali nyoba tetap gak bisa...untung ktemu bloghery info, favicon saya sudah bisa muncul. thanks tipsnya.

    BalasHapus
  10. selamat drhyudi, senang bisa membantu anda..
    btw dimana alamat blog anda, saya juga ingin lihat kalo dibolehkan ;)

    BalasHapus
  11. wah, terimakasih Om. sedikit menantang mengenai ekstensi file, hehehe, salam kenal ya, dari barala go blog. masih Balita Om.

    BalasHapus
  12. Salam kenal kembali mas alfan. Senang bisa membantu :)

    BalasHapus
  13. thank's mas alfan, sdh di coba siiiiiplah...

    BalasHapus
  14. hehehe.. nama saya hery, mas... bukan alfan :)

    BalasHapus
  15. mantab bg.... :)

    BalasHapus
  16. nuhun pisan ahh.. :)
    tukeran link yu?? he
    http://informasiterhangat.blogspot.com

    BalasHapus
  17. Thank'z brother . . .
    Kunjungi yawh . . . http://downloadsoftwarebro.com

    BalasHapus
  18. Nuhun Pisan cuy
    (makasih Banyak ya)

    BalasHapus
  19. makasih gan. inponya berguna banet, kebetulan w lg nyari yang ginian

    BalasHapus
  20. waduh keren abis artikelnya jelas dan padat dan mudah di mengerti. saya sudah mencobanya tpi tidak terlihat di google chrome. mungkin sudah ke ganti. thank you postingnya

    BalasHapus
  21. Terima Kasih infonya. sudah saya coba dan berhasil.
    http://partalearning.blogspot.com/

    BalasHapus
  22. bang hery q udh coba,,
    sma smua udah langkahY tp ga bisa2 knpa ya..

    BalasHapus
  23. Ok Thank.... langsung praktek...

    BalasHapus
  24. joz bang... http://xspeedboy.blogspot.com

    BalasHapus
  25. coba ikuti langkah2 diatas secara teliti - soalnya aku lihat kode untuk menampilkan favicon (langkah ke-7) tidak terdapat di dalam kode HTML blog anda

    BalasHapus
  26. William Saturn PS7 Februari 2011 18.37

    bang, yang ditulis Link, Direct Link, wigdet code, forum code, HTML code , Alt forum Kode.

    BalasHapus
  27. bisa minta tolong di printscreen ga hasil nya ??

    BalasHapus
  28. Makasi bang :)

    BalasHapus
  29. thanks bro.........salam kenal http://www.komputertutorial.com/

    BalasHapus
  30. thx ya bro . . .

    BalasHapus
  31. mantap gan...

    BalasHapus
  32. Aku tertarik cara membuat ini dan langsung action ya

    BalasHapus
  33. bagusssssssssssss

    BalasHapus
  34. saya uwd nyoba instruksiny
    tp kok g bs..???

    BalasHapus
  35. bung ryu hanya kurang beruntung. Coba lebih teliti mengikuti langkah-langkah ini. Sudah banyak yang berhasil kok :)

    BalasHapus
  36. MurahCertain4 Mei 2011 11.47

    semangat... saya sudah berhasil bang http://murahcertain.blogspot.com/

    BalasHapus
  37. selamat bro, salam kenal ;)

    BalasHapus
  38. ayatulhusnarahmafamira15 Mei 2011 00.47

    makasih bro.....

    BalasHapus
  39. www.gpulsa.net24 Mei 2011 02.30

    thank bung

    BalasHapus
  40. Altair ibn Abdi Robhani1 Juni 2011 22.44

     Trimakasih buat infonya:)
    Sungguh bermanfaat, akan saya coba.

    Btw, blognya udah sya follow
    Kami tunggu Follbacknya....

    Salam spirit dari Dayat's Artikel

    BalasHapus
  41. www.kolom-opini.co.cc4 Juni 2011 14.34

    n..nice info..Sudah sukses ane taro di TKP...Klo sempat mampir ke TKP gan..udah ane siapin karpet merah buat agan..

    BalasHapus
  42. mantap gan, sudah kunjungan balik :)

    BalasHapus
  43. maksih y bg ....  :)

    BalasHapus
  44. Jerry Gerungan20 Juni 2011 21.04

    Makasih infonya kk Herry

    BalasHapus
  45. visit my blog
    jimz-blogs.blogspot.com

    BalasHapus
  46. ZIEYA_OCKTARIANI14 Juli 2011 07.55

    kok g bisa
    udh berapa kali pi g KTIFF bbm AKU
    :(

    BalasHapus
  47. lumayan susah

    BalasHapus
  48. thanks gan.... favicon muncul dengan sempurna :))
    kunjungi blog saya ya
    http://mengapatakmencoba.blogspot.com

    BalasHapus
  49. thanks gan atas info x

    BalasHapus
  50. makasih gan..

    BalasHapus
  51. ikutan naroh link ya

    http://zieteru.blogspot.com/ 

    BalasHapus
  52. makasih mas informasinya....
    sangat2 bermanfaat!!!!!!

    BalasHapus
  53. Hendrik Tok4 Mei 2012 21.01

    Kak, kok saya gak bisa ya ?

    ini blog saya Hendriktok.blogspot.com

    BalasHapus
  54.  sudah sukses kok, coba dibersihin dulu cache browsernya :)

    selamat ya

    BalasHapus
  55. Sultanzaky7720 Juni 2012 14.47

    thank gan infonya....

    BalasHapus
  56. cara dapet 
    link direct downloadnya gmn mas

    BalasHapus
  57. Widyawatishmkn11 Juli 2012 12.09

    siiippppp........
    thankz

    BalasHapus
  58. gan mnta tutorialNya buat bikin itu tu. yang ada burung muter-muter di halaman plisss. tolong bgt gan <<<<

    BalasHapus
  59. Mantab brow, terima kasih banyak...

    BalasHapus
  60. bang saya masih bingun , boleh minta nomor hpnya ga ?? sms aja ke 089654262717

    BalasHapus
  61. makasih mas...sukses sya coba
    http://sayadankaligrafi.blogspot.com/

    BalasHapus
  62. kursor arahkan ke gambar -> klik kanan plih copy image location -> paste di tmpt pnyimpnan word/document...

    BalasHapus
  63. Adhitya_pratama9 Januari 2013 17.44

    thx infonya visit http://realeffingdeal-ind.blogspot.com/

    BalasHapus

Komentar Anda..?

Related Posts Plugin for WordPress, Blogger...
Langganan RSS Feed Follow me on Twitter!