Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Cara Membuat Favicon

Beberapa hari yang lalu, sobat Muhibb mengajukan pertanyaan pada shoutbox seputar bagaimana cara merubah icon Internet Explorer ataupun Blogger yang terletak di samping URL address menjadi foto dirinya, seperti layaknya blog yang di miliki mas Anang, dan kali ini saya akan mencoba membahasnya.

Gambar atau foto yang menggantikan icon blogger sepengetahuan saya yang terbatas ini,
foto tersebut disebut dengan Favicon. Awalnya favicon ini berupa gambar biasa yaitu sebuah gambar icon layaknya icon-icon yang terdapat dalam program windows karena favicon sendiri berasal dari kata “Favorite Icon“, akan tetapi dalam perkembangannya banyak favicon ini banyak yang berupa foto.

Bagaimana cara membuat Favicon?

Pertama-tama tentunya kita harus membuat sebuah icon ataupun foto yang berukuran kecil sekitar 16px x 16px untuk nanti menggantikan icon blogger. contoh :

Jika sebuah icon atau foto sudah jadi, langkah selanjutnya adalah kita bisa menggunakan jasa sebuah situs sebagai server favicon ini salah satunya adalah
http://www.myfavatar.com. Untu cara bergabungnya silahkan ikuti langkah-langkah berikut ini :

  1. Silahkan klik dini untuk menuju http://www.myfavatar.com/

  2. Klik tombol Register Now untuk melakukan pendaftaran pada situs tersebut

  3. Ada beberapa form yang harus diisi antara lain :

    • Desired Username (5 to 25 chars) –> isi dengan username yang sobat inginkan. contoh : Unyil

    • First Name –> isi dengan nama depan sobat

    • Last Name –> isi dengan nama belakang sobat

    • Gender –> pilih sesuai jenis kelamin sobat. male=pria, female=wanita

    • Date of Birth –> pilih tanggal yang sesuai dengan tanggal lahit sobat

    • Country –> pilih negara di mana sobat tinggal. contoh : Indonesia

    • Email Address –> isi dengan alamat email sobat, tentunya harus yang masih valid untuk nanti melakukan verifikasi

    • Confirm Email Address –> isi kembali dengan alamat email yang tadi dituliskan

    • Password (5 to 25 chars) –> tulis password yang sobat inginkan

    • Confirm Password –> tulis kembali password yang tadi sobat tulis

    • Enter the characters below –> tulis huruf atau angka yang tertera pada kotak sebelah bawah

    • Beri tanda centang pada kotak di samping tulisan I agree to MyFavatar Terms of Service

    • Klik tombol yang bertuliskan Register

  4. Setelah muncul tulisan Congratulations!!!, sobat harus melakukan verifikasi melalui email sobat

  5. Buka email sobat yang tadi dituliskan pada saat melakukan Register

  6. Buka email yang di kirim dari site-admin@ myfavatar.com yang bertajuk Welcome to MyFavatar!

  7. Klik link yang diberikan untuk melakukan verifikasi

  8. Setelah ada tulisan Congratulations!!! kembali, klik tulisan here atau bisa juga tulisan Sign In
    untuk masuk ke halaman account sobat

  9. Tulis user name serta password sobat, klik tombol Sign In

  10. Klik tulisan Change Favatar yang berada pada sebelah kiri layar

  11. Klik tombol Browse…, lalu masukan icon atau foto yang tadi di buat

  12. Klik tombol Submit

  13. Klik tulisan Edit Blog

  14. Ada beberapa form yang harus di isi :

    • Blog URL –> isi dengan alamat blog sobat, jangan lupa untuk menambahkan tanda slash (/) pada ujung alamat URL. Contoh : http://kolom-tutorial.blogspot.com/

    • Title –> Isi dengan judul blog sobat. Contoh : Blog tutorial

    • Category –> pilih kategori yang sesuai dengan blog sobat

    • Description –> isi dengan deskripsi blog sobat. Contoh : Panduan praktis membuat blog di blogger.com

    • Klik tombol Submit

    • Klik tulisan Favatar Codes untuk mengambil kode favicon

    • Copy kode HTML yang berada di bawah tulisan favicon Code:….. dst lalu paste pada program notepad

    • Klik tulisan Sign Out untuk keluar dari halaman Account sobat

    • Silahkan tutup halaman windows browser situs tadi.

Contoh kode Favicon yang di berikan yaitu :




<link rel="shortcut icon" href="http://favatar.myfavatar.com/rohman24.ico" type="image/x-icon" />
<link rel="icon" href="http://favatar.myfavatar.com/rohman24.png" type="image/png" />

langkah selanjutnya adalah memasukan kode yang tadi telah sobat dapat kedalam kode template blog. Untuk template klasik dengan template baru tentunya ada sedikit perbedaan, silahkan ikuti langkah berikut :

Untuk template klasik :

  1. Sign in di blogger dengan id sobat

  2. Klk menu Template

  3. Klik menu Edit HTML

  4. Masukan kode Favicon di bawah kode <head> atau sebelum
    kode <style type="text/css">

  5. Klik tombol Save Template Changes

  6. Selesai.

Sekarang lihat blog sobat apakah sudah ada foto sobatnya atau belum? jika belum nampak, coba masukan blog sobat ke menu Favourite, kemudian Refresh halaman tersebut. Untuk pengguna Firefox langsung tokcer …makanya coba download dulu firefox dengan cara mengklik banner di bawah postingan ini !!!

Untuk template baru :

  1. Sign in di blogger dengan id sobat

  2. Klik menu Layout

  3. Klik menu Edit HTML

  4. Beri tanda centang pada kotak di samping Expan Widget Template

  5. Copy kode Favicon lalu paste di atas kode <head>

  6. Klik tombol SAVE TEMPLATE WIDGET

  7. Selesai.

Lihat kembali blog sobat apakah sudah ada foto sobatnya atau belum? jika belum nampak, coba masukan blog sobat ke menu Favourite, kemudian Refresh halaman tersebut. Untuk pengguna Firefox langsung tokcer …makanya jangan lupa untuk mendownload firefox dengan cara mengklik banner di bawah postingan ini !!!

Untuk melihat contoh nyata dari Favicon silahkan klik di sini

Mudah-mudahan pembahasan di atas dapat dimengerti, selamat mencoba !!!

12 Juni 2007 - Posted by | aksesori blog, blog tutorial, membuat favicon

38 Komentar »

  1. yeah ilmu baru, udah sy coba dan….berhasil 🙂

    Komentar oleh ati | 14 Juni 2007 | Balas

  2. Wahh tambah satu lagi ilmu dari kang rohman, saya jg dah coba dan lagi2 sukses. Berbahagialah kang ilmunya bener2 sangat bermanfaat bagi orang lain.

    Komentar oleh Au' | 14 Juni 2007 | Balas

  3. Wahh tambah satu lagi ilmu dari kang rohman, saya jg dah coba dan lagi2 sukses. Berbahagialah kang ilmunya bener2 sangat bermanfaat bagi orang lain.

    Komentar oleh Au' | 14 Juni 2007 | Balas

  4. Wahh tambah satu lagi ilmu dari kang rohman, saya jg dah coba dan lagi2 sukses. Berbahagialah kang ilmunya bener2 sangat bermanfaat bagi orang lain.

    Komentar oleh Au' | 14 Juni 2007 | Balas

  5. mas rohman emang setiap postinganya bagus bagus dan berguna,trimakasih mas

    salam kenal

    Komentar oleh Syaifudin Zuhri | 31 Agustus 2007 | Balas

  6. mas..ak mo buat favicon neh..tp kok myfavatar,com kok gak bisa join seh (coba deh mas buka situsnya)..apa ada hosting icon yg lain ???
    thx b4

    Komentar oleh redblack | 4 September 2007 | Balas

  7. thanks, sip dah………

    Komentar oleh Baso gama | 15 September 2007 | Balas

  8. Lagi2 ribuan terima kasih buat bang rohman! ilmunya saya ambil lagi

    Komentar oleh Rizki Eka Putra | 2 Oktober 2007 | Balas

  9. Terima kasih mas, blog ini sangat membantu bagi pemula. salam

    Komentar oleh Perry PADA | 12 Oktober 2007 | Balas

  10. Saat sy brhasil di sesi ini, senyum langsung mengembang. thx brat!!

    Komentar oleh tedybanka | 31 Oktober 2007 | Balas

  11. Ya ampun susahnya panjang dan susahnya bikinnya, mending pake favicon generator, trus di save di root sebagai favicon.ico, beres deh…

    Komentar oleh Cewek | 5 November 2007 | Balas

  12. terimakasih mas….

    Komentar oleh PUMITA | 6 November 2007 | Balas

  13. berhasil mas thanks dapet ilmu baru neh

    Komentar oleh bullbazure | 22 November 2007 | Balas

  14. makasih tutorialnya A, semoga situs saya http://gajiku.blogspot.com bisa bermanfaat… Chayooo

    Komentar oleh Hengki Ferdianto | 23 November 2007 | Balas

  15. Thanks Kang… untuk tutornya

    Komentar oleh Baedy | 19 Desember 2007 | Balas

  16. Mas, salam kenal dari saya Juhidin, makasih banyak ilmunya,Mas. Moga dapat pahala yang gede…Amin

    Komentar oleh My Desk | 28 Desember 2007 | Balas

  17. @my desk : salam kenal kembali sobat juhidin…. sering-sering berkunjung kemari ya 🙂

    Komentar oleh rohman | 28 Desember 2007 | Balas

  18. mas kalau nambahin favicon di wordpress gimana?

    Komentar oleh Nugi | 30 Desember 2007 | Balas

  19. web myfavatar sudah ditutup, jika memungkikan, servernya diganti saja. atau isinya di update trims
    purwo

    Komentar oleh purwo adi wibowo | 26 Januari 2008 | Balas

  20. Kang , salut ilmunya banyak banget, saya suka nyontek loh. bolehkan ?

    Oh iya untuk artikel ini pas saya mau coba ke web # http://www.myfavatar.com/
    dari beberap hari yg lalu sampai sekarang kok nga bisa yah kayaknya scam yah ?, ada tempat lain nga selain ini.
    terima kasih

    Komentar oleh oteh | 16 Maret 2008 | Balas

  21. Supaya gampang, pake pavicon generator aja, silahkan baca di sini!

    Komentar oleh Rohman | 17 Maret 2008 | Balas

  22. Kang, Favicon bisa dipasang gak sich di friendster? makasih atas perhatian dan bantuannya. maju terus Kang!!! lebih ke depan…(by juhidin)

    Komentar oleh Gue! | 21 Maret 2008 | Balas

  23. bagus kang lebih di lengkapin lagi ya trik-triknya

    Komentar oleh Ashari atau arie atau arhe | 8 April 2008 | Balas

  24. mas situs yang laen donk yang itu gie eror

    Komentar oleh WeBsIte PribAdI I-Punk | 6 Mei 2008 | Balas

  25. duuuhh,, kok http://favatar.com ga bisa dibuka mas, gmn tolongin dunkk…

    Komentar oleh zoelgebe | 16 Mei 2008 | Balas

  26. mas,saya jg dah berhasil..heheheh…matur tengkyu

    Komentar oleh un_talk | 2 Juni 2008 | Balas

  27. wah,,,semuany koment pd berhasil kayany,,ada lagi yg ga bs di buka situsnya…untuk yg blum taw yg bener di http://www.myfavatars.com/ pake s favatarnya. o yah mas..dari semua langkah yg saya coba kayany saya duank ney yang blum berhasil… 😦 mohon bimbinganny mas..atau add saya di YM fhie_51t saya tggy mas

    Komentar oleh f1r | 22 Juni 2008 | Balas

  28. makasih banyak,mas

    Komentar oleh Anonymous | 29 Juli 2008 | Balas

  29. rsdsrdrwre

    Komentar oleh x_death_x | 30 Juli 2008 | Balas

  30. Gimana sihh cara membuat efek animasi di friendster…gimana juga cara pasang favicon di fs

    thx

    Komentar oleh Adipasa Team | 3 Agustus 2008 | Balas

  31. mas saya coba nih favicon nya

    klo ngubah lebar halamn pos gmana mas

    Komentar oleh idha PW | 4 Agustus 2008 | Balas

  32. terlalu panjang kang!
    coba aja di http://www.favicongenerator.com/
    trus masukkan icon kesayangan kamu and then taroh di Geocities kamu, terakhir taroh pas di bawah … head yaitu link href='http://www.geocities.com/account kamu/nama file kamu.gif' rel='shotcut icon'/
    jangan lupa kasih tanda < dan >
    semoga bermanfaat

    Komentar oleh darkbahamut | 5 Agustus 2008 | Balas

  33. @darbahamut : hehehe…kamu tuh aneh ya, sudah jelas-jelas saya tulis di akhir postingannya bahwa tutorial ini sudah tidak up to date, yang baru sudah saya posting tanggal 22 juni yg lalu, coba baca di di membuat pavicon 2

    Komentar oleh rohman | 5 Agustus 2008 | Balas

  34. Bagus nih om saya coba ya.. 🙂

    Komentar oleh Taktiku | 5 Agustus 2008 | Balas

  35. wahh boleh juga ilmunya mas,ilmu kebal senjata ada gak..???

    Komentar oleh dadi blogger | 14 Agustus 2008 | Balas

  36. kalau membuat pavicon tanpa harus ke favatar atau link lainnya ngga bisa ya Pak ??
    kalau bisa sih hanya dengan edit HTML saja tanpa harus register lagi ke tempat lain.Tks
    http://www.yosaadi.co.cc

    Komentar oleh Yos. Sutan Mudo | 17 Agustus 2008 | Balas

  37. thanx ya..

    buat yang ga mau repot kesini aja nih

    http://tools.dynamicdrive.com/favicon/

    Komentar oleh Elly | 27 Agustus 2008 | Balas

  38. thanks bgt atas infonya

    Komentar oleh info media | 4 November 2008 | Balas


Tinggalkan Balasan ke Adipasa Team Batalkan balasan

« Sebelumnya | Berikutnya »