Cara Membuat Dan Menampilkan Favicon Di WordPress
Favicon adalah icon yang muncul pada address bar suatu website atau blog dan kadang-kadang merupakan sebagai logo atau brand dari website atau blog tersebut. Selain itu favicon juga dikenal sebagai shortcut icon, website icon, URL icon atau bookmark icon.
Awalnya favicon adalah sebuah file yang bernama favicon.ico dan ditempatkan di root direktori dari sebuah website, dan karena file favicon ditempatkan di root direktori maka penulisan urlnya adalah http://domain.com/favicon.ico
. Pada bulan Maret 1999 Microsoft merilis Internet Explorer 5 yang didukung Favicon untuk pertama kalinya. Selain itu favicon tersebut juga digunakan di Internet Explorer sebagai bookmark icon dan kemudian digunakan sebagai icon URL di address bar, namun cara seperti itu untuk saat ini sudah tidak berlaku di browser terkini karena hampir semua browser modern sudah mendukung favicon tanpa bookmark.
File favicon biasanya dibuat dalam format ico (favicon.ico) namun bisa juga dibuat dalam format selain ico misalnya png, gif dan lain-lain, bahkan sebenarnya bisa juga dibuat dalam format gif dengan efek animasi (tidak disarankan karena akan memberatkan loading blog), nama filepun sebenarnya bisa juga diganti dengan nama lain, namun jika ingin mengikuti aturan awalnya ya kasih saja dengan nama favicon.ico.
Untuk wordpress yang self hosting, file favicon biasanya ditempatkan di folder theme atau folder tersendiri. Dan beberapa code yang biasa digunakan untuk menampilkan favicon kira-kira seperti ini :
<link rel="shortcut icon" type="image/x-icon" href="http://yourdomain.com/wp-content/themes/namathemes/favicon.ico" sizes="16x16" />
<link rel="icon" type="image/x-icon" href="yourdomain.com/wp-content/themes/namathemes/favicon.ico" sizes="16x16" />
<link rel="shortcut icon" href="http://yourdomain.com/wp-content/themes/namathemes/favicon.ico" />
<link rel="icon" type="image/png" href="http://yourdomain.com/wp-content/themes/namathemes/image.png" />
<link rel="icon" type="image/gif" href="http://yourdomain.com/wp-content/themes/namathemes/image.gif" />
Kode tersebut biasanya ditempatkan di antara tag <head> </head>
di file header.php dari theme yang digunakan.
Cara tersebut menurut saya sebenarnya ada kekurangannya di antaranya :
- Kadang-kadang tidak bisa tampil di beberapa jenis browser seperti Internet Explorer 8 ke bawah.
- Favicon tidak tampil ketika user sedang login karena fungsi
rel="shortcut icon"
ataurel="icon"
hanya ditempatkan di file header.php yang ada di folder theme, kecuali anda juga memasukkan fungsirel="shortcut icon"
ataurel="icon"
di file header.php yang ada di folder wp-admin, namun hal ini akan merepotkan ketika ada update wordpress atau ganti theme. - Favicon tidak tampil ketika sedang membuka halaman feed dari blog (http://domain.com/feed)
- Memerlukan settingan khusus untuk shortcut icon, website icon, URL icon atau bookmark icon.
- Menambah jumlah http request.
- Menambah ukuran sebuah halaman.
- Menambah beban loading walau cuma sekitar 0, sekian detik.
- Menambah jumlah cookie dan cache.
- Menambah bandwidth baik dari sisi server hosting maupun untuk user.
- Mengurangi nilai skor pagespeed, firebug, Yslow dan sejenisnya seperti www.gtmetrix.com dan lain-lain.
Cara setting dalam menampilkan favicon di wordpress ala m-alwi.com :
Gara-gara banyaknya kekurangan dari cara-cara tersebut di atas (cara standard) akhirnya saya mencoba-coba cari cara agar walaupun kita tetap menggunakan favicon tapi tidak menambah jumlah http request, tidak menambah beban loading, bisa tampil di semua browser, feed blog dll. Setelah melakukan beberapa kali uji coba akhirnya saya temukan satu cara yang sangat sangat mudah dan gampang tapi hasilnya “ajib”.
Berikut ini langkah-langkahnya :
- Buat file favicon dalam format ico dengan ukuran kira-kira antara 16×16 px sampai 32×32 px bisa menggunakan program pengolah gambar seperti Adobe Photoshop atau bisa juga memanfaatkan layanan pembuat file favicon.ico secara online dan gratis (favicon.ico Generator).
- Kemudian upload file favicon.ico di root direktori website/blog, misalnya jika diasumsikan wordpress anda diinstall di root direktori maka tempatkan file favicon.ico di direktori
/public_html
(untuk Cpanel) atau di direktori/sites/namadomain.com/www
(untuk Spanel). Atau jika sebelumnya sudah punya file favicon.ico yang ditempatkan di folder theme yang digunakan atau di folder lain silahkan pindahkan atau copy file tersebut ke root direktori hosting. - Kemudian buka file header.php dari theme yang digunakan (bisa lewat dashboard admin, Cpanel atau FTP) kemudian cari kode yang biasa digunakan untuk memanggil file favicon.ico seperti beberapa contoh berikut ini :
<link rel="shortcut icon" type="image/x-icon" href="http://yourdomain.com/wp-content/themes/namathemes/favicon.ico" sizes="16x16" />
<link rel="icon" type="image/x-icon" href="yourdomain.com/wp-content/themes/namathemes/favicon.ico" sizes="16x16" />
<link rel="shortcut icon" href="http://yourdomain.com/wp-content/themes/namathemes/favicon.ico" />
<link rel="icon" type="image/png" href="http://yourdomain.com/wp-content/themes/namathemes/image.png" />
<link rel="icon" type="image/gif" href="http://yourdomain.com/wp-content/themes/namathemes/image.gif" />
- Kemudian hapus code tersebut dari file header.php dan simpan.
- Sekarang silahkan buka halaman blog anda dan jangan lupa tekan F5, atau jika perlu hapus dulu cache yang ada di server (jika anda menggunakan plugin cache dan sejenisnya) dan hapus juga cache browser. Lihat hasilnya di berbagai jenis browser apakah favicon anda sudah muncul.
Beberapa kelebihan dari cara ini :
- Bisa tampil di hampir semua browser baik modern atau jadul semacam Internet Explorer 8 ke bawah, versi desktop dan mobile.
- Bisa tampil ketika sedang login, dan tidak perlukan memasukkan fungsi
rel="shortcut icon"
ataurel="icon"
di file header.php yang ada di folder wp-admin. - Favicon akan tampil ketika sedang membuka halaman feed dari blog (http://domain.com/feed), Google Reader dan lain-lain.
- Tidak memerlukan settingan khusus untuk shortcut icon, website icon, URL icon atau bookmark icon.
- Mengurangi jumlah http request.
- Mengurangi ukuran sebuah halaman.
- Mengurangi beban loading alias akan mempercepat loading walau cuma sekitar 0,sekian detik.
- Mengurangi jumlah cookie dan cache.
- Mengurangi bandwidth.
- Menaikkan skor pagespeed, firebug, Yslow dan sejenisnya seperti www.gtmetrix.com dan lain-lain.
mantav ni om.. terus untuk cara membuat icon yang gampang pake apa om?? soalnya masih pake plugin ne untuk ganti iconnya..c:D
Untuk membuat favicon (format ico) bisa pakai Adobe Photoshop – save as ICO kalau fitur save as ICO belum ada install aja pluginnya (silahkan googling banyak yg gratis) atau bisa juga memanfaatkan layanan pembuat file favicon.ico secara online dan gratis (favicon.ico Generator).
Reply
AhSyai Reply:24-02-2012 at 01:39
hehehe..maklum om kurang gitu ngerti pemrograman.. :D
oke cip2.. dicoba bikin icon dulu.. :D
Reply
Jadi Pertamax.. :D
Boleh Juga Di Coba Caranya Nih.. thks 4 share
Reply
kalau mengganti profile picture di WP selfhosting gmn gan?
kok cari2 tp ga dpt2 jg ya. ada tp harus pakai plugin ni gan.
solusi tanpa plugin gmn ni gan?
Reply
makasih Pak Alwi,
sebenarnya seLama ini sudah menempatkan favicon di public_html, tapi masih pake code di header
sekarang tinggal hapus code nya aja… :D
Reply
Pak Alwi, saya nemu link ini kaplik[dot]com..
theme nya “hampir sama” dengan punya Pak Alwi…
Reply
makasih banyak mas Alwi, saya baru belajar make WP, & banyak yang saya pelajari lewat blog ini:)
Reply
hemm bang alwi apa gak ada yg salah tuh untuk di spanel? saya udah mencoba tapi tidak berhasil, bahkan di localhost juga, apa gak ada script yg di tambahkan untuk di root
/sites/namadomain.com/www
soalnya saya juga pengguna spanelSalah dimananya? untuk Spanel rootnya ya di path ini :
/sites/namadomain.com/www
jika pakai FTP cara bukanya dari root Spanel buka folder /sites kemudian klik/buka folder www.domain.com (ingat yg pakai www) kemudian klik/buka folder /www dan nantinya path-nya/sites/namadomain.com/www
, itulah root dari hosting blog kita, yg Spanel lewat browser juga gak jauh beda caranya malah ada keterangan root untuk pemilik dan group di bagian folder/direktori/sites/namadomain.com/www
Setelah saya selidik ternyata errornya di file favicon.ico yg ada di hosting Mas Deny (cuman ada nama filenya doang) silahkan buka pakai Firefox dg alamat : http://denyekawicahyo.com/favicon.ico, isi favicon.ico kosong (jumlah ukuran file 0kb) bisa juga dicek pakai Chrome : http://denyekawicahyo.com/favicon.ico nanti akan terdownload scr auto silahkan dicek isi file favicon.ico yg terdownload tadi, isinya file-nya kosong (0kb)
Reply
dhenycahyoe Reply:26-02-2012 at 06:59
hemm iya bang, saya gak mudeng tadi bacanya, tapi sekarang saya coba terapkan lagi, akan tetapi kok kalau di Firefox masih belum muncul padahal cache pada browser sudah saya hapus, dan icon tersebut cuma muncul/tampil di Chrome saja, hehe..
Reply
dhenycahyoe Reply:26-02-2012 at 13:10
bang lapor, saya sudah berhasil menerapkan artikel di atas, ternyata cache blog saya yg membuat icon tersebut tidak muncul, saya sendiri untuk cache tidak menggunakan plugin, jadi harus menghapus secara manual pada hosting-nya :)
Siippp ….
Reply
Sama seperti HaMul, saya juga selama ini pakai kode di header.
Setelah baca postingan ini, langsung upload icon dan menghapus kode yg di header.
(dulunya malah pakai plugin)
Reply
jadi begitu yachh cara untuk menampilkan favicon untuk wordpress….
aku juga udah pernah coba tapi hanya ditempelin di blog…
Reply
mudah juga yach ternyata cara bikin favicon itu….
makasih banyak yach udah mau ngeshare ilmunya….
Reply