Anda disini: M Jurnal » Wordpress » Cara Mengganti Logo dan Favicon di WordPress Lengkap

Cara Mengganti Logo dan Favicon di WordPress Lengkap

Panduan ini akan mengajarkan Anda cara mengganti Logo dan Favicon Website yang menggunakan WordPress. Namun sebelum melanjutkan, ketahui dahulu bahwa logo dan Favicon itu berbeda.

Logo adalah sebuah gambar (bisa berupa lukisan / sketsa / tulisan) yang menjadi identitas pihak tertentu, baik itu organisasi, produk, bisnis, perusahaan, daerah, negara dsb.

Ads

Sedangkan Favicon (favorite icon) merupakan sebuah ikon kecil yang unik dan juga merupakan identitas dari sebuah website.

Dalam website, logo biasanya ada di bagian header. Sedangkan Favicon biasanya ada di Tab Browser. Mudah-mudahan gambar ini bisa menjelaskan perbedaan logo dan Favicon:

Perbedaan Logo dan Favicon website WordPress

Note: Khusus untuk Favicon: Selain akan tampil di Tab Browser, Favicon juga akan tampil di halaman hasil pencarian mobile (seperti Google Search). Misalnya seperti ini:

Contoh Favicon Website di Hasil Pencarian Google

Lihat, Favicon Web M Jurnal juga tampil di hasil pencarian. Sama seperti website lainnya…

Saya yakin Anda sudah tahu Fungsi logo dan Favicon dalam Website sebenarnya untuk memudahkan pengguna mengingat merek bisnis Anda. Oleh karena itu Panduan ini Saya susun sebagai tahap awal dalam pembuatan website menggunakan WordPress.

Note: Cara mengganti Logo dan Favicon di Website WordPress tidak selalu sama persis. Proses nya akan tergantung Theme apa yang Anda gunakan. Namun sebagian besar prosesnya akan sama saja. Dalam contoh ini, Saya menggunakan Theme Astra.

Ads

Mari kita mulai…

Persiapan Sebelum Mengganti Logo dan Favicon WordPress

Khusus untuk logo, setiap theme WordPress memiliki syarat resolusi minimum (terkadang juga ada resolusi maksimal). Saran Saya, ikuti syarat-syarat yang sudah ditentukan untuk meminimalisir kesalahan.

Misalnya untuk Theme Astra, ukuran logo yang disarankan adalah 180x60px. Ini adalah ukuran minimal. Anda boleh-boleh saja menggunakan ukuran yang lebih besar tapi dengan rasio yang sama.

Misalnya logo dengan ukuran 360x120px. Ingat, rasionya sama dengan rasio minimal (180x60px).

Untuk Favicon, gunakan resolusi 512x512px (berbentuk persegi). Ini juga ukuran minimal. Lebih besar juga boleh.

Sementara untuk Format, umumnya menggunakan JPG, PNG, GIF atau SVG.

diskon-hosting

Oh ya, jika belum tahu cara optimasi gambar SVG, lebih baik gunakan format PNG saja. Ini rekomendasi terbaik untuk pemula.

Selain itu, upayakan size (ukuran) file gambar tidak lebih dari 50kb. Semakin kecil semakin bagus. Tapi jangan sampai blur. Ini juga berlaku untuk semua gambar yang ada di website Anda.

Untuk mengompres gambar, Anda bisa menggunakan tools online seperti TinyPNG.

SIZE GAMBAR (SEPERTI LOGO) YANG BESAR AKAN MEMPERBURUK PERFORMA WEBSITE

ROLAN MARDANI

Dampaknya yaa loading Website Anda bakal jadi lebih lama (lemot). Coba pikirkan, adakah orang yang suka menunggu ? Saya rasa tidak ada.

Terus jika website WordPress Anda membutuhkan waktu lebih dari 3 detik cuma untuk nge-loading logo saja, apakah pengguna akan menunggu ? Pikirkan sampai kesana juga…

Jika bahan sudah siap… Sekarang, ganti logo website Anda…

Berikut cara mengganti logo di header Website yang menggunakan WordPress:

  1. Login ke Dashboard Admin WordPress. Jika belum tahu, silahkan pelajari SUB-BAB Login Dashboard WordPress.
    Login Dashboard Admin WordPress
  2. Arahkan kursor ke Menu Tampilan, kemudian klik Sesuaikan.
    Cara mengganti Logo dan Favicon di Website WordPress
  3. Klik Menu Header Builder.
    Buka Menu Header Builder
  4. Klik Site Identity & Logo.
    Klik Site Identity dan Logo
  5. Pilih Logo.
    Upload Logo di WordPress
    Jika Anda belum mengupload gambar logo, klik Unggah berkas > Pilih Berkas, kemudian cari dan upload logo Anda.
  6. Tentukan Teks Alt. Ini sebenarnya masuk tahap optimasi (Selengkapnya bisa Anda pelajari pada Pusat Panduan SEO M Jurnal).
    Buat Teks Alt untuk gambar
    Untuk logo, masukkan saja teks “Logo Nama Brand”. Misalnya Saya menggunakan ini untuk M Jurnal: “Logo M Jurnal”. Selanjutkan klik Pilih.
  7. Potong Logo / Tidak (Optional).
    Potong gambar atau tidak
    Atur sesuai keinginan Anda. Jika tidak ingin memotong logo, klik saja lewati pemangkasan.
  8. Atur Lebar Logo. Terkadang logo akan terlihat lebih besar atau kecil dari yang diinginkan. Silahkan atur lebar logo (berdasarkan pixel). Saya menggunakan 250px untuk desktop, 200px untuk tablet dan 150px untuk mobile.
    Tentukan Ukurang logo untuk perangkat desktop, tablet dan mobile
    Untuk mengganti ke preview desktop / tablet / mobile, klik saja 3 icon yang ada dibawah.
  9. Tampilkan / Sembunyikan judul Situs. Biasanya theme WordPress akan menampilkan judul situs bersamaan dengan logo.
    Tampilkan / Sembunyikan Judul Situs bersama logo di WordPress
    Nilai sendiri… Apakah bagus atau tidak. Jika tidak, nonaktifkan “Tampilkan Judul Situs”.
  10. Terbitkan Perubahan Logo. Klik Terbitkan untuk mengkonfirmasi perubahan desain website Anda.
    Klik terbitkan untuk mengganti logo website di WordPress

Note: Perubahan apapun yang Anda lakukan tidak akan mengubah desain website sebelum Anda klik Terbitkan.

Cara Mengganti Favicon di WordPress

Untuk mengganti Favicon, silahkan ikuti tahap-tahap berikut:

Cara mengganti favicon Website menggunakan WordPress
  1. Buka menu site identity & logo (ulangi tahap 1 – 5 pada cara mengganti logo diatas)
  2. Scroll kebawah kemudian Pilih Ikon Situs.
  3. Pilih Favicon Website Anda (Upload jika belum). Tentukan Teks Alt, abaikan pemangkasan jika favicon berbentuk persegi. Kemudian klik terbitkan.

Untuk melihat hasilnya, silahkan buka URL website Anda https://namadomain.com/, kemudian lihat Tab Browser. Hasilnya akan tampak seperti ini:

Cara mengganti logo dan favicon website di WordPress

Note: Jika logo dan favicon tidak muncul, silahkan gunakan gambar lain. Sesuaikan size gambar sesuai dengan syarat yang ditentukan theme.

Next: Setelah mengganti Logo dan Favicon di WordPress, Anda akan belajar cara menyesuaikan Widget. Silahkan gunakan pintasan panduan berikut:

Pintasan Panduan Desain dan Tampilan WordPress

SUB-BAB Sebelumnya: Optimasi Permalink.

  1. Template: 3 Cara install Tema WordPress dan mengganti tampilan website.
  2. Favicon & Logo: (Anda Disini).
  3. Menu: Cara membuat menu dan dropdown sub menu website WordPres.
  4. Header: Cara mengubah desain header theme WordPress + Contoh Real Website Demo.
  5. Content & Sidebar: Mengatur Area Konten dan Sidebar WordPress + 4 Tips Optimasi Sidebar.
  6. Footer: Cara mengubah desain footer theme WordPress (mengubah copyright, menambahkan menu footer, icon social dan mengatur section footer).
  7. Widget WordPress: Cara membuat dan mengatur Widget (di Header, Sidebar, dan Footer).
  8. Optimasi Widget: 7 Teknik Optimasi dan memaksimalkan Widget Website WordPress.

SUB-BAB Berikutnya: Plugin WordPress.


Apakah Panduan ini Membantu Menyelesaikan Permasalahan Anda ?

Rolan Mardani

Traktir Saya secangkir kopi supaya kuat begadang untuk membuat konten-konten Panduan yang berkualitas dan membantu menyelesaikan permasalahan Anda.

Bantu Orang Lain... Share Panduan ini:

Yakin Ga Mau Komen ?