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. Optimasi File wp-config.php
  2. Mempercepat Loading WordPress Dengan WP Widget Cache
  3. Cara Merapikan Keyword Plugin STT2
  4. Cara Membuat Social Media Sharing Tanpa Plugin
  5. Cara Mengganti Sparator Tag dan Category
  6. Cara Menghapus Versi WordPress Pada Plugin Google XML Sitemap Generator
  7. Menampilkan Query Database WordPress
  8. Cara Mempercepat Loading Blog WordPress (Minimize SQL Queries)
  9. Cara Setting Plugin WP Super Cache
  10. Cara Menghapus Logo WP Dan Menu Di Admin Bar
Categories: Optimasi Wordpress ∞ Wordpress Tags: Cara Membuat Dan Menampilkan Favicon Di WordPress ∞ ∞ ∞ ∞
  1. AhSyai
    23-2-2012 at 21:22 | #1

    mantav ni om.. terus untuk cara membuat icon yang gampang pake apa om?? soalnya masih pake plugin ne untuk ganti iconnya..c:D

    Waduh … buat nampilin dan ganti favicon aja harus pakai plugin? heee ….
    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

  2. Peluang Bisnis Baru
    23-2-2012 at 21:28 | #2

    Jadi Pertamax.. :D
    Boleh Juga Di Coba Caranya Nih.. thks 4 share

    Reply

  3. jono
    23-2-2012 at 23:17 | #3

    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

  4. Hari Mulya
    24-2-2012 at 09:00 | #4

    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

  5. Hari Mulya
    24-2-2012 at 11:08 | #5

    Pak Alwi, saya nemu link ini kaplik[dot]com..
    theme nya “hampir sama” dengan punya Pak Alwi…

    Iya nih hampir sama persis saya lihat css-nya full import dari m-alwi.com baik untuk home dan single termasuk bagian komentar, dulu yg punya pernah bilang banyak terinspirasi dari blog m-alwi.com termasuk tampilannya tapi saya belum sempat lihat dan baru sekarang saya lihat dan benar2 terasa seperti di m-alwi.com, mungkin dia masih baru jadi belum tahu tata cara memakai design orang lain, ntar saya bilangin pelan2, satu sisi bangga sih ada yg berminat dg tampilan design blog ini tapi demi menghargai hak cipta dan ciri khas tampilan blog maka masalah kode semestinya tidak diimport persis (salin tempel) tapi mungkin bisa didesign ulang spt warna dll

    Reply

  6. Endi
    24-2-2012 at 19:08 | #6

    makasih banyak mas Alwi, saya baru belajar make WP, & banyak yang saya pelajari lewat blog ini:)

    Reply

  7. dhenycahyoe
    24-2-2012 at 20:06 | #7

    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 spanel

    Salah 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

  8. marsudiyanto
    25-2-2012 at 12:11 | #8

    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

  9. kios herbal
    25-2-2012 at 13:49 | #9

    jadi begitu yachh cara untuk menampilkan favicon untuk wordpress….
    aku juga udah pernah coba tapi hanya ditempelin di blog…

    Reply

  10. kios obat
    25-2-2012 at 13:53 | #10

    mudah juga yach ternyata cara bikin favicon itu….
    makasih banyak yach udah mau ngeshare ilmunya….

    Reply

Comment pages
1 2 3 … 5 2603
4+7=? (Wajib diisi)