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 Menghapus Logo WP Dan Menu Di Admin Bar
  2. Cara Membuat WordPress Page Number Tanpa Plugin
  3. Cara Membuat Social Media Sharing Tanpa Plugin
  4. Cara Mengoptimasi Halaman Kategori
  5. Cara Merapikan Keyword Plugin STT2
  6. Cara Mengganti Username Dan Password WordPress
  7. Cara Membuat Spoiler
  8. Customisasi Tampilan Tag Cloud
  9. Modifikasi Tampilan Halaman Daftar Isi
  10. Mempercepat Loading WordPress Dengan DB Cache Reloaded
Categories: Optimasi Wordpress ∞ Wordpress Tags: Cara Membuat Dan Menampilkan Favicon Di WordPress ∞ ∞ ∞ ∞
  1. tv online indonesia
    1-4-2014 at 21:39 | #1

    terima kasih banyak bos !!

    Reply

  2. tv online
    1-4-2014 at 21:40 | #2

    sangat membantu !! thanks !…..

    Reply

  3. jam tangan
    1-4-2014 at 21:40 | #3

    akhirnya bisa juga..

    Reply

  4. Rumambay
    2-4-2014 at 12:06 | #4

    makasih mas untuk infonya, alhamdulillah bisa diaplikasikan di blog saya. keep sharing :)

    Reply

  5. Didit PH
    15-8-2014 at 08:48 | #5

    terimakasih gan infonya. Lanjutkan…

    Reply

  6. Cara Jitu
    17-1-2015 at 23:27 | #6

    makasih gan…. ijin nyoba dulu…

    Reply

  7. InfoMenarik.NET
    29-3-2015 at 17:58 | #7

    Dengan fafvicon, blog akan terlihat lebih profesional ya mas?

    Reply

  8. muhammad isra
    21-4-2015 at 14:03 | #8

    icon atau logo pada blog mempunyai ciri tersendiri bagi blog itu sendiri…. setelah saya coba dan berhasil, sekarang blog saya sudah mempunyai logo tersendiri..
    salam sukses selalu min..

    Reply

  9. zerotin
    23-8-2015 at 16:03 | #9

    kalo untuk wp gratisan gimana gan… dulu ane bisa kok sekarang gk bisa.. mohon bantuanya..

    Reply

  10. Listen FM Radios
    29-8-2015 at 02:16 | #10

    nice info about link rel, I realy like this and learn many this

    Reply

Comment pages
1 … 3 4 52603
3+5=? (Wajib diisi)