Membuat Favicon Bergerak untuk Blog

Blogging – Favicon bergerak mungkin masih jarang kita temui di dunia maya, terlebih tak semua kawan blogger memperhatikan hal kecil tapi menarik ini. Sebuah ikon kecil yang akan tampil di depan judul atau nama blog yang kita miliki dan umumnya berupa gambar logo atau gambar foto berukuran sangat kecil. Tapi beberapa waktu lalu PS menemukan sesuatu yang unik seputar favicon ini, yaitu kita bisa membuat favicon bergerak dengan mengkombinasikan antara foto dan teks. Nah, coba kawan perhatikan bagian paling atas dari browser kawan-kawan, di depan judul posting ini ada gambar dan teks yang berjalan kan? Ya, itu favicon bergerak yang  PS maksud.




Di dalam Wikipedia Indonesia disebutkan bahwa favicon merupakan icon utama yang muncul pada address bar (baris alamat) suatu website dan merupakan logo dari website tersebut. Favicon juga dikenal sebagai shortcut icon, website icon, URL icon, atau bookmark icon. | Sumbernya

Berikut ini coba dibuatkan tata cara membuat favicon bergerak seperti yang telah PS terapkan di blog ;

  1. Silakan kawan blogger siapkan sebuah gambar atau logo blog (usahakan berukuran persegi), lalu buka situs berikut ini <<
  2. Pada halaman situs tersebut, upload gambar atau logo blog yang telah disiapkan tadi dan tuliskan teks yang hendak ditampilkan pada form di bawahnya (biasanya diisi dengan alamat situs blog) | perhatikan gambar 1
  3. Klik tombol Create Favicon, tunggu beberapa saat hingga proses selesai dan geser sedikit ke bawah pada halamat tersebut hingga ketemu tombol Get it Now!
  4. Klik tombol Get it Now dan simpan berkas file terkompresi yang teruduh ditempat yang aman. | Perhatikan gambar 2
  5. Selamat! File untuk favicon bergerak kamu sudah jadi. Lalu bagaimana cara memasangnya di blog? Oke, caranya dijelaskan dibagian bawah gambar-gambar berikut ini ya 🙂
dijadikan Favicon Bergerak Blog kamu

Gambar 1 : Unggah foto atau logo Blog dan isi teks yang ingin dijadikan Favicon Bergerak Blog kamu

Simpan file Favicon Bergerak dalam file terkompresi

Gambar 2 : Tekan tombol Get it Now dan Simpan file Favicon Bergerak dalam file terkompresi

Cara Menampilkan atau Memasang Favicon Bergerak

Nah, setelah kita berhasil membuat dan menyiapkan file favicon bergerak, langkah selanjutnya adalah menempatkan kode icon situs blog di bagian halaman blog yang kita miliki. Berikut ini langkah demi langkah cara memasang favicon bergerak yang dimaksud (gambarnya tetap dibagian bawah lagi):

  1. Pertama ya tentu file hasil download terkompresi di atas tadi di ekstrak dulu, alias kita keluarkan isinya. Lalu klik atau buka tombol readme.txt yang ada disana. Lakukan block pada kode yang ada seperti pada gambar dan klik kanan salin (copy) | Perhatikan gambar 3
  2. Buka dasbor blog kamu dan menuju ke menu Tampilan > Penyunting > header.php (Kepala Halaman). Tempat kode yang kamu sali tadi di bawah kode html untuk title seperti pada gambar. Lakukan penyesuain kode setelah pada bagian href untuk dua file favicon yang ada menjadi href=”http://situsmu.tld/animated_favicon.gif” dan juga href=”http://situsmu.tld/favicon.ico” (Nambahin URL blog kamu didepannya kalau masih bingung) dan klik Mutakhirkan Berkas atau Update File | Perhatikan gambar 4
  3. Upload file animated_favicon.gif dan favicon.ico ke root directori blog melalui file manager hosting atau melalui program FTP yang kamu miliki. | Simak lagi gambar 3
  4. Oke, Selamat ya! Blog kamu sekarang sudah memiliki favicon bergerak seperti yang dimiliki Prapto Sragen 🙂
Hasil Ekstraksi file unduhan untuk Favicon Bergerak

Gambar 3 : Hasil Ekstraksi file unduhan untuk Favicon Bergerak. Lalu buka readme.txt

file theme WordPress agar favicon bergerak muncul

Gambar 4 : Penempatan kode dibagian header.php file theme WordPress agar favicon bergerak muncul

Lokasi Favicon Bergerak tetap sama seperti sedia kala

Lokasi Favicon Bergerak tetap sama seperti sedia kala, hanya sekarang seperti Moving Text 🙂

Oke deh, sekarang sudah paham kan dan waktunya untuk praktik sendiri ya 🙂 Oh ya beda wordpress theme mungkin beda juga struktur kode phpnya ya, jadi harap diperhatikan jika kode favicon harus ditempatkan setelah <head> dan sebelum </head>. Kalau masih ada yang bingung dan ingin ditanyakan, silakan tinggalkan pesan pada kolom komentar di bawah ya. Semoga bermanfaat dan salam #BlogWalking

30 thoughts on “Membuat Favicon Bergerak untuk Blog

  1. 18/02/2014 at 22:32

    info yang menarik… nanti mau dicoba ahh

    1. Prapto Ari
      18/02/2014 at 22:59

      wo iya silakan, menarik kok favicon blog kita nantinya 🙂

  2. 19/02/2014 at 06:19

    wah jadi keren nih, pengen nyoba 🙂

    1. Prapto Ari
      19/02/2014 at 09:59

      silakan dicoba mas, semoga hasilnya keren 🙂

  3. 19/02/2014 at 06:28

    Bergeraknya cuma di Mozila ya mas, Di Chrome gambar paviconnya gak bergerak.

    1. Prapto Ari
      19/02/2014 at 10:09

      woh iya ternyata, setelah saya coba pakai chrome memang tidak bergerak ternyata 🙂 kalau di buka lewat IE malah tidak muncul faviconnya #whathappen

  4. 19/02/2014 at 18:16

    wah jadi tambah keren ya mas kalau favicon nya bisa gerak-gerak getu. Ada seni nya ya 🙂
    bisa dicoba nih tutorialnya 🙂

    1. Prapto Ari
      19/02/2014 at 21:48

      iya mbak, itu kemarin juga karena iseng pengen mencoba hal baru 🙂

  5. 20/02/2014 at 06:41

    Klo utk Blogger bisa mas?

    1. Prapto Ari
      21/02/2014 at 02:46

      bisa mas, hanya cara pemasangannya yang agak berbeda dan saya sendiri masih awam untuk pengkodean blogspot

  6. 21/02/2014 at 08:21

    makasih tipsnya, langsung dicuba ah, sapa tahu berhasil

    1. Prapto Ari
      21/02/2014 at 12:50

      silakan kawan, semoga berhasil untuk percobaannya 🙂

  7. nandarsunandar
    21/02/2014 at 13:16

    makasih banget buat tutorialnya, kapan2 dicoba 😀

    1. Prapto Ari
      21/02/2014 at 23:27

      ya mas, semoga bermanfaat dan menjadikan inspirasi 🙂

  8. Santri Indigo
    25/02/2014 at 11:11

    waw,.. keren lah,… (y)

    1. Prapto Ari
      01/03/2014 at 23:37

      silakan dicoba mas, untuk blogspot juga bisa ini

  9. 03/08/2014 at 01:45

    saya bingung ini, saya buka edit html saya bingung mau paste di mana itu script, mohon pencerahan.
    buka juga blog saya fathulkhaer.blogspot.com
    #blogwalking

    1. Prapto Ari
      02/09/2014 at 22:18

      maaf mas, kalau untuk blogspot saya kurang begitu paham karena tipikal pengkodeannya agak berbeda

  10. udhi
    20/08/2014 at 01:35

    thanks qyu bang. kunjung balik yah gan..

    1. Prapto Ari
      02/09/2014 at 22:19

      ya, terima kasih kunjungannya sobat

  11. 19/09/2014 at 22:27

    I wwas wondering iif you eveer thought of changing the
    layout of your site? Its very well written; I love what youve got tto say.
    Buut maybe you could a little more in thee way
    of content so people could connect with it better. Yoive got an awful lot of text for only
    having one or two pictures. Maytbe you could space it out better?

    1. Prapto Ari Perwira, S.Pd
      24/09/2014 at 00:16

      Thank you, will do your suggest soon

  12. 20/10/2014 at 09:12

    Hi there! I know this is kind off off topic but I was
    wondering if you knew where I could get a captcha plugin for my comment
    form? I am using the same blog platform
    as yours and I am possessing difficulty finding one particular?
    Thanks a gkod deal!

  13. 17/05/2015 at 17:38

    Terimakasih gan infonya. Langsung dicoba dulu. 😀

    1. Prapto Sragen
      26/05/2015 at 02:06

      oke sama-sama, silakan dicoba dan selamat berkreasi

  14. 31/12/2015 at 13:07

    terimakasih mas infonya, saaya coba dulu ok

  15. 22/08/2016 at 16:16

    Untuk blogger kira2 caranya gimana ya

    1. 11/03/2017 at 00:52

      wah untuk blogger malah belum nemu ya

  16. 07/03/2017 at 21:42

    thanks salm kenal semua

    1. 11/03/2017 at 00:53

      salam kenal kembali juragan

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *