Membuat Favicon Bergerak untuk Blog

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

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 Komentar

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

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

  1. 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?

  2. 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!

Leave a Reply

Alamat email Anda tidak akan dipublikasikan.


*