Home » Optimasi Wordpress » Wordpress » Cara Membuat Dan Menampilkan Favicon Di WordPress

Cara Membuat Dan Menampilkan Favicon Di WordPress

23 Feb. 201253 comments
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 :

  1. Kadang-kadang tidak bisa tampil di beberapa jenis browser seperti Internet Explorer 8 ke bawah.
  2. Favicon tidak tampil ketika user sedang login karena fungsi rel="shortcut icon" atau rel="icon" hanya ditempatkan di file header.php yang ada di folder theme, kecuali anda juga memasukkan fungsi rel="shortcut icon" atau rel="icon" di file header.php yang ada di folder wp-admin, namun hal ini akan merepotkan ketika ada update wordpress atau ganti theme.
  3. Favicon tidak tampil ketika sedang membuka halaman feed dari blog (http://domain.com/feed)
  4. Memerlukan settingan khusus untuk shortcut icon, website icon, URL icon atau bookmark icon.
  5. Menambah jumlah http request.
  6. Menambah ukuran sebuah halaman.
  7. Menambah beban loading walau cuma sekitar 0, sekian detik.
  8. Menambah jumlah cookie dan cache.
  9. Menambah bandwidth baik dari sisi server hosting maupun untuk user.
  10. 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 :

  1. 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).
  2. 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.
  3. 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 :
  4. <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" />
  5. Kemudian hapus code tersebut dari file header.php dan simpan.
  6. 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 :

  1. Bisa tampil di hampir semua browser baik modern atau jadul semacam Internet Explorer 8 ke bawah, versi desktop dan mobile.
  2. Bisa tampil ketika sedang login, dan tidak perlukan memasukkan fungsi rel="shortcut icon" atau rel="icon" di file header.php yang ada di folder wp-admin.
  3. Favicon akan tampil ketika sedang membuka halaman feed dari blog (http://domain.com/feed), Google Reader dan lain-lain.
  4. Tidak memerlukan settingan khusus untuk shortcut icon, website icon, URL icon atau bookmark icon.
  5. Mengurangi jumlah http request.
  6. Mengurangi ukuran sebuah halaman.
  7. Mengurangi beban loading alias akan mempercepat loading walau cuma sekitar 0,sekian detik.
  8. Mengurangi jumlah cookie dan cache.
  9. Mengurangi bandwidth.
  10. Menaikkan skor pagespeed, firebug, Yslow dan sejenisnya seperti www.gtmetrix.com dan lain-lain.
Mudah-mudahan artikel tentang Cara Membuat Dan Menampilkan Favicon Di WordPress ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Cara Memblokir External Requests di Dashborad
  2. Daftar Ping Service WordPress
  3. Cara Membuat Tombol Go Top/Back To Top
  4. Cara Pasang Adsense Di Bawah Judul Postingan
  5. Mengenal Kode Widget Sidebar WordPress
  6. Cara Menggunakan File CSS Yang Berbeda Untuk Home, Single Dll
  7. Mempercepat Loading WordPress Dengan DB Cache Reloaded
  8. Cara Membuat Tampilan Postingan Yang Berbeda-beda
  9. Cara Setting Plugin Platinum SEO Pack
  10. Mempercepat Loading WordPress dengan Zlib Compression
  1. 3-12-2012 at 11:02 | #1

    mas..trimkasih atas ilmunya…

    Reply

  2. 18-12-2012 at 00:50 | #2

    akhirnya nemu juga.. thanks masbro trik nya,,.

    Reply

  3. 27-12-2012 at 21:25 | #3

    Udah lama pengen bikin favicon cuma gak tau caranya. Trims ilmunya bos, nanti gue praktekkin deh.

    Reply

  4. 31-12-2012 at 16:37 | #4

    nah ini yang saya butuhkan…selama ini mumet tanya2….thanks ya mas…mau saya terapkan dulu…

    Reply

  5. 23-2-2013 at 10:34 | #5

    akhirnya ketemu juga nih trik, thanks ya bro..

    Reply

  6. 8-5-2013 at 21:39 | #6

    makasih mas bro.. ganti juga favicon ane :)

    Reply

  7. 22-7-2013 at 21:15 | #7

    makasih moga bisa saya coba..

    Reply

  8. 6-11-2013 at 09:32 | #8

    klo pakai themes premium,,pasang favicon tinggal ambinl gambar aja pak,,but nice tutorial..

    matur nuwun. :)

    Reply

  9. 26-12-2013 at 01:58 | #9

    wah,sy bolak balik msh gagal juga bang. ini msh cari cara lain..

    Reply

  10. 5-3-2014 at 20:14 | #10

    mantap gan, akhirnya saya ketemu dengan artikel yang pas punya agan, thumb up..

    jgn lupa mampir kemari ya gan :D

    http://blog.adnoya.com

    Reply

Comment pages
2+6=? (Wajib diisi)