Pada kesempatan ini admin felmika akan membagikan tutorial cara mengganti icon bawaan blogger dengan gambar atau logo kita sendiri.
Pada saat membuat blog di blogger, loco atau icon yang ditampilkan pada adress bar adalah icon bawaan blogger itu sendiri. Tahukah kalian bahwa icon tersebut bisa kita ganti dengan logo aatau gambar kita sendiri.
bagi Kalian user blogger lama, bahwa sekaran untuk mengganti icon atau yang biasa dikenal dengan istilah favicon, tidak bisa lagi gidanti melalui menu tata letak blogger.
Karena perlu kita ketahui bahwa di tahun kemarin blogger banyak melakukan update dan perubahan-perubah, sehingga untuk mengganti icon tidak bisa lagi dilakukan melalui menu tata letak.
Sebelum kita memulai tutorial berikut apasaja yang perlu disiapkan untuk mengganti icon favicon dengan icon kita sendiri:
- Siapkan gambar dengan format PNG, JPG, ICO atau GIF (saran admin gunakan logo dengan format PNG)
- Ukuran logo maksimal 100kb (Jadi jika melebihi ukuran tersebut tolong diperkecil lagi)
- Logo Harus berbentuk persegi, dengan lebar dan tinggi yang sama misalnya 32x32px atau 512x512px
- Gambar harus jelas sehingga mudah dikenali dan diingan oleh pembaca
Cara Mengganti Icon (Favicon) di Blogger dengan Icon Sendiri
- Buka Blogger
- Pilih Setelan
- Klik Favicon
- Pilih File untuk memilih icon dari komputer
- Pilih Icon yang sudah disiapkan, kemudian Open
- Jika sudah, pilih Simpan
Itulah tadi cara dasar yang dapat kita lakukan agar icon pada tab chrome kita berubah dengan icon kita sendiri.
Namun sayangnya cara ini hanya mengubah icon pada adress bar dan mesin pencari di komputer, sementara untuk android sendiri pada halaman utama google chrome, icon ini tidak bisa terdeteksi.
Lantas bagaimana cara agar icon blog kita muncul di halaman utama google chrome?. Caranya adalah dengan memasang kode Favicon di HTML template blog kita. Untuk tutorialnya sebagai berikut.
Cara Memasang Kode Favicon di HTML Blogger
- Pilih Tema
- Dibagian SESUAIKAN, pilih Edit HTML
- Masukkan kode ini tepat dibawah kode
</head>
atau</head><!--<head/>-->
<!--[ Favicon ]--> <link expr:href='data:blog.canonicalHomepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/> <link href='https://blogger.googleusercontent.com/img/b/......./s32/GAMBAR-UKURAN-32x32.png' rel='icon' sizes='32x32'/> <link href='https://blogger.googleusercontent.com/img/b/......./s192/GAMBAR-UKURAN-192x192.png' rel='icon' sizes='192x192'/> <link href='https://blogger.googleusercontent.com/img/b/......./s180/GAMBAR-UKURAN-180x180.png' rel='apple-touch-icon-precomposed'/> <meta content='https://blogger.googleusercontent.com/img/b/......./s144/GAMBAR-UKURAN-144x144.png' name='msapplication-TileImage'/
- jika sudah pilih Simpan Tema
Keterangan:
Nama | Keterangan |
---|---|
https://blogger.googleusercontent.com/img/b/……./s32/GAMBAR-UKURAN-32×32.png | Ganti dengan icon ukuran 32x32p |
https://blogger.googleusercontent.com/img/b/……./s192/GAMBAR-UKURAN-192×192.png | Ganti dengan icon ukuran 192x192px |
https://blogger.googleusercontent.com/img/b/……./s180/GAMBAR-UKURAN-180×180.png | Ganti dengan icon ukuran 180x180px |
https://blogger.googleusercontent.com/img/b/……./s144/GAMBAR-UKURAN-144×144.png | Ganti dengan icon ukuran 144x144px |
Catatan: Jika icon pada address bar tidak tampil, coba kosomgkan cache browser kalian, atau tunggu beberpa hari hinggaicon kalian berubah.
Demikianlah tutorial dari winmoca.com tentang cara mengubah icon blog dengan icon kita sendiri. Semoga tutorial ini dapat bermanfaat bagi kita yang sedang belajar tentang blogger, terimakasih.