Favicon – Create by Yourself – Part 1
Muhammad Adri
mohammed.adri@yahoo.co.id
http://muhammadadri.net
Facebook : mohammed.adri
I. Pendahuluan
Favicon adalah sebuah gambar icon dari sebuah website yang akan muncul pada browser pengguna saat mengunjungi website tersebut.Contohnya Anda bisa lihat favicon pada website http://muhammadadri.net, pada browser yang bergambar icon B2W saya.
Dengan menggunakan favicon ini maka website Anda akan lebih branded dan lebih professional serta akan memudahkan pengunjung untuk bernavigasi jika menggunakan lebih dari satu tab pada browsernya ketika mengakses website-website lainnya selain blog Anda, sehingga tidak akan mudah kehilangan navigasi dari website anda.
Favicon juga akan memberikan identitas atau ciri khas pada blog/ website Anda sehingga akan terlihat perbedaannya dengan blog-blog lainnya asalkan gambar Anda tidak ada yang menyamainya dan memang menggambarkan dari nama domain maupun topik blog Anda.
Saat ini masih banyak kita lihat blog-blog yang tidak menggunakan favicon ini, apa mungkin karena menganggapnya tidak terlalu penting atau memang tidak tahu cara membuatnya, namun percaya atau tidak, favicon bermanfaat untuk membranding blog Anda, apalagi jika itu blog personal Anda, blog make money online atau lainnya yang bisa memberikan kesan pertama bagi visitor baru blog Anda..!!
II. Langkah Pembuatan Favicon
Apakah saat ini blog Anda sudah menggunakan favicon ini? Jika belum, mengapa tidak menggunakannya? untuk cara membuat dan menampilkannya pun tidak terlalu sulit.
Berikut ini cara membuat dan menampilkan favicon untuk blog WordPress Anda
A. Membuat favicon
- Persiapkan sebuah gambar dengan format JPG atau PNG dengan ukuran bujur sangkar dengan ukuran antara 50×50px – 200×200, agar posisi gambar bisa sempurna saat diconvert menjadi file .ico yang akan digunakan untuk favicon blog Anda. Jika anda memiliki sedikti keahliaan menggunakan software Adobe Photoshop, maka anda dapat merancang sendiri gambar favicon Anda. Jika tidak, Anda mendapatkan gambar favicon yang sudah siap pakai dan tinggal download di iconfinder.com
- Setelah gambar untuk favicon siap, langkah selanjutnya adalah menconvertnya menjadi file .ico agar bisa ditampilkan diblog Anda. Caranya silahkan menuju ke http://tools.dynamicdrive.com/favicondan upload file gambar yang akan dibuat menjadi favicon.
- Klik alamat dynamicdrive yang dimaksud di atas, sehingga anda akan berada pada halaman utama web dynamicdrive
- Kemudian dilahkan dibrowse file gambar yang akan digunakan sebagai icon dan lanjutkan dengan mengklik tombol Create Icon
- Kemudian akan diperoleh halaman yang memperlihatkan hasil proses pembuatan icon tersebut
- Klik tombol Download Favicon, untuk mengambil hasil favicon yang telah dibuat.
B. Mengupload Favicon ke Website WordPress
Langkah selanjutnya adalah menempatkan favicon tersebut ke dalam website WordPress anda.
- Login sebagai Admin blog dengan menuju ke alamat http://namadomainand.com/wp-admin, misalnya pada ujicoba ini ditulis alamat http://muhammadadri.net/wp-admin.
- Masukkan username admin dan password anda
- Selanjutnya upload favicon tersebut ke blog Anda menggunakan menu Media – Add New dalam admin dashboard Anda.
- Setelah terupload jangan lupa untuk mengcopy URL file faviconnya karena akan kita gunakan untuk memanggil file ini agar muncul sebagai favicon dibrowser pengguna. Alamat URL yag kita peroleh adalah :
http://muhammadadri.net/wp-content/uploads/2011/11/ favicon.ico
C. Edit Header.php
Selanjutnya kita perlu menempatkan kode ini pada file header.php antara kode tag <head> dan </head> pada theme Anda, seperti informasi yang ditampilkan oleh dynamicdrive
- Oleh sebab itu langkah selanjutnya anda harus masuk ke ControlPanel Admin hosting dari domain anda, misalnya domain kita tulis pada alamat http://namadomainanda.com/cpanel
- Kemudian kliklah navigasi panel, pada menu File Manager, agar anda sampai ke lokasi penyimpanan theme yang saat ini anda aktifkan
- File yang akan kita edit untuk dimasukkan kode favicon adalah file “header.php”, dan silahkan download file ini
- Setelah anda download, silahkan buka file header.php tersebut dan masukkanlah kode berikut ke dalam kode header.php yang berada antara tag <head>…</head>
- Langkah selanjutnya adalah mengupload kembali file header.php melalui File Manager pada Control Panel hosting anda.
- Pilih menu Upload pada dashboard File Manager
- Tentukan lokasi file header.php dengan mengklik tombol Browse
- Kemudian jika proses upload sukses, akan muncul jendela konfirmasi bahwa file tersebut telah ada dan perlu di overwrite, dan jawab dengan YES, agar file yang lama digantikan oleh file header.php yang baru
- Dengan demikian proses upload ulang file header.php telah selesai dilakukanSelanjutnya anda tinggal mengujinya dengan mengunjungi kembali alamat website WordPress anda, sehingga diperoleh hasil berikut ini. Jika tidak muncul berarti itu karena cache dari ISP internet Anda. Solusinya coba refresh halaman dengan menekan CTRL+F5.
Catatan :
Karena kita meletakan langsung secara manual pada file theme WordPress, maka jika Anda melakukan penggantian theme, Anda harus menempatkan ulang kode tersebut pada file theme baru yang Anda gunakan.
Jika ingin lebih simple, Anda bisa juga menggunakan plugin untuk memunculkan favicon pada blog Anda secara otomatis tanpa perlu utak-atik kode file header.php theme Anda. Untuk ini, silahkan search saja pluginnya di direktori plugin blog WordPress Anda dengan kata kunci “Favicon Generator”.
Tutorial selengkapnya silahkan donwnload di sini : adri – Favicon – Create by Yourself
Pada tutorial selanjutnya, akan kita bahas bagaimana membuat sebuah Favicon dengan sedikit sentuhan desain grafis.
Sampai jumpa kembali
Biografi Penulis
Muhammad Adri. Menyelesaikan S1 di Jurusan Teknik Elektronika FPTK IKIP Padang tahun 1999, dan S2 di Jurusan Teknik Elektro Universitas Gadjah Mada Yogyakarta, dengan konsentrasi Sistem Komputer dan Informatika (SKI) tahun 2004. Staf pengajar Teknik Elektronika Fakultas Teknik Universitas Negeri Padang. Kompetensi inti pada bidang Computer Networking and Security, Computer Architecture and Organization, Web-Based Application, Online Learning, Multimedia-Based Instructional Design, dan Knowledge Community. Penulis aktif, sebagai pemakalah dalam berbagai Seminar Nasional, instruktur pada model pembelajaran berbasis Multimedia dan Komputer., IT-Based Education. Memegang Sertifikasi Microsoft, JENI (Java Education Network Indonesia) 1,2,dan 4. Ketertarikan penulis dalam bidang implementasi IT dalam dunia pendidikan, menghantarkan penulis sebagai mahasiswa doktoral Ilmu Pendidikan Pascasarjana Universitas Negeri Padang, terhitung mulai September 2006. Menyelesaikan Ph.D Mentoring Program di Institute of Education, University of London, tahun 2008.