Cara Membuat Dan Menampilkan Favicon Di WordPress

23 Feb. 201221 comments

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.

Artikel Yang Mungkin Berkaitan :

  1. Menghemat Quota Bandwidth dengan HTTP Compression
  2. Cara Melindungi Gambar Dari Pencurian Bandwidth
  3. Cara Membuat WordPress Page Number Tanpa Plugin
  4. Cara Membuat Social Media Sharing Tanpa Plugin
  5. Bypass Template Path dan Stylesheet Path
  6. Cara Mengganti Sparator Tag dan Category
  7. Cara Memblokir External Requests di Dashborad
  8. Menampilkan Related Post Tanpa Plugin
  9. Membuat Tombol Facebook Like Tanpa Plugin
  10. Membuat WordPress Versi Mobile Dengan W3 Total Cache
Categories: Optimasi Wordpress ∞ WordpressTags: ∞ ∞ ∞
  1. Ichink
    26-2-2012 at 15:36 | #1

    Kalo untuk menambah favicon masih menggunakan fasilitas bawaan theme, belum sempet nengok file header.php, tapi di dashboard/posisi login sudah nampak iconnya.

    Reply

  2. djawa
    26-2-2012 at 22:20 | #2

    aku sempat bingung juga gonta-ganti favicon., :D

    Reply

  3. khasiat manggis
    28-2-2012 at 15:18 | #3

    terimakasih atas semua informasinya,,,,
    info yang sangat bermanfaat,,,,

    Reply

  4. Obat Kanker Darah
    1-3-2012 at 11:24 | #4

    wah,,rada ribet juga ya pak,,hehehe,,,bisa nggak saya coba,,
    oya kalo buat blogspot gimana pak?

    Nggak ribet kok, karena saya bahas secara mendetail aja jadi kesannya panjang, padahal intinya cuman buat file favicon.ico upload ke root server hapus kode rel="shortcut icon" atau rel="icon" di file header.php, selsai.

    Untuk blogspot pernah saya bahas di sini : Cara Mengganti Icon Pada Address Bar Blogspot

    Reply

  5. Rianto
    3-3-2012 at 03:45 | #5

    Terima kasih tutorial nya mas bro… ijin buka praktek dulu…

    Reply

  6. Rizqy Hidayat
    13-3-2012 at 11:00 | #6

    Bisa juga dengan teknik hook mas.. Tambahkan di function.php

    function custom_favicon() { ?>
    <link rel="shortcut icon" href="/favicon.png" >
    <?php }
    add_action('wp_head', 'custom_favicon');

    Oh iya, saran saya sih, lebih baik http://yourdomain.com/wp-content/themes/namathemes diganti dengan menggunakan fungsi di wp bloginfo('stylesheet_directory') menjadi:

    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />

    Biar leblih ringkas :)

    Terima kasih tambahannya Mas Rizqy, cara ini menurut saya malah lebih ribet karena harus buka dan edit file functions.php, disamping itu dengan adanya penambahan fungsi di wp bloginfo('stylesheet_directory') malah akan menambah jumlah http request, kalau cara saya di atas malah sangat simpel, cuman buat file favicon.ico upload ke root server hapus kode rel="shortcut icon" atau rel="icon" di file header.php, selesai.

    Reply

  7. fadli
    15-4-2012 at 00:07 | #7

    ribet bener coy ,,,,,,, heheheh susah nya belajar wp ,,, ampun dj ,

    Ribet di mananya, cuman buat file favicon.ico upload ke root server hapus kode rel="shortcut icon" atau rel="icon" di file header.php, selesai.

    Reply

  8. Raja Mesin Kasir
    17-5-2012 at 13:50 | #8

    aduh punya ane kok gagal terus gan?

    Reply

Comment pages
1 22603
3+7=? (Wajib diisi)