Cara membuat logo website favicon di blog wordpress

Gambar favicon adalah logo website kecil yang terletak disebelah kiri alamat url domain pada browser, logo tersebut muncul jika halaman situs sudah terbuka sempurna alias sudah tuntas loadingnya. Cara membuat logo website favicon di blog wordpress cukup mudah, caranya perlu menyesuaikan dengan blog kita apakah gratisan di wordpress.com atau menggunakan hosting sendiri, berikut langkah yang bisa dilakukan

 

favicon wordpess

favicon wordpess

Cara membuat gambar favicon

  • Kita bisa menggunakan website pembuat favicon online seperti www.favicon.cc
  • atau memakai software pengolah gambar seperti pothoshop, corel draw, microsoft paint, atau yang lainya.
  • Hasilnya bisa berupa file .ico, png, atau gif dengan ukuran persegi empat 16px x 16px.

Contoh gambar logo favicon

ini logo website ilmusipil.com berukuran 180 pixels x 180 pixels

logo ilmusipil

logo ilmusipil

kemudian diperkecil ke ukuran 16pixels x 16pixels maka jadilah gambar favicon

  • favicon format .ico atau .png tidak bisa bergerak = favicon.ico
  • favicon format .gif bisa dibuat animasi atau bergerak = favicon

Memasang favicon di blog gratis (….).wordpress.com

  1. Masuk ke akun wordpress.com
  2. Pada panel admin blog kita, klik menu Setting –> General, atau jika dalam bahasa indonesia Pengaturan –> umum.
  3. Disebelah kanan ada alat untuk upload gambar / ikon blog. klik Browse untuk memilih file gambar di komputer yang akan kita jadikan sebagai ikon blog.

    cara pasang favicon di blog wordpress com

    cara pasang favicon di blog wordpress com

  4. Lalu klik Upload atau Unggah Gambar.
  5. Lalu crop / pangkas gambar sesuai kebutuhan.

    crop gambar favicon wordpress

    crop gambar favicon wordpress

  6. Jika berhasil maka gambar tersebut sudah muncul sebagai favicon.

    berhasil pasang favicon wordpress

    berhasil pasang favicon wordpress

Memasang favicon di blog dengan CMS wordpress self hosting

Secara default beberapa theme wordpress sudah otomatis memunculkan favicon ketika kita upload file favicon.ico ke ditektori utama website (/public_html/). jika tidak muncul, maka perlu diatur secara manual, caranya sebagai berikut

  1. Upload file Favicon yang sudah kita buat sebelumnya, taruh di direktori file hosting, terserah dimana saja, asal tahu alamat link gambar tersebut.
  2. Edit theme header.php melalui panel admin wordpress atau File Manager pada Control panel hosting.
  3. Copy salah satu kode berikut menyesuaikan dengan jenis file favicon yang kita buat, apakah ico, png, atau gif. dan ubah alamat link ( yang berwarna merah) sesuai tempat dimana kita mengupload gambar. Jika pakai gambar ICO  <link rel=”shortcut icon” href=”http://ilmusipil.com/favicon.ico” />
    <link rel=”icon” type=”image/vnd.microsoft.icon” href=”http://ilmusipil.com/favicon.ico” />Jika pakai gambar PNG

    <link rel=”icon” type=”image/png” href=”http://ilmusipil.com/favicon.png” />

    Jika pakai gambar GIF

    <link rel=”icon” type=”image/gif” href=”http://ilmusipil.com/favicon.gif” />

    Copy salah satu kode diatas sesuai format gambar yang akan digunakan sebagai favicon apakah .ico,png, atau gif.

  4. Paste di header.php pada tema wordpress yang kita gunakan, taruh dibagian atas sebelum </head>
  5. Klik saved atau Update File.
  6. Sampai disini kita sudah berhasil memasang favicon, jika belum muncul maka browser yang digunakan entah itu mozila fire fox, crhome, internet explorer atau yang lainya perlu dibersihkan dulu dengan cara “clear recent history”, dilanjutkan dengan restart browser lalu coba akses kembali blog yang sudah tepasang favicon.

Memasang favicon menggunakan plugin wordpress

Kita juga bisa memanfaatkan perangkat plugin seperti Favicon XT-Manager, Quick Favicon, Multicons [ Multiple Favicons ] dan yang lainya. tinggal install di panel admin wordpress kemudian melakukan pengaturan sesuai format plugin.

Mudah kan, hendaknya kita buat sebagus mungkin, karena favicon bisa menggambarkan bagaimana kualitas  sebuah blog.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.