Skip to main content
Menu

2 Cara Mengganti Dan Memasang Favicon Blog

2 Cara Mengganti Dan Memasang Favicon Blog

2 Cara Mengganti Dan Memasang Favicon Blog - Selain tampilan, salah satu identitas sebuah blog adalah Logo dan selain logo yang menjadi ciri khas sebuah blog adalah icon blog yang disebut sebagai favicon

Baca Juga

2 Cara Mengganti Dan Memasang Favicon Blog - Selain tampilan, salah satu identitas sebuah blog adalah Logo dan selain logo yang menjadi ciri khas sebuah blog adalah icon blog yang disebut sebagai favicon. Favicon dan logo pada blog sebenarnya sama tapi beda tempat dan penggunaan dan tentu keduanya sama-sama memiliki tampilan gambar yang sama namun fungsi kedua gambar ini berbeda. Jika Logo digunakan sebagai identitas atau branding, namun untuk favicon yang sebagai ikon blog atau website yang muncul pada address bar laman web dan merupakan logo dari laman web tersebut.

2 Cara Mengganti Dan Memasang Favicon Blog
Ukurannya yang kecil tidak bisa membuat favicon ditampilkan secara langsung pada halaman blog, sedangkan logo bisa ditampilkan secara langsung karena ukurannya yang lebih besar. Namun sebuah logo tidak bisa digunakan pada tampilan dimana favicon dipasang tapi sebuah logo tetap bisa ditampilkan sebagai identitas sebuah blog. Perhatikan beberapa tampilan logo dan favicon dibawah ini yang kami ambil dari tampilan pada desktop dan pada ponsel serta tampilan pada share link yang menampilkan logo dari sebuah blog:

Tampilan logo blog saat link blog di share di sosial media:
favicon blog

Tampilan logo blog tidak tampil di berada browser ponsel:
mengganti favicon blog

Tampilan favicon blog di bar address ponsel:
cara memasang favicon blog

Ketiga gambar diatas adalah tampilan-tampilan favicon yang di akses menggunakan ponsel dan share link pada Whatsapp. Dan jika favicon ini tidak dipasang atau diganti maka icon bar adress akan menggunakan favicon dari Blogger atau tanpa memiliki favicon alias blank. Perhatikan contoh tampilan favicon default berikut ini:

Favicon Blog

Dan bandingkan dengan favicon yang digunakan blog ini atau yang ada pada gambar ditas. Tentu dengan memiliki dan menggunakan favicon sendiri akan membuat tampilan blog lebih baik. Lantas bagaimana cara mengganti dan memasang favicon blog?

2 Cara Mengganti Dan Memasang Favicon Blog

Jika Anda ingin mengganti favicon blog, ada 2 cara yang bisa dilakukan yaitu:
Cara Pertama:
  1. Siapkan dulu gambar dengan ekstensi png atau ico dengan ukuran 128x128 atau tidak lebih dari 100 KB. Kami membuat sendiri icon ini menggunakan Photoshop
  2. Selanjutnya buka menu Tata Letak di dashboard blogger Anda dan pilih kolom Favicon dan klik Edit
    memasang favicon blog
  3. Upload gambar icon yang telah dibuat sebelumnya dengan cara klik tombol Pilih >> Upload dan Simpan
    Mengganti favicon Blog
  4. Selesai
Untuk melihat hasilnya, silahkan reload halaman blog Anda. Jika favicon di address bar belum tampil, tunggu beberapa jam lagi. Jika icon masih belum juga tampil, gunakan cara kedua berikut ini:

Cara Kedua:
  1. Buka menu Tema (Template) yang ada dihalaman dashboar blog Anda, lalu klik Edit HTML
  2. Cari kode berikut ini:
    <link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
    Jika tidak ada kode diatas, salin saja kode tersebut didalam kode meta tag blog atau dibawahnya beberapa kode setelah kode <head>
  3. Salin kode berikut tepat dibawah kode no. 2
    <link href='https://lh3.googleusercontent.com/-818i4wRv3F8/XDpjan5LYnI/AAAAAAAAAWs/czD17EyD9qIB22qvtXTkd7-bW1-SR0o0gCLcBGAs/logo.jpg' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
  4. Simpan
Keterangan:
Ganti kode yang berwarna merah dengan kode link gambar logo blog Anda.

Untuk melihat hasilnya, reload atau refresh halaman blog Anda. Dan sekarang blog Anda sudah memiliki icon bar yang sesuai dengan logo blog. Untuk cara kedua pada No. 3 untuk menampilkan shortcut logo blog dan favicon karena pengalaman kami, jika kode shortcut ini tidak terpasang, kadang favicon juga tidak tampil seperti yang kami tampilkan diatas, Tampilan logo blog tidak tampil di berada browser ponsel. Namun jika pada cara pertama favicon sudah tampil, maka cukup cara pertama ini yang digunakan.