Blog Inspirasi Digital

Blog Inspirasi Digital

Tutorial Mikrotik, Hotspot, Blog, SEO, WEB 2.0, HTML, CSS, Javascript dan Inspirasi Digital

Cara buat favicon

Favicon adalah icon yang terdapat pada address bar atau tab bar pada web browser, cara buat favicon cukup mudah ingin membuatnya ikuti langkah berikut:

1. Buat gambar ukuran 32x32 simpan dengan format gif, jpg, png, dan bmp (pilih salah satu)
2. Kemudian buka http://tools.dynamicdrive.com/favicon/
3. Pada tombol browse pilih gambar yang telah dibuat
4. kemudian klik "create icon"
5. klik "download favicon" simpan gambar tersebut
6. simpan icon tersebut di alamat penyimpanan online bisa di www.geocities.com   atau pages.google.com
7. langkah terakhir buka blogger lalu masuk ke edit HTML

cari code <head> kemudin paste kode dibawah ini dibawah kode <head>:

<link rel="shortcut icon" href="/favicon.ico">

Catatan: warna merah ganti dengan alamat icon sesuai dengan nama alamat url tempat disimpannya icon

Contoh
<link href='http://www.geocities.com/oom_directory/favicon.ico' rel='shortcut icon'/>

8. simpan, kemudian lihat hasilnya.

83 komentar:

  1. matur nuwun mas... it works!!! terimakasih banyak!!!

    BalasHapus
  2. Anonim15/12/07

    hmm.. kk.. bingung.. hehe..

    aku dah tinggal dimasukin ke photobucket.. tapi dia ga trima dalam bentuk .ico .. gimana tuh? >_<

    -SatoNa-

    BalasHapus
  3. Anonim15/12/07

    waah kk.. dah berhasilll.. hehehe.. Akhirnya.. berhasil juga punya icon.. hehe..

    thx bangeet yaah.. ^^

    BalasHapus
  4. wah....udah berhasil selamat ya...

    BalasHapus
  5. aDuh bOZzz,..keNApa buNYine
    di photobucket.. g nrima dalam bentuk .ico .. gimana tuh? >_<
    wadUH,..repLY y

    BalasHapus
  6. coba simpan disini saja www.geocities.com atau pages.google.com

    BalasHapus
  7. Anonim12/4/08

    Kok blon bisa yaa...

    BalasHapus
  8. Wah keren nich om tutorialnya... thanks banget yach

    BalasHapus
  9. d logo punya oom, di sekitar gambar bohlam ny kan transparan tuh...nah punya saya nggak tuh oom (msh ada white area ny)...gmn caranya bikin supaya bs transparan ya?

    BalasHapus
  10. Anonim3/5/08

    @Omni Master : oh punya om tansparant dari imagenya langsung

    BalasHapus
  11. terima kasih banyak om

    BalasHapus
  12. Makasihh...
    Blog sRiE udh ada faviconnya :)

    BalasHapus
  13. Anonim11/5/08

    makasih juga buat sri dan try :)

    BalasHapus
  14. Anonim15/5/08

    kerennnn tips-nya... walaupun favicon-ku sedikit katro hhhehehe...

    BalasHapus
  15. Anonim27/5/08

    TERIMA KASIH MAS AKU DAH COBAIN DAN BERHASIL.

    BalasHapus
  16. Anonim9/6/08

    Kang kok punyaku keluar kata2 ini ya kang piye ki...?

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "link" must be terminated by the matching end-tag "".

    Thanks Jaz.

    BalasHapus
  17. Anonim9/6/08

    @jaz : jangan lupa di belang script di beri tanda garis miring '/>

    BalasHapus
  18. Assalamu'alaikum,
    Jazakallah khair atas tips nya meski dg susah payah saya dapat juga mengganti favicon di blog saya.....sekali lagi Makasih

    BalasHapus
  19. kok aku coba gak bisa yaa ? kalo pake imageshack.us bisa gak ?

    BalasHapus
  20. Anonim26/6/08

    makasih oom,langsung bisa nih mantapp....

    BalasHapus
  21. Anonim5/7/08

    Kang klo untuk blogspot yang di domain sendiri kok gak bisa ya om...

    Gimana ya caranya...
    aku coba di www.jazili.com malah yang keluar iconnya google pages...

    Bantu dong Om

    BalasHapus
  22. halow om udah acy benerin kayaknya commentnya udah bisa dech, sekarang mo nyoba buat pavicon :)

    BalasHapus
  23. Anonim25/7/08

    setelah diberitahu oleh kang firdaus, akhirnya aku menemukan tutorial ini juga, makasi kang firdaus ma kang O-Oms. tetep semangat Blogger Indonesia... !!!

    BalasHapus
  24. @all : thanks buat komentarnya semoga sukses pasang faviconya :)

    BalasHapus
  25. Anonim18/8/08

    buat aku yang pemula ini banyak ngebantu ^^

    BalasHapus
  26. Anonim13/9/08

    Belajar buat favicon n sukses,mas..mantap hehe..thx much

    BalasHapus
  27. Anonim13/9/08

    bil nggu buka... jlan2 k rmahnya Om... biar smakin dpt ilmu bnyak...

    BalasHapus
  28. Anonim18/9/08

    Mas, cara nyimpan iconya gmn?

    BalasHapus
  29. udah saya coba kok tetap icon blogger ya yg muncul ?

    BalasHapus
  30. Anonim24/10/08

    simpan icon tersebut di alamat penyimpanan online bisa di www.geocities.com atau pages.google.com<<<<<< om cara simpannya gimana????masih binun Mode ON

    BalasHapus
  31. Anonim9/11/08

    mas skrng kok blogger ga bisa diganti yah faviconnya... nape neehh.... :(

    Atow ada cara laen menyiasatinya... :>

    BalasHapus
  32. sip....
    oom emang tutornya simple tapi sangat berguna
    dan mudah di aplikasi kan..

    makasi y om

    oom baik de...;))

    BalasHapus
  33. Anonim24/12/08

    aku coba kok gk muncul di blogspot

    BalasHapus
  34. Anonim25/12/08

    saya juga pengin buat ah....
    lihat aja hasilnya di web baruku keren khan...
    http://www.m4rnos.com

    BalasHapus
  35. head
    link href='http://www.geocities.com/p_rama_y/favicon.ico' rel='shortcut icon'/
    b:include data='blog' name='all-head-content'/
    title data:blog.pageTitle/ /title
    b:skin ![CDATA[/*

    koq gak kluar ya om? ada yg salahkah? please correct it ya..thanks
    ps.tanda panah2 aku hilangin semua biar bisa post comment

    BalasHapus
  36. trims ya...ini berguna sekali....numpang copy paster ya...

    BalasHapus
  37. Anonim26/1/09

    Ijin kopi buat post di blogku http://newsdigital.wordpress.com

    BalasHapus
  38. Om gimana cara nyimpan download-an favicon di pages.google.com nya?

    BalasHapus
  39. Dari langkah A sampai Z sudah berhasil, tp pas tak coba lihat hasilnya kok tetep ga berubah ya (masih icon blogger), kenapa ya oom? minta bantuannya!

    BalasHapus
  40. Punya saya kok belum bisa yach :
    http://zuhadi.googlepages.com/Favikon.png

    BalasHapus
  41. saya sudah buat favicon yg animasi, tapi kenapa ya dia tidak bergerak ?
    Terimakasih.

    BalasHapus
  42. mantab deeh om.. makasih y infonya :)

    BalasHapus
  43. klo buat wp gmn om caranya?

    BalasHapus
  44. aku pake punya yang gambar lampu punya mas aja deh..
    dari tadi susah banget nimpen di geocities.com-nya..
    makasih

    BalasHapus
  45. setelah surfing sekian lamanya akhirnya fil berhasil juga punya favicon... berkat artikelnya o-om dweh eang pastinya...
    tanx eah om... ouh eah... fil juga buat link dweh.. ke artikel ini... buat artikelnya fil tentang favicon juga...
    tapi beda kok om... cuman tambahan aja... alnya fil lihat... banyak eang tanya juga tentang favicon animasi... nah... fil cuman mau bagi-bagi ilmu ajah om... minta maaf om... karena artikelnya dibuat dulu baru minta ijin ama om...

    buat temen2 eang pengen buat favicon animasi... maen2 dweh ke blogku... mindielfangel.blogspot.com ... khusus bat artikel favicon animasinya bisa dicopy paste aja urlnya http://mindielfangel.blogspot.com/2009/10/favicon-animasi.html

    tanx banget om...

    BalasHapus
  46. keren....
    numpang sedot gan...

    BalasHapus
  47. Disebagian template ada yang ga komfortibel. Saya sendiri pake cara seperti ini :saya taruh dibawah
    ]]></b:skin>

    <link href='http://img412.imageshack.us/img412/3808/image11pc0.gif' rel='shortcut icon'/>

    </head> dan berhasilhttp://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif

    BalasHapus
  48. wua, thx banget oom. sekarang web poe udah punya fav. mampir ya..

    BalasHapus
  49. Terima kasih tipsnya.
    Ssya juga gunakan http://www.html-kit.com/favicon untuk favicon animasi.

    BalasHapus
  50. trimakasi
    semoga berhasil jadi blogger yang handal
    truzlah berkarya dan ajari aku tyk jadi blogger yg tdk rendah
    ;))

    BalasHapus
  51. susahnya uplosd ico nya bos

    BalasHapus
  52. wah saya dah coba ne mas,tapi kok ngak tampil juga ya,masih pya om google juga yg tampil

    BalasHapus
  53. http://www.fotoartis.in29/5/10

    coba dan langsung bisa . hehe :D
    makasih mass infonya .

    BalasHapus
  54. coba dan langsung bisa . hehe :D
    makasih mass infonya .

    BalasHapus
  55. Ini yg di cari, eh di coba langsung bisa. Thanks :)

    BalasHapus
  56. Makasih. Udah dibuat.

    BalasHapus
  57. thaks bro...n salam kenal juga

    kunjungi balik ea...hehe

    www.aelovebel.blogspot.com

    BalasHapus
  58. oom, saya mau tanya, oom ini kerja "primernya" apa sih om?, kok sempet2nya ngurusin blog sampe bisa serius?, kok saya gak bisa yah bagi waktunya, kira2 bisa gak om post kan tips gitu biar bisa bagi waktu buat kerja juga, buat ngeblog juga. saya tunggu kabarnya yah(hehehe maksa), saya dah subscribe blog ini da, dari dulu di email saya...makasih om...

    btw sebenarnya ada satu lagi tempat buat favicon di http://www.html-kit.com/favicon/-/browserpreview/ disini bisa animasi faviconnya, cuma kalau yang transparant nya kurang bagus atau gak ada mungkin(soalnya saya coba jadi gak transparant)...

    thanks oom...

    BalasHapus
  59. :D minta artikelnya mas
    makasih sebelumnya

    BalasHapus
  60. makasih banyak ya mas...

    BalasHapus
  61. makasih mas, infonya.. :D

    BalasHapus
  62. bingung aku kk yg copas data d edit html malah eror
    tolong beritahu dengan cermat maklum aku pemula om

    BalasHapus
  63. Salam....Kenapa sih ga bisa buat favicon di blog saya, padahal semua petunjuk sdh sy ikuti...hahahahahaha, coba kasi trik jitu lagi o-om.... Oh gabung dong di blog saya... sukses dan selamat berbagi.... :)

    BalasHapus
  64. Mantap gan tutorialnya,sangat membantu bagi blogger yang ingin Action dengan vavicon bisa kreasi sendiri

    BalasHapus
  65. om kok geo sama google pages nya gabisa ya? ada image hosting yg lain? thanks:)

    BalasHapus
  66. om.. mohon bantuan...
    aku pakai web cms joomla... tuch bagaimana mas...?
    aku coba masuk cpanel dan langsung ganti gambar fivecon.ico dengan yang logoku kok tidak berubah,,,,
    makasih atas infonyaa...

    BalasHapus
  67. Om, kok masih belum berhasil nih??

    BalasHapus
  68. punya saya tidak berhasil.. tapi setelah diotak atik ternyata bisa juga caranya letakan kodenya persis dibawah ]]>

    BalasHapus
  69. google sdh menyediakan nya..

    BalasHapus
  70. unik menjadi khas tersendiri dri setiap blog??

    BalasHapus
  71. untuk apalagi, kan blogger sdh nyediain smua..

    BalasHapus
  72. Anonim18/2/12

    Udh di ikutin ni cara2 nya,, tpi kok ga bisa 2jg yaa?? Mohon bimbingan nya yaa om....

    BalasHapus
  73. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  74. Belum pernah saya coba tuh website nya! Makasih om :)

    BalasHapus


 

Back to Top